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

[問題] パネルを使用して、Cookie の問題や、 説明します。

概要

一般的な問題が [Issues] パネルで収集およびグループ化されることで、コンソール内の通知疲れや煩雑さが軽減されます。

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

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

[問題] パネルを開く

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

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

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

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

  4. [Issues] パネルが表示されたら、ページを再読み込みして、さらに多くの問題(ページの読み込み中に発生している問題)を見つけることをおすすめします。

    ページの再読み込み後に見つかった問題が 1 つ以上表示された [問題] パネル。

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

不明瞭な Cookie に関する警告が表示されたコンソール。

一方、[問題] パネルには、行動につながるインサイトが表示されます。

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

[Issues] パネルには、ブラウザからの警告が、体系的かつ集約された形で、対処可能な形で表示されます。 できます。

  1. [問題] パネルの項目をクリックして問題を展開し、修正方法と影響を受けるリソースを見つけるためのガイダンスを確認します。

    クロスサイト Cookie の問題が表示されている [問題] パネルを開きました。

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

    • 問題を説明する見出し。
    • コンテキストとソリューションの説明
    • [影響を受けるリソース] セクション。適切な DevTools 内のリソースにリンクしています。 [ネットワーク]、[ソース]、[要素] などのパネルがあります。
    • 詳細なガイダンスへのリンク。
  2. [影響を受けるリソース] の項目をクリックすると、問題の詳細を確認できます。

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

[問題] パネルには、各問題について影響を受けるリソースの数がカウントされ、見出しの横に表示されます。さらに、以下の 3 種類のグループ別に問題を重大度別に整理できます。

  • エラー。 Chrome で報告されるページエラー
  • 事前警告です。 互換性を破る変更(サポート終了など)。
  • 情報。 DevTools で提案される改善

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

問題は、ページエラー、互換性を破る変更、改善の 3 つの種類に分類されています。

サードパーティに関する問題を含める

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

サードパーティ Cookie の問題については、影響を受けるリソースのセクション(リンクが記載されていません)をご覧ください。

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

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

問題を非表示

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

問題の横にあるその他メニューの [このような問題を非表示] オプション。

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

[隠れた問題] セクション

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

また、グループ化を有効にすると、グループの横にあるその他メニューを使用して問題のグループ全体を非表示にできます。

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

状況に応じて問題を表示

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

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

    影響を受けるリクエストへのリンクを含む [影響を受けるリソース] セクション。

  2. スクロールして、問題のある項目(この場合は Cookie ck02)を表示します。[ 右側の 情報。 情報アイコンをクリックして、問題とその解決方法を確認してください。

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