用VSCode 開啟偵錯模式幫JS debug

Heko

Published in

小彥彥的前端五四三

3 min readDec 23, 2019

運用VSCode就能輕鬆簡單的使用debug模式下中斷點。要如何使用呢?

首先打開 VSCode，點選左邊功能列的 [擴充功能]，搜尋 [Debugger for Chrome] 並安裝。

安裝好後我們要針對專案加入 launch.json檔案，如何加入呢?
點選左邊功能列的 [偵錯功能]，點選新增launch.json檔案，選擇建立 Chrome 的 Debug 組態檔。

這時VSCode 會在專案目錄底下自動建立一個 .vscode 的資料夾，並在裏頭加入 launch.json 的組態檔。

依需求修改 launch.json 的值，目前只需要修改url與webRoot：

{   // 使用 IntelliSense 以得知可用的屬性。   // 暫留以檢視現有屬性的描述。   // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387   "version": "0.2.0",
   "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",  // 前端URL
      "webRoot": "${workspaceFolder}/js/"  //實體的開發js目錄
    }
   ]
}

設定好參數並打上中斷點之後，按下左上綠色箭頭開始執行偵錯，會跳出偵錯主控台、偵錯控制列以及另開一頁新視窗頁面。

然後我們可以使用偵錯控制列上的向右的藍色箭頭繼續執行直到下一個中斷點或執行結束。

用VSCode 開啟偵錯模式幫JS debug

Written by Heko