問題:找出並修正問題

索菲亞艾梅利安諾瓦
Sofia Emelianova

Chrome 開發人員工具的「Issues」面板可減少控制台的通知疲勞,並使畫面更雜亂。可用來尋找瀏覽器偵測到的問題解決方案,例如 Cookie 問題和複合型內容。

目前,「Issues」面板支援以下功能:

日後推出的 Chrome 版本將支援更多問題類型。

開啟「問題」分頁

  1. 前往修正問題的網頁,例如 samesite-sandbox.glitch.me
  2. 開啟開發人員工具
  3. 按一下頂端動作列右上角的動作列旁的待解決問題按鈕[設定]。 設定。視問題嚴重程度而定,按鈕可能會顯示紅色的 發生錯誤。、黃色警告。或藍色 資訊。 圖示。

    標有紅色圖示的「待解決的問題」按鈕。

    或者,也可以從 更多工具選單。「更多工具」選單中選取「問題」

    「更多工具」選單中的「問題」分頁。

  4. 找到「問題」面板後,您可能需要重新載入頁面,以掌握更多問題,這正是網頁載入時發生的問題。

    重新載入網頁後發現「問題」分頁還有一個問題。

此外,控制台可能也會顯示瀏覽器回報的問題。不過,您會發現這類問題 (如下方螢幕截圖中的 Cookie 警告) 難以理解。您要做些修正並不容易。

控制台顯示模糊處理的 Cookie 警告。

另一方面,「問題」面板可提供可做為行動依據的洞察資料。

查看「問題」分頁中的項目

「Issues」面板會以結構化、匯總和可操作的方式顯示瀏覽器的警告。

  1. 按一下「問題」面板中的項目即可展開問題,並取得修正問題指南,以及找出受影響的資源。

    展開跨網站 Cookie 問題的「問題」分頁。

    每個項目都包含四個元件:

    • 說明問題的標題。
    • 介紹背景資訊和解決方案的說明。
    • 「AFFECTED 資源」部分,連結至適當的開發人員工具結構定義中的資源,例如「Network」、「Sources」、「Elements」和其他面板。
    • 詳細指引的連結。
  2. 按一下「現有資源」中的項目,即可在背景資訊中查看問題

依類型將問題分組

「問題」面板會計算每個問題受影響的資源數量,並顯示在標題旁邊。此外,您可以按照問題的嚴重性將問題分成三種群組:

  • 發生錯誤。 Chrome 回報的網頁錯誤
  • 警告。 破壞性變更,例如淘汰。
  • 資訊。開發人員工具的建議改善項目

如要將問題分組,請在「問題」面板頂端的動作列中,勾選「依種類分組」圖示 核取方塊。

問題分成三種類型:頁面錯誤、破壞性變更和改善項目。

附上第三方問題

根據預設,「問題」分頁會顯示第三方 Cookie 問題。

您可以在改善資源部分找出第三方 Cookie 的問題,但缺少連結。

「受影響的資源」專區中沒有已連結資源的第三方 Cookie。

如要隱藏這類問題,請在「問題」面板頂端的動作列中清除 。「包括第三方 Cookie 問題」

隱藏問題

如要隱藏問題,請在問題旁邊的 三點圖示選單。 三點圖示選單中,選取「隱藏類似問題」

在問題旁邊的三點圖示選單中,點選「隱藏類似問題」選項。

如要查看隱藏問題清單,請向下捲動至「隱藏的問題」部分並展開。

「隱藏的問題」部分。

如要顯示所有問題,請按一下「取消隱藏全部」。如要顯示特定問題,請在問題旁邊的 三點圖示選單。 三點圖示選單中選取「取消隱藏類似問題」

此外,如果您已啟用群組,也可以使用群組旁邊的三點圖示選單,隱藏整個群組。

三點圖示選單,內含隱藏「改善項目」群組的選項。

查看背景資訊

如何調查某個問題:

  1. 在「受影響的資源」部分中,按一下資源連結,即可查看開發人員工具中的適當內容項目。在此範例中,按一下 samesite-sandbox.glitch.me 即可顯示附加至該要求的 Cookie。這個連結會將您導向「Network」面板。

    「受影響的資源」專區,會提供受影響要求的連結。

  2. 捲動畫面以查看有問題的項目:在本例中,Cookie 為 ck02。將滑鼠遊標懸停在右側的 資訊。 資訊圖示上,即可查看問題及修正方式。

    將遊標懸停在「資訊」圖示上時,「網路」面板會顯示工具提示。