問題：找出並修正問題

Sam Dutton
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具的「Issues」面板可以減少控制台的通知疲勞和簡潔。使用此功能可找出瀏覽器偵測到的問題的解決方案，例如 Cookie 問題和複合型內容。

目前，「Issues」面板支援：

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

開啟「問題」面板

  1. 造訪有問題的網頁，例如 samesite-sandbox.glitch.me。
  2. 開啟開發人員工具。

  3. 在頂端的動作列右上角，按一下 [設定]。「設定」旁的「開啟問題」按鈕。視問題的嚴重程度而定，按鈕可能會顯示紅色的 發生錯誤。、黃色 警告。 或藍色的 資訊。 圖示。

    「未解決的問題」按鈕和紅色圖示。

    或者，在「More tools」選單中選取「Issues」。「更多工具」選單。

    「更多工具」選單中的「問題」面板。

  4. 查看「Issues」面板後，建議您重新載入頁面，以便掌握更多問題，因為這個問題是發生在網頁載入時發生的。

    「問題」面板會在重新載入頁面後發現一或多個問題。

控制台也可能會顯示瀏覽器回報的問題。但您會發現這類問題 (例如下方螢幕截圖中的 Cookie 警告) 並不容易理解。但您不清楚該如何修正。

控制台顯示隱藏的 Cookie 警告。

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

在問題面板中查看項目

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

  1. 只要按一下「問題」面板中的項目，即可展開問題並取得相關指引，瞭解如何找出受影響的資源。

    「問題」面板顯示跨網站 Cookie 的問題已展開。

    每個項目都有四個元件：

    • 說明問題的標題。
    • 提供情境和解決方案的說明。
    • 「AFFECTED RESOURCES」區段，可連結至適當的開發人員工具結構定義中的資源，例如「Network」、「Sources」、「Elements」和其他面板。
    • 詳細指引的連結。

  2. 按一下「AFFECTED 資源」中的項目，即可查看情境中的問題。

依種類將問題分組

「Issues」面板會計算每個問題受影響的資源數量，並在其標題旁顯示這項資訊。此外，您也可以依照問題的嚴重程度將問題分成三類：

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

如要將問題分組，請在「Issues」面板頂端的動作列中，勾選 核取方塊。「Group by kind」(依種類分組)。

問題分為三種：網頁錯誤、破壞性變更和改善項目。

包含第三方問題

根據預設，「問題」面板會顯示第三方 Cookie 問題。

您可以在「AFFECTED 資源」部分找到缺少連結的第三方 Cookie 問題。

在「受影響的資源」部分中，沒有連結資源的第三方 Cookie。

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

隱藏問題

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

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

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

「隱藏的問題」專區。

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

此外，您也可以啟用分組功能，使用群組旁邊的三點選單隱藏整個問題群組。

三點圖示選單，其中有隱藏改善項目群組的選項。

查看結構定義中的問題

如何調查某個問題：

  1. 在「AFFECTED 資源」專區中，按一下資源連結，即可在開發人員工具中查看項目。在此範例中，按一下 samesite-sandbox.glitch.me 即可顯示附加至該要求的 Cookie。這個連結會將您導向「網路」面板。

    「受影響的資源」部分，其中包含受影響要求的連結。

  2. 捲動畫面，查看有問題的項目：在這個情況下，也就是 Cookie ck02。將滑鼠遊標懸停在右側的 資訊。 資訊圖示上，即可查看問題和修正方式。

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