クロームデベロッパーツールをデバッグする開発者向けツール

1-1クロームデベロッパーツールの特長

（ナイン官能パネル）

（1）エレメントパネル要素

DOM、CSSのデバッグのデバッグ、ページをチェックして、調整

（2）ネットワークネットワークパネル

デバッグ要求、ページの静的リソース配分を理解し、Webパフォーマンステスト

（3）コンソールコンソールパネル

コンソールログログを表示する、JavaScriptのデバッグ、インタラクティブなデバッグコード

（4）ソース、ソースコードのリソースパネル

JavaScriptのページのソースコード、ブレークポイントデバッグコードのデバッグ

（5）アプリケーションのアプリケーションパネル

こうしたクッキー、のlocalStorageとしてビュー＆デバッグクライアントサイドストレージ、のsessionStorageなど

（6）パフォーマンスパフォーマンスパネル

ビューのパフォーマンスの詳細ページ、ページロードのパフォーマンスの最適化（上位）にきめ細かいです

（7）メモリメモリパネル

JavaScriptのCPUアナライザ、ヒープ・アナライザ（上位）

（8）セキュリティセキュリティパネル

このページに表示するセキュリティと認証の問題（高い順）

（9）監査パネル

Googleの灯台は、パフォーマンス分析を支援する使用し、最適化の推奨事項は、（高い順）与えられています

オープンChromeデベロッパーツール

• クロームでメニューを選択します。その他のツール - >開発ツール
• 右クリックし、ページ要素の「チェック」

• ショートカット
  最近閉じた状態を開くために：
  Cmdを+オプトイン+ I（MAC）
  はCtrl + Shiftキー+ I（Windowsの場合）

  クイックビューのDOMやスタイル：
  コマンド+ C + Optionキー（Mac）
  コントロール+ Shiftキー+ C（Windowsの場合）

  コンソールで実行Javascriptのへのクイックビューログ：
  コマンド+オプション+ J（Mac）を
  コントロール+ Shiftキー+ J（Windowsの場合）

• F12

表示して選択DOMノード

• DOMは、ページを選択し、逆の位置にあるDOMは、ページに配置されています
• 検索でDOM（コマンド+ F）で

リアルタイム編集とHTML DOMノード

• 編集
• プロパティの編集属性
• 要素の種類を変更します
• オーダー調整DOMノード
• HTMLコードを編集するためのエディタのように
• 非表示/追加/削除/コピーノード

コンソールアクセスノードで

• document.querySelectAllアクセスを使用してください

• クイックアクセス選択した要素$ 0使い方
  

• コピー - > JSパス
  

  

DOMブレークポイントのデバッグで

• プロパティの変更をポイントしたときに中断
  >属性の変更を-に破ります
• 節点削除するときに中断
  >ノードの削除-上の休憩を
• 中断時にサブツリーの修正ポイント
  でブレーク- >サブツリーの変更
  

要素＃では動的擬似クラスとクラスを増加します

• 状態
  

• 要素クラス
  

• 新ルール
  

クイック試運転CSS値とカラーグラフィックスアニメーション

1）可視化

• テキストの影
  

• シャドーボックス
  

• カラー
  

• 背景色
  

• アニメーション
  

推奨サイト：

はじめに、インタラクティブなコマンドコンソールパネル

1. JavaScriptコードを実行し、対話型のプログラミング
2. 印刷中にログビューアのログを記録
3. ブレークポイントデバッグコードのデバッグ

コンソールのデバッグでログイン

1. console.log印刷情報
2. console.warnアラーム
3. console.errorエラーメッセージ
4. JSON形式でconsole.table表示複雑な情報
   
5. console.group情報グループショー
   
6. console.customカスタムスタイル
   
   二番目のパラメータのスタイルとして％のC
7. ネットワークエラーディスプレイネットワーク要求

Javascriptをデバッグする基本的なプロセス