控制台已記錄瀏覽器錯誤

多數瀏覽器皆隨附內建的開發人員工具。這些開發人員工具通常包含控制台。控制台會顯示目前執行中網頁的相關資訊。

透過建構該頁面的網頁開發人員或瀏覽器本身,已在控制台中記錄訊息。所有控制台訊息的嚴重性等級:VerboseInfoWarningError。如果看到「Error」訊息,表示網頁有問題需要解決。

Lighthouse 瀏覽器錯誤稽核失敗的原因

Lighthouse 會標記記錄到控制台的所有瀏覽器錯誤:

Lighthouse 稽核功能顯示控制台中的瀏覽器錯誤

如何修正瀏覽器錯誤

修正 Lighthouse 回報的每個瀏覽器錯誤,確保網頁對所有使用者正常運作。

Chrome 開發人員工具提供數種工具 可協助您追蹤錯誤原因

  • 在每個錯誤的文字下方,開發人員工具控制台會顯示導致執行有問題程式碼的呼叫堆疊
  • 每個錯誤右上方的連結會顯示導致錯誤的程式碼。

舉例來說,以下螢幕截圖顯示某個網頁有兩項錯誤:

Chrome 開發人員工具控制台中的錯誤示例

在這個範例中,第一個錯誤是來自呼叫 console.error() 的網頁程式開發人員。第二個錯誤來自瀏覽器,並表示其中一個網頁指令碼中使用的變數不存在。

在每個錯誤的文字下方,開發人員工具控制台會顯示發生錯誤的呼叫堆疊。舉例來說,如果是第一個錯誤,主控台會指出名為 init 函式的 (anonymous) 函式,該函式稱為 doStuff 函式。按一下該錯誤右上方的 pen.js:9 連結,即可顯示相關程式碼。

按照上述方式查看各項錯誤的相關程式碼,將有助於找出並解決可能的問題。

如果找不到錯誤的原因,請嘗試在搜尋引擎中輸入錯誤文字。如果您找不到問題的解決方法,請嘗試在 Stack Overflow 上提問。

如果無法修正錯誤,請考慮將其納入 try…catch 陳述式中,在程式碼中明確指出您發現的問題。您也可以使用 catch 區塊,以更妥善的方式處理錯誤。

資源