開発効率の最大化:クロスブラウザ DevTools 機能の活用

多くのブラウザではデバッグ ツールがほとんど提供されておらず、デバッグ ツールはブラウザ間で異なることが多いため、クロスブラウザ Web アプリケーションの構築は困難な作業となる場合があります。幸いなことに、現在、ほとんどのブラウザは最新の標準をサポートしており、開発者にとって役立つ機能を提供しています。

Chrome、Firefox、Edge などの主要なブラウザは開発者ツールを継続的に更新しており、更新のたびに Web 開発者に新機能がもたらされる可能性があります。これらの新機能により、直感的な UI、より高度なデバッグ、強化されたパフォーマンス分析ツールが追加され、使いやすさが向上します。

これらの変更を常に最新の状態に保つことで、ブラウザの DevTools を最大限に活用して、ワークフローを簡素化し、Web アプリケーションの配信を高速化することができます。

目次

• DevTools で [Scroll Into View] を使用する方法

• DevTools でコンソール ショートカットを使用する方法

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

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

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

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

• 概要

この記事では、優れたクロスブラウザ DevTools 機能をいくつか紹介し、その使用方法について説明します。

始めましょう!

デバッグするとき、問題がどこにあるかを見つけるためにざっと目を通す必要がある HTML ノードが多数ある場合があります。ほとんどの場合、ノードを見つけても、ページ上のそのノードまでスクロールするまでは表示されません。

ビューにスクロール機能を使用すると、Chrome、Firefox、Edge で右クリックして [ビューにスクロール] を選択することで、DOM ノードをビューポートに簡単に移動できます。

この機能により、CSS の問題をデバッグするときや、ページ上の要素の正しい配置を確認するときに時間を大幅に節約できるため、コンテンツの何行も手動でスクロールする必要がなく、HTML ノードを通じてページ上の要素をすばやく見つけることができます。

下の画像では、h2 を見つけようとしています。 他の要素の複数のレイヤー内にネストされている要素。

上の画像では、ページ全体をスクロールして h2 を見つけるのではなく、 要素を右クリックし、Scroll Into View 機能を使用して、h2 を即座に表示しました。 要素が視界に入ります。この機能を拡張して、要素にスクロールしたときにその要素で他のことを行うことができます。スタイル パネルを使用して CSS プロパティをリアルタイムで調整したり、レイアウトの問題を見つけて修正したりすることもできます。

コンソールには、開発者がより迅速にデバッグできるようにするショートカットが多数あります。そのうちの 1 つは $_ です。 ショートカット。このショートカットは、コンソールによって評価された最新の式の値を返します。たとえば、乗算関数があるとします。

下の画像では、$_ がどのように動作するかを示しています。 ショートカットは、ブラウザ コンソールで特別な変数として使用され、最後に評価された式を保存します。

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

let result = multiply(5)
result(4) // returns 20

上記のコードでは、multiply(5) function は関数を返し、その関数を result に代入する必要があります。その後、4 で呼び出されます。 パラメータ result(4) として .

これによって、冗長性や余分なステップがすでに導入されており、より複雑な操作を扱う場合や複数の計算ステップを実行する場合に煩雑になる可能性があることがおわかりいただけると思います。ここは $_ です。 ショートカットが光ります。 multiply(5) を実行すると コンソールのコードでは、関数が返され、$_ に保存されます。 コンソールによる変数。$_ を使用してアクセスできます。 ショートカット。

別のショートカットは $0 を使用します。 コンソールからノードにアクセスします。 $0 を使用すると、コンソール内から DOM ツリーで現在選択されているノードにアクセスできます。 DevTools で Web ページを検査するとき、多くの場合、Elements パネルの DOM ツリーを参照して、関心のある要素を見つけます。このパネルで要素をクリックすると、DevTools が内部でこの要素を追跡し、それが現在選択されている要素になります。

$0 は、コンソールで現在選択されている要素を参照するショートカットなので、再度選択するためのクエリを作成しなくても、コンソールで直接操作できます。

以下のスクリーンショットは、$0 の使用方法を示しています。 コンソールで DOM ツリー内の選択したノードにアクセスし、背景色を任意の色に変更します。

上の画像から、要素パネルで必要な要素を検査することから始めました。ここでは、document.querySelector('#element') を使用して要素を再度クエリする代わりに、 、$0 を使用できます。 次のように直接操作するには:

$0.style.backgroundColor = 'lightblue';

このコードは、選択した <div> の背景色を変更します。 優しい水色に。 $0 の本当の意味 この場合に便利なのは、DOM で選択した正確な要素を直接参照できるため、要素が動的に生成されたり、深くネストされている場合でも、確実に正しい要素を操作できることです。

Block Resource Request DevTools 機能は、Web 開発者が特定のリソースを読み込めないときに Web サイトがどのように動作するかをテストするための重要な機能です。

この機能を使用すると、画像、JavaScript、CSS、またはドメイン全体がアクセス不能になる状況をシミュレートでき、その状況でウェブページがどのように動作するかを確認できます。

ブラウザーによって要求されたリソースが常にダウンロードされるとは限らないため、Web サイトのユーザーに予期しないエクスペリエンスが生じる可能性があります。 Chrome、Firefox、Edge でリソースへのリクエストをブロックし、サイトの動作をテストできます。

Chrome と Edge の場合:

• [ネットワーク] パネルで、ブロックするリソースを右クリックし、[リクエスト URL をブロック] を選択します。

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

下の画像では、[ネットワーク] タブの [リクエスト URL をブロック] オプションを使用して CSS リクエストをブロックし、選択した CSS ファイルの読み込みに失敗した場合に Web ページがどのように表示されるかを確認しています。

上の画像から、画像、CSS ファイル、JavaScript ファイルなどのリクエストを含む、Web ページによって行われたすべてのネットワーク リクエストがわかります。私の場合は、CSS ファイルのみが表示されるようにフィルタリングしました。

ここから、[ネットワーク] パネルで CSS ファイルを右クリックし、[リクエスト URL をブロック] を選択します。このアクションにより、次回ページが更新されたときにブラウザが特定の CSS ファイルを読み込まなくなります。

リクエストをブロックすることで、奇妙な動作を監視し、ブロックされたリソースが存在しないことがページの読み込み時間とパフォーマンスにどのような影響を与えるかを測定することもできます。

Firefox の場合:

• [ネットワーク] パネルで、ブロックするリソースを右クリックし、[URL をブロック] を選択します。

• ページをリロードします。

これを使用して、特定の JavaScript ファイルを読み込まないときにサイトがどのように動作するかをテストしました。この機能は、ユーザーが JavaScript を無効にした場合に発生する可能性のある問題を開発者がデバッグするのに役立ちます。

DevTools の最も優れた機能の 1 つは、ブラウザーで直接ネットワーク リクエストを編集して再送信できる機能です。この機能は、ネットワーク リクエストの問題をデバッグする場合に非常に役立ちます。たとえば、フロントエンド コードを変更したり、リクエスト プロセス全体を再起動したりすることなく、リクエスト パラメータ、ヘッダー、または本文への変更がサーバーからのレスポンスにどのような影響を与えるかを確認したいシナリオなどです。

ネットワーク要求を行う場合、バックエンド サービスに対する要求が失敗するか、意図したデータで応答しない可能性があります。リクエストを再試行するためにページ全体をリロードする必要があるのは面倒です。そのため、編集と再送信機能が役立ちます。

Edge および Firefox ブラウザでは、以下の画像のように、編集または再送信するリクエストを右クリックし、[編集と再送信] を選択することで、ネットワーク リクエストを編集および再送信できます。

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

場合によっては、サーバーが 400 を返す場合があります。 不正なリクエスト エラー。エラーをデバッグして理由を調べるには、リクエストを再試行する必要があります。フォームに入力し続ける必要はないので、以下に示すように編集と再送信機能を使用します。

上の画像はネットワーク コンソール、または [編集して再送信] をクリックすると開くサイドバーで、リクエストの詳細が表示されます。ここで、以下を編集できます。

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

• ヘッダー:Content-Type ヘッダーが欠落しているか、正しくない場合があります。これはここで修正できます。

• 本文:ここで、ユーザー名やパスワードのフィールドを修正するなど、ペイロードを調整できます。

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

DevTools のカバレッジ ツールを使用すると、開発者は、Web ページの読み込みおよび対話段階で未使用のままになっている JavaScript および CSS ファイルの領域を特定できます。これは、ファイル サイズを削減し、不要なコードを削除してページの読み込み時間を短縮し、ユーザー エクスペリエンスを向上させることで、ウェブのパフォーマンスを向上させる重要な機能です。

使用されていない JS および CSS コードを削除することは、ユーザーの帯域幅を節約するための優れた方法です。カバレッジ ツールを使用すると、ソース コード内で未使用のコードを見つけて、削除するか、そのコード部分が必要になるまで保留することができます。

Chrome と Edge の場合:

• DevTools で、Ctrl/cmd+Shift+P を押します。 、「カバレッジ」と入力し、「インストルメント カバレッジの開始」を選択し、ページを更新して、Enter キーを押します。

• 未使用のバイト列を含む JS ファイルと CSS ファイルのテーブルが表示されます。

• いずれかのファイルをクリックして開きます。横の線は、コードのどのセクションが未使用であるかを赤色で示します。

下の画像では、コードの読み込みを削除または延期する可能性がある未使用の CSS コードを特定しています。

上の画像から、記録が完了すると、カバレッジ ツールは、詳細な指標とともに、ページによって読み込まれた CSS ファイルと JavaScript ファイルのリストを表示します。

• 合計バイト数:ファイルのサイズ。

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

• 使用状況の視覚化:使用されているコードと未使用のコードの割合を表す視覚的なバー。

Safari の場合:[ソース] パネルで、左側のナビゲーション サイドバーを開き、任意の JS ファイルをクリックします。ツールバーの右上にあるカバレッジ アイコン c をクリックします。 ページを更新してください。実行されなかったコードのセクションがグレー表示されていることがわかります。

アクセシビリティ ツリーは要素 DOM ツリーに似ており、Web コンテンツを読み取るためにスクリーン リーダーなどの支援テクノロジによって使用されます。開発者はこの機能を使用して、Web サイトのアクセシビリティの問題をデバッグできます。 Chromium ブラウザは Chrome のアクセシビリティ API を使用してこれを可能にしますが、Firefox には独自のアクセシビリティ ツールがあります。

Chrome と Edge の場合:

• 設定ページで、[実験] タブを選択します。

• [要素] パネルの [完全なアクセシビリティ ツリー ビューを有効にする] オプションのボックスをオンにします。

• DevTools を更新し、Elements ツールに移動します。

• エレメント ビューの右上隅にある [DOM ツリー ビューに切り替える] をクリックします。

たとえば、以下の画像では、Web サイト上のリンクとボタンが正しく認識され、スクリーン リーダーを使用するユーザーがアクセスできるかどうかをチェックしています。

アクセシビリティ ツリーを有効にすると、アクセシビリティに関連する要素に焦点を当てた、DOM ツリーの簡略化されたバージョンが表示されます。アクセシビリティ ツリー上の要素を選択してそのプロパティを表示すると、要素の役割、名前、その他の重要な属性 (存在する場合は aria-label など) がツリーに表示されます。

また、要素がフォーカス可能かどうか、および計算されたアクセシビリティ プロパティが何であるかがわかります。

これは、要素がアクセシビリティ ツリーに正しく表示されない場合、または重要な属性が欠落している場合、アクセシビリティを向上させるために HTML または ARIA 属性を調整する必要がある場合があるため、非常に役立ちます。

Firefox の場合:

• Firefox DevTools で、「アクセシビリティ」タブをクリックし、ドキュメント ノードを展開します。

• さまざまなノードをクリックして、そのプロパティを表示できます。

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

概要

一言で言えば、最新のクロスブラウザー DevTools 機能を常に最新の状態に保つことで、Web 開発者としての時間を節約できます。この投稿では、要素検査のヒント、デバッグ プロセスを容易にするいくつかのコンソール ショートカット、およびネットワーク モニタリングに関するいくつかの役立つヒントについて触れます。

開発者のエクスペリエンスを向上させるために、今後も DevTools の機能をさらに探索して使用していただければ幸いです。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう