Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。
いやー、本当にデベロッパーツールは機能が豊富ですね。

How to use Chrome DevTools like a Pro

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• HTMLの要素をクイック編集
• 指定した行番号に移動
• すべての子ノードを展開
• デベロッパーツールの位置を変える
• CSSのセレクタによるDOM検索
• Material Designとカスタムカラーパレット
• 複数のカーソル
• 画像をData URIとしてコピー
• 疑似クラスのトリガー
• 複数のコラムをドラッグで選択
• 「$0」で現在の要素を手に入れる
• 要素の表示
• 「Event Listeners」の表示
• イージングのプレビュー
• Media Queriesの検証
• ネットワークをフィルムストリップ表示
• レスポンスヘッダのコピー
• スニペットを試す
• モバイルデバイスのセンサーをシミュレート
• ワークスペース
• 参考

元記事とは関係ありませんが、こちらもオススメ。

• Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法

HTMLの要素をクイック編集

「Sources」パネルから「:行番号:桁位置」のフォーマットで利用できます。

• Commnad + O

すべての子ノードを展開

• 「Elements」パネルを選択。
• DOM要素を選択し、アローをAlt + クリック。

デベロッパーツールの位置を変える

• Commnad + Shift + D

ドックのオプション

• デベロッパーツールのドックを解除
• ドックを下に
• ドックを右に

CSSのセレクタによるDOM検索

• Commnad + F / Ctrl + F して、class名やid名を入力して検索。

Material Designとカスタムカラーパレット

• Page Colors

  表示しているページから自動的に生成されたカラーパレットです。

• Material Design

  Material Design paletteから自動的に生成されたカラーパレットです。

複数のカーソル

複数のカーソルを加えるためには、Commnad + クリック でカーソルを動かします。Command + U で最後の選択を元に戻すことができます。

画像をData URIとしてコピー

• 左パネルを右クリックし、「Force Element State」を選択。
• 右パネルの「Force Element Stateから疑似クラスをクリックすることができます。

複数のコラムをドラッグで選択

• Consoleパネル内で、右クリック。
• 「Reveal in Elements Panel」を選択。

「Event Listeners」の表示

• 「Elements」パネルを選択。
• 「Event Listeners」を操作して、イベントを選択。
• 右クリックでソースを表示し、コンテクストメニューから「Show Function Definition」を選択。

イージングのプレビュー

• イージングアイコン（紫のアイコン）をクリックして、プレビューを表示。
• 選択したアニメーションの動きを見たり、他のイージングのフォーマットをセットすることができます。

Media Queriesの検証

• 「device mode」にして、左上角のバーのアイコンをクリック。
• ブレイクポイントのバー（ブルー・グリーン・オレンジのバー）をクリック。
• バーを右クリックすると、コードでの位置を確認できます。

ネットワークをフィルムストリップ表示

• 「Sources」パネルを選択、左サイドバーから「Snippets」を選択。
• 右クリックして「New」を選択。
• ファイル名を入力して、右パネルにスニペットを記述。
• スニペットのファイル名を右クリックして「Run」を選択。

モバイルデバイスのセンサーをシミュレート

モバイルデバイスのセンサーをエミュレートできます。

• タッチスクリーン
• 緯度経度情報
• 加速度計

• 「Elements」パネルを選択。
• Escキーを押して下部のパネルを表示し、「Emulation」タブの「Sensors」を選択。

ワークスペース