問題ツールを使用して問題を検索して修正する

[アーティクル]
06/20/2024

Issue ツールは、現在の Web ページを自動的に分析し、種類別にグループ化された問題を報告し、問題の説明と解決に役立つドキュメントを提供します。

Issue ツールは、次のカテゴリのフィードバックを提供します。

アクセシビリティ。
ブラウザー間の互換性。
パフォーマンス。
プログレッシブ Web Apps。
セキュリティ。
他。

Issue ツールのフィードバックは、Chromium プラットフォーム、Deque axe、MDN ブラウザー互換性データ、Webhint など、いくつかのソースによって提供されます。問題ツールを設定するフィードバックのソースについては、次を参照してください。

ビデオ: Edge DevTools と VSCode での高度な問題のフィルター処理

問題ツールを開く

修正する問題が含まれている Web ページに移動します。たとえば、新しいタブまたはウィンドウでアクセシビリティテストのデモページを開きます。
Web ページを右クリックし、[ 検査] を選択します。 DevTools が開きます。
DevTools の下部にある クイックビュー ツールバーで、[ 問題 ] タブを選択します。このタブは既定で表示されます。

クイックビュー パネルが表示されない場合は、DevTools (...) をカスタマイズして制御するを選択し、[クイックビューパネルの切り替え (Esc)] を選択します。 クイックビュー ツールバーに [問題] タブがない場合は、クイックビュー ツールバーの [その他のツール ] (+) ボタンをクリックし、[問題] を選択します。

Issue ツールは、アクセシビリティ、パフォーマンス、セキュリティなどのカテゴリに問題をグループ化します。

問題ツールを開くその他の方法

アクティビティバーまたはクイックビュー ツールバーで、[その他のツール (+)] ボタンをクリックし、[問題] を選択します。
要素ツールの DOM ツリーで、波状の下線が付いた要素名を探し、Shift キーを押しながら要素をクリックします。または、波線の下線が付いた要素を右クリックし、[ 問題の表示] を選択します。以下の「 DOM ツリーから問題を開く」を参照してください。

問題の配置ツール: クイックビューまたはアクティビティバー

既定では、[コマンドメニュー] などの [問題 ] ツールが クイックビュー パネルで開きます。代わりに、 アクティビティバーで開くか、 アクティビティバーに移動できます。

クイックビュー ツールバーで、[検査] タブを右クリックし、[上部のアクティビティバーに移動] または [左のアクティビティバーに移動] を選択します。

問題は重大度によって自動的に順序付けされます

問題の各カテゴリ内で、最初にエラーが一覧表示され、次に警告が表示され、ヒントが表示されます。

問題ツールには、重大度で並べ替えられたパフォーマンスの問題が表示されます

[重大度] ドロップダウンリストは、警告、エラー、ヒント、および情報項目を一覧表示するかどうかを制御します。以下の「重大度別に問題をフィルター処理する」を参照してください。

イシューツールでエントリを展開する

Issue ツールには、各問題に適用する追加のドキュメントと推奨される修正プログラムが表示されます。問題を展開してこの追加情報を取得するには:

上記のように、Web ページと Issue ツールを開きます。
問題を選択します。問題が展開され、詳細が表示されます。

表示される各問題には、次のコンポーネントがあります。

問題を説明する見出し。
より多くのコンテキストと提案されたソリューションを提供する説明。
[要素]、[ソース]、[ネットワーク] ツールなど、DevTools のリソースにリンクする [影響を受けるリソース] セクション。
詳細なドキュメントへのリンク。

DOM ツリーから問題を開く

要素に関連する問題がある場合は、要素ツールの DOM ツリーに要素名の下に波線の下線が表示されます。要素を右クリックし、[問題の表示] を選択します。または、 Shift キーを押しながら、波状の下線が付いた要素をクリックします。

DOM ツリーで波状の下線を持つ要素の問題を表示するには:

Web ページを開きます。たとえば、アクセシビリティテストのデモ Web ページを新しいウィンドウまたはタブで開きます。
Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。または、 F12 キーを押します。 Web ページの横に DevTools が開きます。
DevTools で、[ 要素 ] () タブを選択します。
DOM ツリーで、[ <body>><section>><main>><article id="cats">><img>] を展開します。 <img>要素の start-tag には波線の下線があります。
<img>要素の start-tag にカーソルを合わせます。ヒントには、問題に関する情報が表示されます。
<img>要素を右クリックし、[問題の表示] を選択します。または、 Shift キーを押しながら要素をクリックします。 Issue ツールが開き、その要素に関連付けられている問題が表示されます。

フィルターの問題

Issue ツールに表示される問題の数を減らすために、重大度、ブラウザー、配信元で一覧をフィルター処理できます。

重大度で問題をフィルター処理する

既定では、エラーと警告のみが表示されます。その他の重大度レベルの問題を表示するには:

[ 重大度 ] ドロップダウンリストから、任意の数の重大度レベル ( ヒント、情報、警告、または エラー) を選択します。

[重大度] ドロップダウンリストが展開された [問題] パネルには、選択できるさまざまなレベルが表示されます

警告とエラーのみを表示するように戻すには、[既定の レベル] を選択します。

ブラウザーで問題をフィルター処理する

互換性カテゴリに属する問題は、ブラウザーでフィルター処理することもできます。既定では、次のブラウザーがテストされます。

Microsoft Edge
クロム
Firefox
Safari
Safari iOS
Android 用 Chrome
Android 用 Firefox

互換性の問題についてテストされるブラウザーの一覧を変更するには:

[ 上位のブラウザー] をクリックします。
[上位のブラウザー]、[デスクトップ ブラウザー]、[モバイル ブラウザー] のいずれかのブラウザーカテゴリセットを選択します。
または、一覧から任意の数の個々のブラウザーを選択します。
[ 問題の再生成 ] をクリックして、選択したブラウザーに基づいて互換性の問題を更新します。

[ブラウザー] ドロップダウンリストが展開された [問題] パネルには、選択できるさまざまなブラウザーが表示されます

問題を配信元でフィルター処理する

既定では、 Issue ツールには、現在の Web ページのコードに関連する問題のみが一覧表示されます。 Web ページによって読み込まれたサードパーティのライブラリまたはフレームワークによって発生する問題を含める場合は、[ サードパーティの問題を含める ] チェックボックスをオンにします。

[サードパーティの問題を含める] チェックボックスが表示された [問題] パネル

次の方法で共有

問題ツールを使用して問題を検索して修正する

ビデオ: Edge DevTools と VSCode での高度な問題のフィルター処理