Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ

Post on:2018年4月2日

Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。

サイトのキャプチャ

Cool Chrome DevTools tips and tricks you wish you knew already

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

01. 要素をElementsパネル内でドラッグ&ドロップ

デベロッパーツールのElementsパネルでは、ページ上のあらゆるHTML要素をドラッグ&ドロップで移動することができます。

  1. Elementsパネルで要素を指定。
  2. ドラッグ&ドロップで移動。

ページ上の要素をドラッグ&ドロップで移動

02. コンソールで現在の要素を参照

デベロッパーツールのElementsパネルで要素を選択し、その要素を参照するためにコンソールに「$0」を入力します。

jQueryを使用している場合は「$($0)」を入力することで、この要素のjQuery APIにアクセスできます。

  1. Elementsパネルで要素を指定。
  2. Consoleを開き、「$0」を記述。

コンソールで現在選択されている要素を参照

03. コンソールで最後に実行された値を参照

デベロッパーツールのコンソールで「$_」を入力すると、最後に実行された前に操作した戻り値を参照します。

  1. Consoleパネルを選択。
  2. 「$_」を入力。

コンソールで最後に操作した値を参照

04. セレクタを加えて、要素のスタイルを追加

デベロッパーツールのElementsパネルには、有用な素晴らしいボタンが2つあります。

1つ目のボタンでは任意のセレクタで新しいCSSのプロパティを追加でき、現在選択されている要素をすぐに入力することができます。

  1. Elementsパネルで要素を指定。
  2. Stylesパネルに移動。
  3. 「+」ボタンをクリック。

要素のスタイルを追加

2つ目のボタンでは選択された要素の状態、active, hover, focusなどに適用されるスタイルを表示できます。

  1. 「:hov」ボタンをクリック。
Chrome デベロッパーツールのキャプチャ

要素の状態を編集

05. 変更したCSSをファイルに保存

デベロッパーツールで変更したCSSは、ファイルに保存することができます。
変更したCSSファイルの名前をクリックします。Sourcesパネルにそのインスペクタを開き、そこから、ライブで変更したCSSを保存できます。

このテクニックは変更された既存のセレクタに対してのみ機能しますが、「+」や「element.style」プロパティに追加された新しいセレクタでは機能しません。

  1. Stylesパネルで、CSSファイルをクリック。
  2. Sourcesパネルで、CSSファイルを右クリック。
  3. 「Save as...」で保存。

変更したCSSをファイルに保存

06. 指定した要素のみをスクリーンショット

デベロッパーツールを使用すると、指定した要素のみを簡単にスクリーンショットに撮ることができます。要素を選択し、コマンドメニューから「Capture node screenshot」を選択すると、その要素のみを撮影できます。

  1. Elementsパネルで要素を指定。
  2. command+shift+P(win: ctrl+shift+P)でコマンドメニューを表示。
  3. コマンドメニューから「Capture node screenshot」を選択。
    「screen」と入力すれば、簡単に選択できます。

指定した要素のみをスクリーンショット

07. CSSセレクタを使用している要素を検索

Elementsパネルで「commnad+F(win: ctrl+F)」を押すと、検索ボックスが開きます。その検索ボックスにソースコードと一致する文字列を入力するか、CSSセレクタを使用してChromeで画像を生成することもできます。

  1. Elementsパネルを選択。
  2. command+F(win: ctrl+F)を押して検索ボックスを開く。

CSSセレクタを使用している要素を検索

08. コンソールで複数の行にまたがるコマンドを記述

コンソールで複数の行にまたがるコマンドを書き込むには、「shift+enter」を押します。コマンドの記述が完了したら、スクリプトの最後にEnterキーを押して実行します。

  1. Consoleパネルを選択。
  2. 複数の行で記述する時には「shift+enter」を押す。

コンソールで複数の行にまたがるコマンドを記述

Consoleパネルの左上にあるClearボタンをクリックするか、command+K(win: ctrl+L)を押してコンソールをクリアすることができます。

09. Sourcesパネルの便利な機能

Sourcesパネルで

  • command+O(win: ctrl+O)を押すと、ページで読み込まれたすべてのファイルを表示します。
  • command+shift+O(win: ctrl+shift+O)を押すと、現在のファイルのシンボル（プロパティ、関数、クラス）を表示します。
  • commnad+G(win: ctrl+G)を押すと、指定した行に移動します。
Chrome デベロッパーツールのキャプチャ

Sourcesパネルでファイルやコードを見つける

10. Watchパネルで変数を監視

デバッグする際、多くのチェックするために変数名や式を繰り返し記述するのではなく、Watchパネルでリストを作成することができます。

  1. Sourcesパネルを選択。
  2. Watchパネルの「+」ボタンで式を追加。

Watchパネルで変数を監視

11. XHR/Fetchのデバッグ

XHR/Fetch Breakpointsパネルを使用すると、XHR/Fetchコールが送信された時、または特定のコールだけが破棄されるように設定できます。

  1. Sourcesパネルを選択。
  2. XHR/Fetch Breakpointsパネルの「Any XHR or fetch」をチェック。
Chrome デベロッパーツールのキャプチャ

XHR/Fetchのデバッグ

12. DOMの修正に関するデバッグ

要素を右クリックし、「subtree modifications」を有効にします。スクリプトがその要素の子たちを走査して、それらを変更すると、デバッガは自動的に停止して何が起きているのかを検査します。

  1. Elementsパネルで要素を指定。
  2. 要素を右クリックし、「Break on」のサブツリー「subtree modifications」を選択。
Chrome デベロッパーツールのキャプチャ

DOMの修正に関するデバッグ

最近のWeb開発状況

私は、最近のWeb開発についてe-bookを提供しています。
React、Redux、Progressive Web Apps、ES6、ES7、ES8、Webpack、GraphQL、Babel、サービスワーカー、フェッチ、プッシュ通知などについて、解説しています。

sponsors

top of page

©2024 coliss