Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Post on:2015年9月24日
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。
いやー、本当にデベロッパーツールは機能が豊富ですね。


How to use Chrome DevTools like a Pro
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- HTMLの要素をクイック編集
- 指定した行番号に移動
- すべての子ノードを展開
- デベロッパーツールの位置を変える
- CSSのセレクタによるDOM検索
- Material Designとカスタムカラーパレット
- 複数のカーソル
- 画像をData URIとしてコピー
- 疑似クラスのトリガー
- 複数のコラムをドラッグで選択
- 「$0」で現在の要素を手に入れる
- 要素の表示
- 「Event Listeners」の表示
- イージングのプレビュー
- Media Queriesの検証
- ネットワークをフィルムストリップ表示
- レスポンスヘッダのコピー
- スニペットを試す
- モバイルデバイスのセンサーをシミュレート
- ワークスペース
- 参考
元記事とは関係ありませんが、こちらもオススメ。
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」を選択。
- ファイルのコードを変更して、それを見てください。
参考
sponsors