Pages

VS Code setup – JavaScript debugging

May 14, 2018
全新安裝 Visual Studio Code ,建立一組 JavaScript 與 HTML 網頁,並在 Visual Studio Code 中直接啟動 Debug 模式。
首先到微軟網站下載並安裝 Install Visual Studio Code
進入 IDE 介面,左側是主要功能區,以下會用到這三項:
  1. 檢視目前開啟的目錄
  2. Debug
  3. 下載 VS Code Extension
Image(2)

Install Extension

要模擬網站執行網頁與本機 Debug 需要安裝以下兩個 Extension ,可以直接從 IDE > Extension > 輸入 live server > Install (如下圖)。
或到網站下載安裝。

Image(3)

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
提供本機上的網站伺服器,支援動態編輯內容儲存後,網頁自動直接更新

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
產品說明的很清楚: Debug your JavaScript code running in Google Chrome from VS Code.
安裝好兩個 Extension 後,關閉並重新開啟 VS Code

建立 Web 網站目錄與 launch.json

開啟一個全空的檔案目錄
Image(4)

Image(5)

index.html 中輸入
<h1></h1>
<script src="./index.js"></script>


index.js 中輸入
window.onload = function () {
var myword="hello world!";
document.querySelector('h1').innerHTML=myword;
}

新增 launch.json
點擊左側 Debug > [No Configuration] 右側 > Add Configuration > Chrome

Image(6)

複製以下內容至 launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": false,
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/*", // Example: "webpack:///src/app.js" -> "/users/me/project/src/app.js"
            }
        }
    ]
}


啟動網站與 Debug


開啟 index.js 設定中斷點
Image(7)

在 IDE 最下方點擊 [Go Live] 啟動 Live Server
本機網址是 http://localhost:5500
Image(8)

Start Debugging (F5)
有三種方式啟動 Debugging
  1. F5
  2. 選單 > Debug > Start Debugging
  3. 點擊 DEBUG 右側綠色 Icon 以 Debug 模式啟動網頁(如下圖 1)
順利的話,執行程序在所指定中斷點時暫停時,可以逐步移動 (如下圖 2),
並可觀察與直接修改變數(如下圖 3)。

Image(9)