問題: 問題を見つけて修正する

[問題] パネルを使用して、ブラウザで検出された問題(Cookie の問題や混在コンテンツなど)の解決策を確認します。

概要

[問題] パネルでは、一般的な問題を収集してグループ化することで、コンソールでの通知の煩雑さを軽減します。

現在のところ、[Issues] パネルには次の情報が表示されます。

Chrome の今後のバージョンでは、より多くの問題タイプがサポートされる予定です。

[問題] パネルを開く

  1. 修正が必要な問題のあるページ(samesite-sandbox.glitch.me など)にアクセスします。
  2. DevTools を開きます
  3. 上部にあるアクションバーの右上にある 設定] をタップします。 [設定] の横にある [問題を開く] ボタンをクリックします。問題の重大度に応じて、ボタンに赤色の エラー。、黄色の 警告。、青色の 情報。 のいずれかのアイコンが表示されます。

    赤いアイコンの付いた [Open Issues] ボタン。

    または、[その他のツール] メニュー。 [その他のツール] メニューから [問題] を選択します。

    [その他のツール] メニューの [問題] パネル。

  4. [問題] パネルに移動したら、ページを再読み込みして、ページの読み込み中に発生した問題をさらに検出できます。

    ページを再読み込みした後に見つかった問題が 1 つ表示されている [問題] パネル。

コンソールには、ブラウザから報告された問題も表示される場合があります。ただし、このような問題(以下のスクリーンショットの Cookie に関する警告など)は理解しづらいものです。問題を解決するために必要な手順が明確ではありません。

わかりにくいクッキーに関する警告が表示されたコンソール。

一方、[問題] パネルには、実用的な分析情報が表示されます。

[Issues] パネルでアイテムを表示する

[Issues] パネルには、ブラウザからの警告が構造化され、集約され、対処可能な方法で表示されます。

  1. [問題] パネルで項目をクリックすると、問題が展開され、問題の解決方法と影響を受けるリソースの確認方法に関するガイダンスが表示されます。

    クロスサイト Cookie の問題が開かれている [問題] パネル。

    各アイテムには次の 4 つのコンポーネントがあります。

    • 問題を説明するヘッドライン。
    • コンテキストと解決策を示す説明。
    • [影響を受けるリソース] セクション: 適切な DevTools コンテキスト内のリソース([ネットワーク]、[ソース]、[要素] パネルなど)にリンクします。
    • 詳細なガイダンスへのリンク。
  2. [影響を受けるリソース] の項目をクリックして、問題をコンテキスト内で表示します。

問題を種類別にグループ化する

[問題] パネルには、問題ごとに影響を受けるリソースの数が表示され、見出しの横に表示されます。また、問題の重大度に応じて、次の 3 種類のグループに整理できます。

  • エラー。 Chrome が報告するページエラー
  • 警告。 非推奨化などの互換性を損なう変更
  • 情報。 DevTools が提案する改善

問題をグループ化するには、[問題] パネルの上部にあるアクションバーで [チェックボックス。 種類別にグループ化] をオンにします。

問題は、ページエラー、破壊的変更、改善の 3 種類に分類されます。

サードパーティの問題を含める

[問題] パネルには、デフォルトでサードパーティ Cookie の問題が表示されます。

サードパーティ Cookie に関する問題は、リンクがない [影響を受けるリソース] セクションで確認できます。

[影響を受けるリソース] セクションにリンクされたリソースがないサードパーティ Cookie。

このような問題を非表示にするには、[問題] パネルの上部にあるアクションバーで 消去] をタップします。 [サードパーティの Cookie の問題を含める] をオフにします。

問題を非表示にする

問題を非表示にするには、問題の横にある その他メニュー。 その他メニューから [類似の問題を非表示] を選択します。

問題の横にある 3 つの点のメニューにある [この問題と類似の問題を非表示にする] オプション。

非表示の問題のリストを表示するには、[非表示の問題] セクションまで下にスクロールして展開します。

[非表示にした問題] セクション。

すべての問題を表示するには、[すべて表示] をクリックします。特定の問題を表示するには、問題の横にある その他メニュー。 その他メニューから [このような問題を非表示にしないでください] を選択します。

また、グループ化が有効になっている場合は、グループの横にある同じその他アイコンを使用して、問題のグループ全体を非表示にできます。

改善点グループを非表示にするオプションを含むその他メニュー。

問題をコンテキスト内で表示する

問題を調査するには、次の手順に従います。

  1. [影響を受けるリソース] セクションでリソースリンクをクリックすると、DevTools 内の適切なコンテキストでアイテムが表示されます。この例では、samesite-sandbox.glitch.me をクリックして、そのリクエストに関連付けられている Cookie を表示します。このリンクをクリックすると、[ネットワーク] パネルが表示されます。

    影響を受けるリソース セクションに、影響を受けるリクエストへのリンクが表示されます。

  2. スクロールして、問題のあるアイテム(この場合は Cookie ck02)を表示します。右側の 情報。 情報アイコンにカーソルを合わせると、問題とその解決方法が表示されます。

    [ネットワーク] パネルで、情報アイコンにカーソルを合わせるとツールチップが表示されます。