VS Code setup – JavaScript debugging

全新安裝 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)