開発効率を最大化する!クロスブラウザDevTools活用テクニック徹底解説

クロスブラウザ対応のWebアプリケーション開発は決して簡単な作業ではありません。ブラウザごとにデバッグツールの充実度や仕様が異なるためです。しかし幸いなことに、現在の主要ブラウザのほとんどがモダンな標準規格をサポートしており、開発者にとって便利な機能を数多く提供しています。

Chrome、Firefox、Edgeといった主要ブラウザは、開発者ツール(DevTools)を継続的にアップデートしており、そのたびに新しい機能が追加されることがあります。直感的なUI、より高度なデバッグ機能、強化されたパフォーマンス分析ツールなど、これらの新機能は使いやすさを大きく向上させてくれます。

こうした変化に常にキャッチアップすることで、ブラウザのDevToolsを最大限に活用でき、ワークフローの改善とWebアプリケーションのリリース速度向上につながります。

目次

• DevToolsで「スクロールして表示(Scroll Into View)」を使う方法

• DevToolsのコンソールショートカットを使う方法

• DevToolsでリソースリクエストをブロックしてサイトをテストする方法

• DevToolsでネットワークリクエストを編集・再送信する方法

• DevToolsで未使用のソースコードを検出する方法

• DevToolsでアクセシビリティツリーを有効化する方法

• まとめ

本記事では、クロスブラウザで使える便利なDevTools機能を紹介し、その具体的な使い方を解説していきます。それでは始めましょう!

DevToolsで「スクロールして表示(Scroll Into View)」を使う方法

デバッグ中には、問題箇所を特定するために大量のHTMLノードを目で追うことがあります。目的のノードを見つけても、ページ上のその位置までスクロールしなければ実際の表示を確認できないことがほとんどです。

「スクロールして表示」機能を使えば、DOMノードを簡単にビューポート内へ移動できます。Chrome、Firefox、Edgeでは、対象ノードを右クリックして「Scroll into view」を選択するだけです。

この機能は、CSSの問題をデバッグする際や、ページ上の要素が正しく配置されているか確認したい場合に大きな時間節約になります。何行ものコードを手動でスクロールすることなく、HTMLノードから素早くページ上の要素を特定できます。

以下の画像では、複数階層の要素の中にネストされたh2要素を探しているところです。

上の画像のように、ページ全体をスクロールしてh2要素を探す代わりに、右クリックで「Scroll into view」を使えば瞬時に該当要素を画面内に表示できます。要素までジャンプした後は、スタイルパネルからCSSプロパティをリアルタイムに調整したり、レイアウトの問題を発見・修正したりと、さまざまな操作に展開できます。

DevToolsのコンソールショートカットを使う方法

コンソールには、開発者がより速くデバッグできるようにする多数のショートカットが用意されています。そのひとつが$_ショートカットです。これは、コンソールで最後に評価された式の結果を返します。例として、乗算関数を見てみましょう。

下の画像では、$_ショートカットが特殊変数としてブラウザコンソールで使われ、直近に評価された式を保持している様子がわかります。

$_ショートカットを使わない場合、関数呼び出し全体を再入力するか、次のように結果を変数に格納する必要があります。

let result = multiply(5)
result(4) // 20 を返す

このコードでは、multiply(5)関数が関数を返し、それをresultに代入してから、引数4を渡してresult(4)として呼び出しています。

お気づきの通り、これには冗長さと余分なステップが含まれており、より複雑な操作や多段階の計算を行う場合には煩雑になりがちです。ここで$_ショートカットが真価を発揮します。コンソールでmultiply(5)を実行すると、返された関数が自動的に$_変数に格納され、$_経由でいつでもアクセスできるのです。

もうひとつの便利なショートカットが、$0によるノードへのアクセスです。$0を使うと、Elementsパネルで現在選択しているDOMツリー上のノードに、コンソールから直接アクセスできます。DevToolsでWebページを調査する際、通常はElementsパネルでDOMツリーを辿って目的の要素を探すことになります。パネル内の要素をクリックすると、DevToolsは内部的にその要素を記録し、それが「現在選択中の要素」となります。

$0はコンソール内で現在選択されている要素を参照するショートカットなので、再度セレクタを書いて要素を取得し直すことなく、直接操作できます。

下のスクリーンショットは、コンソールで$0を使って選択中のノードにアクセスし、背景色を自由に変更している例です。

上の画像では、まずElementsパネルで目的の要素を調査しました。ここでdocument.querySelector('#element')で再取得する代わりに、$0を使えば次のように直接操作できます。

$0.style.backgroundColor = 'lightblue';

このコードは、選択された<div>の背景色を淡いライトブルーに変更します。$0が便利なのは、DOM上で自分が選んだ正確な要素を直接参照できる点です。動的に生成された要素や深くネストされた要素の場合でも、確実に正しい要素を操作できるようになります。

DevToolsでリソースリクエストをブロックしてサイトをテストする方法

「リソースリクエストのブロック」機能は、特定のリソースが読み込めない状況でWebサイトがどのように振る舞うかをテストするために、Web開発者にとって重要な機能です。

この機能を使えば、画像、JavaScript、CSS、あるいはドメイン全体が到達不能になった状況をシミュレートし、その際にWebページがどう動作するかを確認できます。

ブラウザが要求するリソースが必ずダウンロードされるとは限らず、それはサイト利用者に予期しない体験をもたらす可能性があります。Chrome、Firefox、Edgeではリソースへのリクエストをブロックし、サイトの挙動をテストできます。

ChromeおよびEdgeの場合:

• Networkパネルで、ブロックしたいリソースを右クリックし、「Block request URL」を選択します。

• Webサイトを更新すると、ブロックされたリソースはダウンロードされず、ページに影響を与えません。

下の画像では、Networkタブの「Block request URL」オプションを使ってCSSリクエストをブロックし、選択したCSSファイルの読み込みに失敗した場合のページ表示を確認しています。

上の画像からわかるように、Webページが発行したすべてのネットワークリクエスト(画像、CSSファイル、JavaScriptファイルなど)が一覧表示されます。ここではCSSファイルのみが表示されるようフィルタリングしています。

この状態でNetworkパネル内のCSSファイルを右クリックし、「Block request URL」を選択します。これにより、次回ページを更新したときにブラウザはそのCSSファイルを読み込まなくなります。

リクエストをブロックすることで、予期しない挙動に気づけるだけでなく、ブロックしたリソースが欠如することでページの読み込み時間やパフォーマンスにどのような影響があるかも測定できます。

Firefoxの場合:

• Networkパネルで、ブロックしたいリソースを右クリックし、「Block URL」を選択します。

• ページを再読み込みします。

筆者も、特定のJavaScriptファイルを読み込まなかった場合にサイトがどう動作するかをテストするためにこの機能を使ったことがあります。ユーザーがJavaScriptを無効化している場合に発生しうる問題のデバッグにも役立つ機能です。

DevToolsでネットワークリクエストを編集・再送信する方法

DevToolsの最もクールな機能のひとつが、ブラウザ上で直接ネットワークリクエストを編集して再送信できる機能です。この機能は、ネットワークリクエストの問題をデバッグする際に非常に役立ちます。たとえば、フロントエンドのコードを変更したりリクエスト処理全体をやり直したりすることなく、リクエストパラメータ、ヘッダー、ボディの変更がサーバーのレスポンスにどう影響するかを確認したい場合などです。

ネットワークリクエストを行う際、バックエンドサービスへのリクエストが失敗したり、意図したデータが返ってこなかったりすることがあります。リクエストを再試行するためにページ全体を再読み込みするのは苦痛ですが、だからこそ「編集して再送信(Edit and Resend)」機能が役立ちます。

EdgeとFirefoxでは、編集または再送信したいリクエストを右クリックして「Edit and Resend」を選択するだけで、下の画像のようにリクエストを編集・再送信できます。

上の画像では、あるWebサイトへのログインを試みています。ユーザーが認証情報を送信すると、フォームはユーザー名とパスワードを含むPOSTリクエストをAPIエンドポイント/auth/loginに送信します。

サーバーが400 Bad Requestエラーを返すこともあります。そのエラーをデバッグして原因を突き止めるには、リクエストを再試行する必要があります。フォームに何度も入力し直すのは避けたいので、下図のように「Edit and Resend」機能を使用します。

上の画像は、「Edit and Resend」をクリックすると開くネットワークコンソール(サイドバー)で、リクエストの詳細が表示されています。ここで編集できる項目は以下の通りです。

• URL: 必要に応じてURLを変更したり、クエリパラメータを追加したりできます。

• Headers: Content-Typeヘッダーの欠落や誤りに気づいた場合、ここで修正できます。

• Body: ペイロードを調整できる場所です。たとえばユーザー名やパスワードフィールドの修正などが可能です。

Chromeブラウザでは、編集・再送信機能はXHRリクエストに対してのみ機能し、リクエストを右クリックして「Replay」を選択することで使用できます。

DevToolsで未使用のソースコードを検出する方法

DevToolsのCoverage(カバレッジ)ツールを使うと、Webページの読み込みおよび操作段階で使用されていないJavaScriptファイルやCSSファイルの部分を特定できます。ファイルサイズを削減し不要なコードを排除することで、ページの読み込み時間を短縮し、優れたユーザー体験を実現するための、Webパフォーマンス向上における重要な機能です。

未使用のJS・CSSコードを削除することは、ユーザーの帯域幅を節約する優れた手段です。Coverageツールを使えばソースコード内の未使用部分を発見し、削除するか、必要になるまで読み込みを遅延させることができます。

ChromeおよびEdgeの場合:

• DevToolsでCtrl/cmd+Shift+Pを押し、「coverage」と入力して「Start instrumenting coverage and reload page」を選択し、Enterキーを押します。

• JSファイルとCSSファイルの一覧表が、未使用バイト数の列とともに表示されます。

• 任意のファイルをクリックして開くと、横のバーで未使用のコード部分が赤色で示されます。

下の画像では、未使用のCSSコードを特定し、削除または読み込み遅延の候補としています。

上の画像のように、計測が完了すると、Coverageツールはページが読み込んだCSS・JavaScriptファイルの一覧を詳細な指標とともに表示します。

• Total Bytes: ファイルのサイズ。

• Unused Bytes: ファイル内で使用されなかったバイト数。

• Usage Visualization: 使用済みコードと未使用コードの割合を表す視覚的なバー。

Safariの場合: Sourcesパネルで左側のナビゲーションサイドバーを開き、任意のJSファイルをクリックします。ツールバー右上のカバレッジアイコンcをクリックしてページを更新すると、実行されていないコード部分がグレー表示されます。

DevToolsでアクセシビリティツリーを有効化する方法

アクセシビリティツリーは要素のDOMツリーに似たもので、スクリーンリーダーなどの支援技術がWebコンテンツを読み上げる際に使用されます。開発者はこの機能を利用して、自社サイトのアクセシビリティ問題をデバッグできます。Chromium系ブラウザはChromeのアクセシビリティAPIによってこれを実現しており、Firefoxにも独自のアクセシビリティツールが備わっています。

ChromeおよびEdgeの場合:

• 設定ページで「Experiments」タブを選択します。

• Elementsパネルの「Enable full accessibility tree view」オプションにチェックを入れます。

• DevToolsを再起動し、Elementsツールに移動します。

• 要素ビューの右上隅にある「Switch to Accessibility Tree view」をクリックします。

たとえば下の画像では、サイト上のリンクやボタンが正しく認識され、スクリーンリーダーを利用するユーザーにとってアクセス可能かどうかを確認しています。

アクセシビリティツリーを有効にすると、アクセシビリティに関連する要素に焦点を絞った、簡素化版のDOMツリーが表示されます。アクセシビリティツリー上で要素を選択してプロパティを表示すると、その要素のrole(ロール)、name(名前)、そして存在する場合はaria-labelなどの重要な属性が表示されます。

さらに、その要素がフォーカス可能かどうかや、計算済みのアクセシビリティプロパティも確認できます。

これは非常に有用です。要素がアクセシビリティツリーに正しく現れない、あるいは重要な属性が欠落している場合は、HTMLやARIA属性を調整してアクセシビリティを改善する必要があるからです。

Firefoxの場合:

• Firefox DevToolsで「Accessibility」タブをクリックし、documentノードを展開します。

• 各ノードをクリックしてプロパティを確認できます。

• ノードのアクセシビリティに関する問題は「Checks」タブに表示されます。

まとめ

要するに、最新のクロスブラウザDevTools機能に常にキャッチアップすることは、Web開発者としての時間節約につながります。本記事では、要素の検査に関するヒント、デバッグ作業を楽にするコンソールショートカット、ネットワーク監視に役立つ実用的なTipsを取り上げました。

ぜひ、さらに多くのDevTools機能を探索・活用して、開発体験の向上につなげてください。