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