為什麼從 Message 開始講#

Console panel 是前端 Debug 的主場。在認識它的「執行 JavaScript」、「Console API」、「Utilities」這些功能之前，先要搞懂 Console message 本身：它有哪些 level、怎麼過濾、有哪些設定值得改。沒有這層基礎，後面看到的訊息會像是一團噪音。

Console Message Level#

所有印到 Console panel 的訊息都有一個 level，由低到高分四種：

  • Verbose
  • Info
  • Warning
  • Error

平常最常用的 console.log(...) 屬於 Info level，其他 Console API 會產生不同 level 的訊息。

Verbose Message#

對應 API：

  • console.debug

預設情況下 Console panel 「不會」顯示 Verbose level 的訊息，所以直接 console.debug 是看不到輸出的，得先把 level 篩選打開。

如果開啟 Verbose，可能會看到很多 [Violation] 'setTimeout' handler took ... ms 這類訊息，這是 Chrome 自動產生的，提醒某段程式碼可能影響效能、值得評估。

Info Message#

對應 API：

  • console.log
  • console.info

這兩個 method 在 Console panel 顯示上是等價的，只會輸出訊息與來源位置。

Warning Message#

對應 API：

  • console.warn

開發套件或工具時，console.warn 適合用來警示「可能出錯」、或某個 API 已經 deprecated。例如傳入的參數型別不在預期範圍內，就用 console.warn 提醒，而不是直接拋錯中斷流程。

從 Warning level 開始，訊息預設就會附上調用堆疊（Call Stack），點左邊的灰色三角可以展開完整的 function chain。

Error Message#

對應 API：

  • console.error

有些開發者習慣全部用 console.log 打天下，雖然技術上能看到輸出，但語意上有差。console.error 應該保留給真正不預期的錯誤、或會影響網頁運作的問題（例如載入套件失敗、API 呼叫失敗）。把這類錯誤誤用 console.log 印出，事後監控與錯誤回報系統就分不出嚴重程度。

Message Filter#

Console panel 承載了所有來源的訊息：開發者自己寫的 log、套件的 log、Worker、其他 frame、瀏覽器自動產生的 violation 與網路錯誤等等。混在一起時，要找的關鍵訊息常被淹沒。

過濾掉的只有 console message。手動輸入 JavaScript 的輸入與輸出永遠會留在 Console panel 裡，不會被 filter 影響。

依 Level 過濾#

點 Console panel 上方的 Default levels 選單，可以勾選要顯示哪些 level，預設只有 Verbose 不顯示。

左上角還有一個側欄按鈕，打開後會把訊息按各種 level 整理好，並多出一個 user messages 類別，只包含經由 Console API 產生的訊息（排除瀏覽器自動產生的）。在追蹤自己寫的 log 時，這個分類非常實用。

依 Pattern 過濾#

Console panel 上方的輸入框可以填關鍵字或 regular expression 來過濾訊息。

依 URL 過濾#

同一個輸入框支援 url: 前綴，過濾特定 domain 或第三方套件的訊息：

  • url:google.com：只顯示來自 google.com 的訊息
  • -url:noise.js：排除某個一直印 log 的套件

Console Settings#

Console panel 右上角的齒輪按鈕展開後有八個設定項，這裡逐一講。

Group Similar#

預設開啟。Console panel 會把相似的連續訊息合併成一個 group 顯示，且預設不可展開。例如：

for (let i = 10; i--; ) console.log("similar");

會被收合成「similar (10)」這樣一行。看 log 比較清爽，但如果想看每一筆的詳細位置，需要關掉這個選項。

Eager Evaluation#

預設開啟。在 Console 輸入 JavaScript 時，DevTools 會自動預覽執行結果。但有些情況不會出現預覽：

  • 執行會出錯
  • 執行會有副作用（例如修改 DOM、發送請求）

副作用的偵測不是 100% 準確，但這個機制已經能避開大部分意外觸發。

Autocomplete From History#

預設開啟。Console panel 輸入文字時會出現下拉選單，包含目前 context 可用變數，以及曾經輸入過的歷史指令（前面有 > 標示）。可以用方向鍵快速選回之前打過的程式碼。

Evaluate Triggers User Activation#

為了資安考量與使用者體驗，瀏覽器有些 API 不能用 JavaScript 直接觸發，例如：

  • 自動播放有聲影片
  • 開啟 popup 視窗
  • 觸發檔案下載

只有在使用者實際互動（點擊、按鍵）時，瀏覽器才會進入 user activation 狀態，這些 API 才會生效。

舉個例子：

window.open();

如果是 JavaScript 主動呼叫（例如 button.click() 模擬點擊後觸發），會被 popup blocker 擋下；但使用者真的按下按鈕，就能正常開 popup。

Console panel 預設會把每次「執行輸入的 JavaScript」當成 user activation，所以在 Console 輸入 window.open() 永遠開得起來。這也帶來一個陷阱：在 Console 試成功的程式碼，丟到實際頁面卻不能用。要測試「真正的」user activation 行為，需要關掉這個選項。

Hide Network#

預設關閉。瀏覽器會自動把網路相關錯誤（4XX、5XX 等）印到 Console。如果想暫時排除這類噪音，可以開啟此選項。

Preserve Log#

頁面重整或跳頁時保留 Console panel 的 log（包含手動輸入的 JavaScript）。原本會出現藍色的 Navigated to ... 提示，那個就是 log 會被清空的時機。在追蹤跨頁面流程、或頁面會自動 redirect 的情境特別有用。

Selected Context Only#

搭配左上角的 Context 選單使用，只顯示選定 context 的訊息。最常見的場景：

  • 觀察嵌入的 iframe 內產生的訊息
  • 看 Extension、Worker、Service Worker 各自的 log

開啟此選項後，連手動輸入的 JavaScript 也只會在所選 context 執行，因為不同 context 之間無法直接存取彼此的變數。

Log XMLHttpRequests#

開啟後會印出 XMLHttpRequest 與 fetch 的請求結果。資訊量比 Network panel 少很多，不過可以右鍵 Reveal in Network panel 跳轉到完整的請求細節。

Show Log Timestamp#

這個選項藏在 DevTools 本身的 Settings 裡（不是 Console 的齒輪選單）。開啟後 Console 每一行訊息前面會加上 timestamp，追蹤事件順序、效能問題時很實用。

銜接#

Console panel 的訊息系統與設定講完，下一章進入 Console API：那些可以大幅提升 Debug 效率的 method（assert、count、group、table、time、trace）。

原文出處#

  • 原書/iThome：https://ithelp.ithome.com.tw/articles/10240275
Backward 前端 Debug 技巧 Cookie 的 SameSite 屬性 Forward