Chrome DevTools の [Issues] パネルによって、コンソールが見やすく、すっきりとした状態になっています。 Cookie の問題や���合コンテンツなど、ブラウザで検出された問題の解決策を見つけることができます。
現在、[問題] パネルでは以下がサポートされています。
- Cookie の問題
- 混合コンテンツ
- COEP に関する問題
- CORS エラー
- 互換モードに関する問題
- (プレビュー)低コントラストの問題
- Trusted Web Activity に関する問題
- スタイルシートの読み込みに関する問題
- 無効な
@property
CSS ルール - コンテンツ セキュリティ ポリシー違反
- オートコンプリート属性に関する問題
Chrome の今後のバージョンでは、より多くの種類の問題に対応する予定です。
[Issues] パネルを開く
- 修正が必要な問題があるページ(samesite-sandbox.glitch.me など)にアクセスします。
- DevTools を開きます。
上部のアクションバーの右上にある [Settings] の横にある [Open Issues] ボタンをクリックします。ボタンには、問題の重大度に応じて、赤色の 、黄色の 、または青色の アイコンが表示されます。
または、 [その他のツール] メニューから [問題] を選択します。
[Issues] パネルを表示したら、ページを再読み込みして、さらに多くの問題を検出することをおすすめします。この状況はページの読み込み中に発生します。
コンソールには、ブラウザから報告された問題が表示される場合もあります。しかし、このような問題(下のスクリーンショットの Cookie に関する警告など)は理解しにくいことがわかります。修正の必要な処理が明確ではありません。
一方、[Issues] パネルには、行動につながるインサイトが表示されます。
[問題] パネルで項目を表示する
[Issues] パネルには、ブラウザからの警告が構造化され、集約され、対処可能な方法で表示されます。
[Issues] パネルで項目をクリックして問題を展開し、修正方法に関するガイダンスと影響を受けるリソースを見つけます。
各項目は、次の 4 つのコンポーネントで構成されます。
- 問題を説明する見出し。
- コンテキストと解決策を説明する説明。
- [影響を受けるリソース] セクション: [ネットワーク]、[ソース]、[要素]、その他のパネルなど、該当する DevTools のコンテキスト内のリソースにリンクしています。
- 詳細なガイダンスへのリンク。
[影響を受けるリソース] の項目をクリックして、該当する問題を表示します。
問題を種類別にグループ化する
[Issues] パネルでは、各問題の影響を受けるリソースの数がカウントされ、見出しの横に表示されます。また、問題を重大度別に次の 3 種類のグループに分類できます。
- Chrome が報告するページエラー。
- 非推奨などの互換性を破る変更。
- DevTools で提案される改善点。
問題をグループ化するには、[Issues] パネルの上部にあるアクションバーで [Group by kind] をオンにします。
サードパーティの問題を含める
[問題] パネルには、デフォルトでサードパーティ Cookie の問題が表示されます。
[影響を受けるリソース] セクションでリンクのないサードパーティ Cookie の問題を確認できます。
このような問題を非表示にするには、[問題] パネルの上部にあるアクションバーで [ サードパーティの Cookie の問題を含める] をオフにします。
問題を非表示
問題を非表示にするには、問題の横にあるその他メニュー から [このような問題を非表示] を選択します。
非表示の問題のリストを表示するには、[非表示の問題] セクションまでスクロールして開きます。
すべての問題を表示するには、[すべて再表示] をクリックします。特定の問題を表示するには、問題の横にあるその他メニュー から [このような問題を再表示] を選択します。
また、グループ化が有効になっている場合は、グループの横にある同じその他メニューを使用して、問題のグループ全体を非表示にできます。
状況に応じて問題を表示
問題を調査するには、次の手順に従います。
[影響を受けるリソース] セクションでリソースのリンクをクリックすると、DevTools 内の適切なコンテキストでアイテムが表示されます。この例では、
samesite-sandbox.glitch.me
をクリックすると、そのリクエストに付加された Cookie が表示されます。リンクをクリックすると、[ネットワーク] パネルが表示されます。スクロールして、問題のあるアイテム(この場合は Cookie
ck02
)を表示します。右側の 情報アイコンにカーソルを合わせると、問題とその修正方法が表示されます。