[問題] パネルを使用して、Cookie の問題や、 説明します。
概要
一般的な問題が [Issues] パネルで収集およびグループ化されることで、コンソール内の通知疲れや煩雑さが軽減されます。
現在、[Issues] パネルに次の情報が表示されます。
- Cookie に関する問題
- 混合コンテンツ
- COEP に関する問題
- CORS エラー
- 後方互換モードに関する問題
- （プレビュー）低コントラストの問題
- 信頼できるウェブ アクティビティに関する問題
- スタイルシートの読み込みに関する問題
- 無効な
@propertyCSS ルール - コンテンツ セキュリティ ポリシー違反
- 予測入力属性の問題
Chrome の今後のバージョンでは、より多くの問題の種類がサポートされる予定です。
[問題] パネルを開く
- 修正が必要な問題があるページ（samesite-sandbox.glitch.me など）にアクセスします。
- DevTools を開きます。
上部のアクションバーの右上にある [
![設定] をタップします。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/settings-d0ca5b87cd8c8.svg?authuser=4&hl=ja)
Settings] の横にある [Open Issues] ボタンをクリックします。問題の重大度に応じて、ボタンに赤色の 
、黄色の 
、青色の 
のいずれかのアイコンが表示されます。![赤いアイコンの [Open Issues] ボタン。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-open-issues-button-a-4592eaddcb486.png?authuser=4&hl=ja)
または、
[その他のツール] メニューから [問題] を選択します。![[その他のツール] メニューの [問題] パネル。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-issues-tab-more-tool-58b074e9cc1c7.png?authuser=4&hl=ja)
[Issues] パネルが表示されたら、ページを再読み込みして、さらに多くの問題（ページの読み込み中に発生している問題）を見つけることをおすすめします。
![ページの再読み込み後に見つかった問題が 1 つ以上表示された [問題] パネル。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-issues-tab-one-more-19c93f270dca9.png?authuser=4&hl=ja)
コンソールに、ブラウザから報告された問題が表示されることもあります。しかし、このような問題（以下のスクリーンショットの Cookie 警告など）はわかりにくいことがわかります。修正に必要な手順が明確ではありません。
一方、[問題] パネルには、行動につながるインサイトが表示されます。
[問題] パネルでアイテムを表示する
[Issues] パネルには、ブラウザからの警告が、体系的かつ集約された形で、対処可能な形で表示されます。 できます。
[問題] パネルの項目をクリックして問題を展開し、修正方法と影響を受けるリソースを見つけるためのガイダンスを確認します。
![クロスサイト Cookie の問題が表示されている [問題] パネルを開きました。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-issues-tab-a-cross-s-4f4a58de61e42.png?authuser=4&hl=ja)
各アイテムには次の 4 つのコンポーネントがあります。
- 問題を説明する見出し。
- コンテキストとソリューションの説明
- [影響を受けるリソース] セクション。適切な DevTools 内のリソースにリンクしています。 [ネットワーク]、[ソース]、[要素] などのパネルがあります。
- 詳細なガイダンスへのリンク。
[影響を受けるリソース] の項目をクリックすると、問題の詳細を確認できます。
種類別に問題をグループ化する
[問題] パネルには、各問題について影響を受けるリソースの数がカウントされ、見出しの横に表示されます。さらに、以下の 3 種類のグループ別に問題を重大度別に整理できます。
Chrome で報告されるページエラー。
互換性を破る変更（サポート終了など）。
DevTools で提案される改善。
問題をグループ化するには、[Issues] パネルの上部にあるアクションバーの 
[Group by kind] をオンにします。
サードパーティに関する問題を含める
[問題] パネルには、サードパーティ Cookie の問題がデフォルトで表示されます。
サードパーティ Cookie の問題については、影響を受けるリソースのセクション（リンクが記載されていません）をご覧ください。
![[影響を受けるリソース] セクションに、リンクされたリソースのないサードパーティ Cookie が表示されています。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/third-party-cookie-withou-ca05851e925f2.png?authuser=4&hl=ja)
このような問題を非表示にするには、[問題] パネルの上部にあるアクションバーの ![消去] をタップします。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/clear-9dfef7f5bba3b.svg?authuser=4&hl=ja){kind=small}
[サードパーティ Cookie の問題を含める] をオフにします。
問題を非表示
問題を非表示にするには、問題の横にある 
のその他メニューから [このような問題を非表示] を選択します。
![問題の横にあるその他メニューの [このような問題を非表示] オプション。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-hide-issues-this-opt-46440b13d9065.png?authuser=4&hl=ja)
隠れた問題のリストを表示するには、[隠れた問題] セクションまでスクロールして展開します。
![[隠れた問題] セクション](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-hidden-issues-section-06a9ea6b63a5d.png?authuser=4&hl=ja)
すべての問題を表示するには、[すべて再表示] をクリックします。特定の問題を表示するには、問題の横にある 
その他メニューから [このような問題を再表示] を選択します。
また、グループ化を有効にすると、グループの横にあるその他メニューを使用して問題のグループ全体を非表示にできます。
状況に応じて問題を表示
問題を調査するには、次の手順に従います。
[影響を受けるリソース] セクションでリソースリンクをクリックすると、DevTools 内の適切なコンテキストでアイテムが表示されます。この たとえば、
samesite-sandbox.glitch.meをクリックすると、そのリクエストに付加された Cookie が表示されます。リンクをクリックすると、[ネットワーク] パネルが表示されます。![影響を受けるリクエストへのリンクを含む [影響を受けるリソース] セクション。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-affected-resources-se-394d43d1b0607.png?authuser=4&hl=ja)
スクロールして、問題のある項目（この場合は Cookie
ck02）を表示します。[ 右側の
情報アイコンをクリックして、問題とその解決方法を確認してください。![[Network] パネルの情報アイコンにカーソルを合わせると、ツールチップが表示されます。](https://developer.chrome.google.cn/static/docs/devtools/issues/image/the-network-panel-shows-64dc9b00bcf7a.png?authuser=4&hl=ja)