Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

Post on:2015年10月30日

先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。

Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。

知らないと損！デベロッパーツールの便利な使い方

Chrome Devtools Tips & Tricks

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

スタイルがどのファイルにどのように指定されているか調べる

デベロッパーツールのキャプチャ

※画像は元記事のものではなく、当方の環境のものを使用しています。

デベロッパーツールの便利な使い方

  1. タブ「Elements」を選択
  2. DOM要素を選択
  3. 右パネルのタブ「Computed」を選択

「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。
これは大きなサイトを制作している時に、非常に有用です。

デベロッパーツールのキャプチャ

該当のCSSファイルとそのセレクタを表示

WebアプリのHTTPリクエストを調べる

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. 「Settings(F1)」を選択
  2. 左のメニューから「General」を選択
  3. 「Console」内の「Log XMLHttpRequests」をチェック

GoogleマップなどのXMLHttpRequestを利用したWebアプリケーションが何を送っているか確認することができます。上記の設定を行うと、タブ「console」にHTTPリクエストのログが表示されます。
これに代わる軽量の選択肢はタブ「Sources」の右パネル「XHR Breakpoints」で「Any XHR」をチェックし、ブレークポイントを活性化することです。

非同期のデバッグを行う

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. 右パネル「Async」をチェック

Webアプリが通常の間隔でXMLHttpRequestをしており、このタイマーがどこにセットアップされているか調べたいとします。そんな時は上記の設定を行うことで、setTimeout()やsetInterval()などの呼び出し情報を調べることができます。

クリック時に実行されるコードを調べる

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. 右パネル「Event Listener Breakpoint」を開く
  3. 「Mouse」を開き、「Click」をチェック

ボタンやリンクをクリックした時に、実行されるコードを素早く見つけることができます。この確認作業のポイントは、クリックする直前に「Click」をチェックすることです。そうしないとクリック操作全てに反応してしまいます。

スクリプトのデバッグをBlackboxを使って簡単に

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. コンテキストメニューから「Blackbox script」を選択

「Event Listener Breakpoint::Mouse::Click」を使うとき、jQueryのようなサードパティのライブラリに最初にたどり着くかもしれません。そうなると、探しているイベントハンドラを見つけるためにはデバッグを数回行う必要があります。これを避ける素晴らしい方法が「Blackbox」です。
このデバッグ方法はBlackboxスクリプトの内部で止まることはなく、その代わりにBlackboxのファイルにはない行まで実行し続けます。

名前で特定のファイルを表示

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. Ctrl+P

Ctrl+Pを使うと、名前で特定のファイルを表示することができます（Atomみたいに）。

関数やセレクタを名前で探す

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. Ctrl+Shift+P

Sourcesパネルで表示されているファイル内の関数やセレクタを名前で探すことができます。

すべてのファイルを探す

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. Ctrl+Shift+F

Ctrl+Shift+Fを使うと、すべてのファイルを探すことができます。

同じ文字列を同時に変更

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. 編集する文字列を選択
  3. Ctrl+D

これもAtomと同様の操作で、文字列を選択し、Ctrl+Dをすると、同じ文字列を選択することができます。変数名を変更する時などに便利ですね。

ローカルファイルの変更をネットワーク上に反映

デベロッパーツールのキャプチャ

デベロッパーツールの便利な使い方

  1. タブ「Sources」を選択
  2. 右クリックで「Add Folder to Workspace」を選択し、ローカルフォルダを選択
  3. 編集したローカルファイルを選択
  4. 右クリックで「Map to Network Resource…」を選択し、ネットワーク上のファイルを選択

デベロッパーツールでローカル上のファイルを編集し、そのファイルの変更を直接ネットワーク上に反映させることが可能です。これをするためにはタブを「Sources」にし、右クリックで「Add Folder to Workspace」を選択し、ローカルにあるフォルダを選択します。変更を反映させるには、ローカルファイルを右クリックで「Map to Network Resource…」を選択し、それに対応するネットワーク上のファイルを選択します。

デベロッパーツールの便利なテクニックのまとめ

  • タブ「Elements」のコンソールに「$0」を入力すると、現在の要素を表示します。
  • 「$x("//p")」を使って、XPath表現を評価することができます。

デベロッパーツールを更に便利にするオススメの機能拡張があります。

  • JSONView
    FirefoxのJSONViewを移植したもので、JSONデータをシンタックスハイライト・インデントして、読みやすくします。
  • JS Error Notifier (non-“spyware” version)
    JavaScriptのエラーをポップアップで表示します。

デベロッパーツールは本当に便利ですが、唯一私をいらいらさせることはキーバインドのカスタマイズができないということです。

sponsors

top of page

©2024 coliss