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

ソフィア・エメリアノバ
Sofia Emelianova

Chrome DevTools の [Issues] パネルにより、コンソールの通知が煩雑になり、煩雑になります。 Cookie の問題や混合コンテンツなど、ブラウザで検出された問題の解決策を見つけることができます。

現在、[Issues] パネルでは以下がサポートされています。

Chrome の今後のバージョンでは、より多くの種類の問題に対応する予定です。

[問題] タブを開く

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

    赤色のアイコンが付いた [未解決の問題] ボタン。

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

    [その他のツール] メニューの [問題] タブ。

  4. [Issues] パネルが表示されたら、ページを再読み込みして、さらに多くの問題を検出することをおすすめします。今度はページの読み込み中に発生します。

    ページの再読み込み後に 1 つ以上の問題が表示された [問題] タブ。

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

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

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

[問題] タブで項目を確認する

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

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

    クロスサイト Cookie の問題が展開された [問題] タブ。

    各項目は次の 4 つのコンポーネントで構成されます。

    • 問題を説明する広告見出し。
    • コンテキストと解決策に関する説明文。
    • [AFFECTED RESOURCES] セクションは、[Network]、[Sources]、[Elements]、その他のパネルなど、適切な DevTools コンテキスト内のリソースにリンクしています。
    • 詳細なガイダンスへのリンク。
  2. [影響を受けるリソース] の項目をクリックすると、コンテキスト内の問題を表示できます。

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

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

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

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

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

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

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

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

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

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

問題を非表示

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

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

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

[非表示の問題] セクション。

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

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

[改善] グループを非表示にするオプションが表示されたその他メニュー。

状況に応じて問題を表示

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

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

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

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

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