擺脫 console.log ，使用更優質的前端除錯方案_飲東

theme: cyanosis

程式除錯是程式開發必不可少的一環，剛開始接觸前端除錯時，最常用的就是 console.log 列印變數進行除錯，本文會分享一些筆者學習到的前端除錯方法，減少對 console.log 除錯方式的依賴，選擇更優質的前端除錯方案。

本文中提到的 command 鍵，在 Windows 系統中用 control 鍵替代即可

1. 為什麼不用 console.log 一把梭

我們看一下使用 console.log 的步驟：

找到需要除錯程式碼的具體位置
寫上一行 console.log() 程式碼，傳入需要列印的變數
儲存，等待專案熱更新完成
開啟控制檯，檢視列印的變數值
除錯結束，刪掉列印的那一行程式碼

平時使用中你可能沒發現，原來限定條件這麼多，除錯變數需要這五個步驟一個都不能省。

遇到複雜的函式執行邏輯時，甚至要在每個函式中列印來確定函式的執行，這種情況下實在是不怎麼方便。

簡單的除錯還是可取的，看個人除錯習慣，較為複雜的除錯就不推薦使用 console.log 了

2. 使用瀏覽器除錯

在原生代碼端，可以通過新增一行 debugger; 命令，當代碼執行到這一行，會自動進入除錯模式

從瀏覽器端進行瀏覽器除錯需要以下幾個步驟：

開啟瀏覽器開發者工具的 Sources 原始碼面板
找到需要除錯的檔案
打斷點
進入 Debugger 模式，開始除錯

2.1 找到需要除錯的檔案

在瀏覽器當中直接找除錯檔案有兩種方式：搜尋檔案除錯 和 通過檔案目錄查詢除錯檔案

2.1.1 搜尋檔案除錯

如果沒有開啟的除錯頁，空頁面中會當前瀏覽器查詢檔案的快捷鍵提示

以谷歌瀏覽器為例，可以通過 command + P 查詢檔案 的方式開啟需要除錯的檔案

按下 command + p 快捷鍵後，搜尋你要除錯的檔案，例如 Component/index.tsx , 即可開啟對應的除錯檔案，接下來，就可以開始打斷點了。在這一步下，最便捷的打斷點方式就是點選需要除錯程式碼的行號，當代碼指定到這行時，會自動進入瀏覽器的斷點除錯模式

2.1.2 通過檔案目錄查詢除錯檔案

點選左上角的展開圖示, 推薦勾選上這三個篩選分類選項，在左側 “網頁” Tab 下，會實時展示載入模組的檔案，找到需要除錯的檔案，接下來就可以開始除錯了

2.2 打 JavaScript 斷點

找到檔案之後就可以開始打斷點了，在瀏覽器中最便捷也是最常用的就是直接點選行號打斷點，例如這裡在點選事件這一行打了斷點，當觸發這個點選事件時，這個斷點就會被觸發了。

此外，右鍵行號也可以進行新增斷點，它提供了更多的選項，例如：

條件斷點，指定條件為 true 時才觸發斷點
日誌點，記錄訊息
其他執行操作，執行到此處、不在此處暫停等

2.3 Debugger 除錯

進入 Debugger 除錯模式之後，原始碼面板右側的除錯控制檯上方有七個按鈕，分別表示

執行/暫停
跨步執行（執行下一行程式碼)
JS執行下一步(忽略非同步行為)
JS執行上一步(忽略非同步行為)
執行到函式末尾
禁用所有斷點
啟動/關閉錯誤時暫停執行

在Debugger 模式下可以檢視 JavaScript 完整的執行過程，將滑鼠移到執行過的變數上可以直接看到變數的值

在除錯控制檯下方的資訊區域，可以檢視斷點的集合、當前函式的變數、全域性變數、閉包和呼叫堆疊等資訊

2.4 打 DOM 斷點

給 DOM 元素新增斷點，當DOM 元素髮生變化時，會進入 debugger 模式，具體方法如下：

在控制檯的元素標籤頁選中 DOM 節點，右鍵選擇發生中斷的條件可設定為屬性修改，元素屬性變化的時候，就會進入斷點模式

3. 使用 VsCode 除錯

谷歌瀏覽器的 debugger 外掛已經內建了，這裡以火狐瀏覽器舉例，步驟如下：

安裝 Debugger for Firefox
左側圖示點選 ”除錯” ，若無配置可新增配置，按照預設的新增 lauch 方式即可，或者直接在根目錄下建立一個 .vscode 目錄，裡面新建一個 launch.json 檔案，新增上配置, 官網除錯文件有必要一讀, 以火 { // 使用 IntelliSense 瞭解相關屬性。 // 懸停以檢視現有屬性的描述。 // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "firefox", // 瀏覽器型別 "request": "launch", // 除錯連線方式，launch 為新開啟一個瀏覽器例項除錯， attach 為附加到已開啟的瀏覽器上 "name": "firefox", // 除錯配置的名稱 "url": "http://localhost:3009/", // 除錯專案的主頁地址 "webRoot": "${workspaceFolder}/src", // 檔案執行路徑 "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }], "profile": "default-release" // 可選配置，火狐瀏覽器使用者檔案 } ] }

profile 配置 是可選的配置項，表示開啟瀏覽器例項之後使用的使用者檔案，正常開啟例項之後，會開啟一個類似於進入了無痕視窗模式的瀏覽器，如果想正常進入瀏覽器，檢視書籤使用瀏覽器擴充套件，就需要這個配置項了

在火狐的位址列中輸入about:profiles 可以看到所有的檔案方案，這裡我直接使用了預設的檔案方案

配置完成後，打上斷點，然後啟動專案，點選除錯按鈕即可啟動 VsCode 除錯，執行到斷點的地方會自動進入 VsCode 的除錯模式，和瀏覽器中除錯方式差不多

4. 一些小技巧

console 列印

列印 物件陣列集合 使用 console.table 可以更圖表化的檢視資料
列印 DOM 物件使用 console.dir 可以打印出 DOM 節點的具體屬性

快捷鍵

command + option + i 快速開啟開發者工具 原始碼 面板

command + shift + c，開啟開發者工具 Element 面板，並啟用 元素審查

檢視 `hover` 狀態下的元素

開啟控制檯的 source （中文原始碼) 面板，按下command + 會進入 debugger 模式

選中元素，在 Element 面板右鍵選擇強制執行狀態 :hover

5. 結語

關於學習前端除錯，我認為一文讀懂是不可能的，本文的一點內容算是拋磚引玉，供大家參考

奉上一句詩，很貼合調試的學習： "紙上得來終覺淺，欲知此事要躬行"

我是飲東，歡迎點贊關注，我們江湖再會

開啟掘金成長之旅！這是我參與「掘金日新計劃 · 2 月更文挑戰」的第 1 天，點選檢視活動詳情

擺脫 console.log ，使用更優質的前端除錯方案