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

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

Chrome デベロッパーツールサイトのキャプチャ

How to use Chrome DevTools like a Pro

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

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

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」を選択。
  • ファイルのコードを変更して、それを見てください。

参考

top of page

©2017 coliss