淺談VSCode偵錯js程式碼的幾種方法

VSCode如何偵錯js程式碼？下面本篇文章給大家介紹一下偵錯js程式碼的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

相關推薦：《》

介紹 VS Code 偵錯 js 的兩種方法：

Quokka.js 外掛
Debugger for Chrome 與 Live Server 搭配

Quokka.js 外掛

外掛地址：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

在擴充套件商店搜尋安裝：

在VS code 中使用快捷鍵 ctrl+shift+P 調出面版，輸入 quo：

可以看到有兩個選項，一個是偵錯 js 的，一個是偵錯 ts 的。我們選第一個。

可能會有一個詢問你是否購買 pro 版的提示，你可以關掉不用理會，也可以選擇購買。

嘗試在開啟的編輯框中輸入幾句程式碼：

你會發現，程式碼的執行是實時的。左邊的綠色方塊代表語句被成功執行，如果執行不成功，會變成紅色。

Debugger for Chrome 與 Live Server 搭配

Debugger for Chrome 外掛地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Live Server 外掛地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

請先下載安裝這兩個外掛；本方法需要安裝谷歌瀏覽器。

假設你有這樣一個前端專案：

當你安裝好 Live Server 後你會發現 VS Code 右下角有個 Go Live 小按鈕：

點它！

Live Srever 會建立一個本地開發伺服器，並彈出一個瀏覽器視窗，地址類似這樣：

http://127.0.0.1:5500/

同時也會有提示：

你可以暫時關掉這個瀏覽器視窗，不用擔心，在沒再次點選右下角的那個小按鈕或關掉 VS Code 時，你依然可以通過 http://127.0.0.1:5500/ 開啟剛才的網頁。

請記住這個埠號：5500，因為後面會用到。當你多開 Live Srever 或其他程式佔用了這個埠號時，埠號會自動 +1 。

顧名思義，Live Server 是實時更新的。當你修改了專案的檔案或程式碼，Live Server 會馬上更新並自動重新整理頁面。

回到編輯器。

依次點選: 執行圖示 -> 建立 launch.json 檔案：

用下面的設定覆蓋掉原本的設定並儲存：

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請存取: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 偵錯",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VS Code 就會在專案所在目錄中儲存相關的設定：

注意： "url" 欄位中的埠號 5500 要與 Live Server 提供的埠號對應。

點選：

你會看到：

如你所願，它已經正常工作了。

我們把滑鼠移到圖示位置，點選以打上斷點：

然後點選網頁上的按鈕：

你會看到打上的斷點成功攔截執行：

細心的你可能會發現，當點選一次 Go Live 按鈕時會開啟一個瀏覽器視窗，再點選一次偵錯按鈕時（快捷鍵 F5），會開啟第二個用於偵錯的視窗。這可能是沒有必要的，我們只需要一個視窗就行了。

下面我們來編輯設定，使這個過程只需開啟一次瀏覽器視窗。

點選「chrome 偵錯」旁邊的齒輪：

在開啟的編輯框依次點選：

得到如下設定並儲存：

在擴充套件商店搜尋 Live Server 並開啟它的擴充套件設定：

需要修改的設定有兩個：

1、Chrome Debugging Attachment

點選進入，將 "liveServer.settings.ChromeDebuggingAttachment": false 改為 true。

"liveServer.settings.ChromeDebuggingAttachment": true

2、Custom Browser

點選此選項中的下拉框，我們選擇 chrome：

修改完成！

接下來我們重新啟動 Live Srever 服務：

回到 VS Code，按下 F5 鍵，啟動偵錯：

之後本專案的每次偵錯你只需要點選 Go Live 按鈕並回到 VS Code 按下 F5 鍵就行了。

當然，chrome 偵錯選項可能還是生效的，當你關掉 Live Server 開啟的瀏覽器視窗時，可以嘗試使用這個選項再次開啟。

如果遇到埠號被佔用的情況，可以點選偵錯旁邊的齒輪來修改。

祝：

永無 BUG！

使用到的程式碼：

<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">請點選下方按鈕以獲取當前時間</div>
    <button id="getTime">獲取時間</button>
    <script src="./js/index.js"></script>
</body>
</html>

// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
    let time = document.getElementById("time");
    let now = new Date().toLocaleString();
    time.innerHTML = now;
}

// ./.vscode/launch.json
{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請存取: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 偵錯",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

更多程式設計相關知識，請存取：！！

以上就是淺談VSCode偵錯js程式碼的幾種方法的詳細內容，更多請關注TW511.COM其它相關文章！