VS Code 過去的 Debugger for Chrome 延伸模組讓我們可以整合 VS Code 的偵錯與 Chrome 的 DevTools,使得我們得以在 VS Code 裡面下中斷點和逐行執行(若要支援原始碼,必須使用 source map),檢視物件、變數和執行堆疊,進行即時運算等等。當然這些事情在 Chrome 的 DevTools 裡面都能做到,但是能夠在 VS Code 裡面、直接對照著正在編輯的原始碼進行這些動作,就是多了一份便利性。

自從 VS Code 1.46 版開始,VS Code 內建了新的延伸模組 JavaScript Debugger 的 Preview 版本,並且計畫最終將以這個模組作為 VS Code 內建的偵錯器,取代 Debugger for Chrome 和 Debugger for Microsoft Edge 的功能。JavaScript Debugger 將兼具在 Chrome、Edge 以及 Node.js 中偵錯的能力,而且包括 worker 和 extension 都能進行偵錯(這是 Chrome DevTools 所作不到的)。若要改用 JavaScript Debugger,只要在啟用該延伸模組之後,將 launch.json 裡面設定 "type": "chrome" 的項目都改成 "type": "pwa-chrome" 即可。

不過在本文撰寫的此時,截至 1.47.5 版的 JavaScript Debugger 有一個已知的錯誤,就是如果 launch.json 裡面只設定了 file 選項那會無法正確執行(4.12.9 版的 Debugger for Chrome 也一樣有此問題)。若要解決此問題,除了暫時退回去 4.12.8 版的 Debugger for Chrome 之外,也可以搶先用 JavaScript Debugger (Nightly),裡面是已經修正這個問題了。
(8/14 更新:這項錯誤已經在 1.48.1 版中正式修正)

另一個 JavaScript Debugger 跟過去的 Node.js 偵錯器不一樣的地方在於,當 launch.json 裡面設定 "console": "internalConsole" 的時候,console.log 會輸出在「偵錯主控台」這一頁籤之上(而非終端機上),而低階的 process.stdout 輸出操作在這個頁籤上是不能用的。如果想要像以前一樣使用終端機以便使用 stdout 相關功能,可以改成設定 "console": "integratedTerminal" 並且關掉 "internalConsoleOptions": "openOnSessionStart"

分享此頁至:
最後修改日期: 2020/08/14

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。