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の要素をクイック編集

• 「Elements」パネルを選択。
• Elementsパネルエディタで、DOM要素を選択。
• タグをダブルクリックすると、編集できます。

指定した行番号に移動

「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としてコピー

• 「Network」パネルを選択。
• リソースパネルから画像を選択。
• 右クリックで画像をData URI(base 64 encoded)でコピーできます。

疑似クラスのトリガー

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

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

• 「Sources」パネルを選択。
• Sourcesパネルエディタでファイルを選択。
• 複数のコラムをAlt + ドラッグで選択できます。

「$0」で現在の要素を手に入れる

• 「Elements」パネルを選択。
• ElementsパネルエディタでDOM要素を選択。
• コンソールをクリックし、それにアクセスするために「$0」を書いてください。

要素の表示

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

「Event Listeners」の表示

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

イージングのプレビュー

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

Media Queriesの検証

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

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

「フィルムストリップ」はページのレンダリングのスクリーンショットと時間を始めから終わりまで表示します。

• 「Network」パネルを選択。
• カメラアイコンをクリック。
• Command + R でページをリロード。

レスポンスヘッダのコピー

ネットワークリソースのレスポンスヘッダとリクエストヘッダをコピーすることができます。

• 「Network」パネルを選択。
• リソースパネルからファイルを選択。
• 右クリックして「Copy Response」を選択。

スニペットを試す

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

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

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

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

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

ワークスペース

• 「Sources」パネルを選択。
• ソースパネルで右クリックして「Add Folder to Workspace」を選択。
• ファイルを選択し、右クリックして「Map to Network Resources」を選択。
• ファイルのコードを変更して、それを見てください。

参考

• Chrome DevTools
• Dev Tips