せっかく毎日コンソールを開けるのですから、もっとクールに操作してみませんか？
注意深く見てください、あなたが知らないデバッグのヒントがあるはずです。
1.エレメントパネルでエレメントをドラッグ＆ドロップします。
要素パネルでは、任意のHTML要素をドラッグ＆ドロップし、ページ上の位置を変更することができます。
2.現在選択されている要素をコンソールに表示
要素パネルでノードを選択し、コンソールに$0と入力して表示を呼び出します。
3.直前の操作の値を「コンソール」で使用します。
コンソール」で最後に実行された操作の戻り値を参照するには$_を使用します。
4.CSSの追加と要素の状態の編集
Elementsパネルには、2つの便利なボタンがあります。
1つ目は、任意のセレクタを使用して新しいCSSプロパティを追加できますが、現在選択されている要素が空であってはなりません：
次に、選択した要素の状態をトリガーして、その要素がアクティブなとき、ホバーしているとき、またはフォーカスが合っているときに対応するスタイルを表示できます。
5.変更したCSSファイルを保存します。
編集した CSS ファイルの名前をクリックします。インスペクタがそれをソースパネルに開き、ライブ編集したスタイルアプリケーションと一緒に保存できます。
6.個々の要素のスクリーンショット
要素を選択し、cmd-shift-pを押して "Command "メニューを開き、Capture node screenshotを選択してスクリーンショットを撮ります。
7.CSSセレクタを使って要素を探す
cmd-fキーを押して、Elementsパネルの検索ボックスを開きます。
ソースコードにマッチする文字列を入力するか、CSSセレクタを使用してChromeを対応するイメージにジャンプさせることができます：
8. "Console "でShift-Enterを押します。
Consoleパネルで行をまたいでコマンドを書き込むには、shift-enterキーを押します。
スクリプトの最後にEnterキーを押して実行します：
ジャンプ先...
ソースパネルで
- cmd-oで、あなたのページが読み込んだすべてのファイルを表示します。
- cmd-shift-o は、現在のファイルのシンボルを表示します。
- ctrl-gで特定の行に移動します。
10.リスナー表現
デバッグ中に変数名や式を何度も書く代わりに、「リスニング式」のリストに追加することができます。
XHR/Fetch
デバッガで、XHR/Fetch Breakpointsパネルを開きます。
XHR/Fetch呼び出し、または特定の呼び出しにブレークポイントを設定できます：
12.DOM変更のデバッグ
要素を右クリックしてBreak on Subtree Modificationsを選択します。スクリプトがその要素の子要素を走査して変更を加えるたびに、デバッガーは自動的に停止するので、テストをチェックできます。
