Chrome 開發人員工具的「Issues」面板可以減少控制台的通知疲勞和簡潔。使用此功能可找出瀏覽器偵測到的問題的解決方案,例如 Cookie 問題和複合型內容。
目前,「Issues」面板支援:
- Cookie 問題
- 混合內容
- COEP 問題
- CORS 錯誤
- 靜音模式問題
- (預覽) 低對比問題
- 受信任的網路活動問題
- 樣式表載入問題
- 無效的
@property
CSS 規則 - 違反內容安全政策
- 自動完成屬性問題
日後推出的 Chrome 版本將支援更多問題類型。
開啟「問題」面板
- 造訪有問題的網頁,例如 samesite-sandbox.glitch.me。
- 開啟開發人員工具。
在頂端的動作列右上角,按一下 「設定」旁的「開啟問題」按鈕。視問題的嚴重程度而定,按鈕可能會顯示紅色的 、黃色 或藍色的 圖示。
或者,在「More tools」選單中選取「Issues」。
查看「Issues」面板後,建議您重新載入頁面,以便掌握更多問題,因為這個問題是發生在網頁載入時發生的。
控制台也可能會顯示瀏覽器回報的問題。但您會發現這類問題 (例如下方螢幕截圖中的 Cookie 警告) 並不容易理解。但您不清楚該如何修正。
另一方面,「問題」面板則會提供可做為行動依據的洞察資料。
在問題面板中查看項目
「Issues」面板會以結構化、匯總且可操作的方式顯示瀏覽器警告。
只要按一下「問題」面板中的項目,即可展開問題並取得相關指引,瞭解如何找出受影響的資源。
每個項目都有四個元件:
- 說明問題的標題。
- 提供情境和解決方案的說明。
- 「AFFECTED RESOURCES」區段,可連結至適當的開發人員工具結構定義中的資源,例如「Network」、「Sources」、「Elements」和其他面板。
- 詳細指引的連結。
按一下「AFFECTED 資源」中的項目,即可查看情境中的問題。
依種類將問題分組
「Issues」面板會計算每個問題受影響的資源數量,並在其標題旁顯示這項資訊。此外,您也可以依照問題的嚴重程度將問題分成三類:
- Chrome 回報的「網頁錯誤」。
- 破壞性變更,例如淘汰。
- 開發人員工具建議的改善項目。
如要將問題分組,請在「Issues」面板頂端的動作列中,勾選 「Group by kind」(依種類分組)。
包含第三方問題
根據預設,「問題」面板會顯示第三方 Cookie 問題。
您可以在「AFFECTED 資源」部分找到缺少連結的第三方 Cookie 問題。
如要隱藏這類問題,請在「問題」面板頂端的動作列中清除 「包含第三方 Cookie 問題」。
隱藏問題
如要隱藏問題,請在問題旁的 三點圖示選單中選取「隱藏這類問題」。
如要查看隱藏的問題清單,請向下捲動至「隱藏的問題」部分並展開該部分。
如要顯示所有問題,請按一下「全部取消隱藏」。如要顯示特定問題,請在問題旁的 三點選單中,選取「取消隱藏類似問題」。
此外,您也可以啟用分組功能,使用群組旁邊的三點選單隱藏整個問題群組。
查看結構定義中的問題
如何調查某個問題:
在「AFFECTED 資源」專區中,按一下資源連結,即可在開發人員工具中查看項目。在此範例中,按一下
samesite-sandbox.glitch.me
即可顯示附加至該要求的 Cookie。這個連結會將您導向「網路」面板。捲動畫面,查看有問題的項目:在這個情況下,也就是 Cookie
ck02
。將滑鼠遊標懸停在右側的 資訊圖示上,即可查看問題和修正方式。