溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

VSCode如何調(diào)試js代碼

發(fā)布時(shí)間：2021-01-05 11:01:03 來(lái)源：億速云 閱讀：432 作者：小新 欄目：軟件技術(shù)

小編給大家分享一下VSCode如何調(diào)試js代碼，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

介紹 VS Code 調(diào)試 js 的兩種方法：

  • Quokka.js 插件

  • Debugger for Chrome 與 Live Server 搭配

Quokka.js 插件

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

在擴(kuò)展商店搜索安裝：

VSCode如何調(diào)試js代碼

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

VSCode如何調(diào)試js代碼

可以看到有兩個(gè)選項(xiàng)，一個(gè)是調(diào)試 js 的，一個(gè)是調(diào)試 ts 的。我們選第一個(gè)。

可能會(huì)有一個(gè)詢(xún)問(wèn)你是否購(gòu)買(mǎi) pro 版的提示，你可以關(guān)掉不用理會(huì)，也可以選擇購(gòu)買(mǎi)。

嘗試在打開(kāi)的編輯框中輸入幾句代碼：

VSCode如何調(diào)試js代碼

你會(huì)發(fā)現(xiàn)，代碼的運(yùn)行是實(shí)時(shí)的。左邊的綠色方塊代表語(yǔ)句被成功執(zhí)行，如果執(zhí)行不成功，會(huì)變成紅色。

VSCode如何調(diào)試js代碼

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

請(qǐng)先下載安裝這兩個(gè)插件；本方法需要安裝谷歌瀏覽器。

假設(shè)你有這樣一個(gè)前端項(xiàng)目：

VSCode如何調(diào)試js代碼

VSCode如何調(diào)試js代碼

當(dāng)你安裝好 Live Server 后你會(huì)發(fā)現(xiàn) VS Code 右下角有個(gè) Go Live 小按鈕：

VSCode如何調(diào)試js代碼

點(diǎn)它！

Live Srever 會(huì)創(chuàng)建一個(gè)本地開(kāi)發(fā)服務(wù)器，并彈出一個(gè)瀏覽器窗口，地址類(lèi)似這樣：

http://127.0.0.1:5500/

VSCode如何調(diào)試js代碼

同時(shí)也會(huì)有提示：

VSCode如何調(diào)試js代碼

你可以暫時(shí)關(guān)掉這個(gè)瀏覽器窗口，不用擔(dān)心，在沒(méi)再次點(diǎn)擊右下角的那個(gè)小按鈕或關(guān)掉 VS Code 時(shí)，你依然可以通過(guò) http://127.0.0.1:5500/ 打開(kāi)剛才的網(wǎng)頁(yè)。

請(qǐng)記住這個(gè)端口號(hào)：5500，因?yàn)楹竺鏁?huì)用到。當(dāng)你多開(kāi) Live Srever 或其他程序占用了這個(gè)端口號(hào)時(shí)，端口號(hào)會(huì)自動(dòng) +1 。

顧名思義，Live Server 是實(shí)時(shí)更新的。當(dāng)你修改了項(xiàng)目的文件或代碼，Live Server 會(huì)馬上更新并自動(dòng)刷新頁(yè)面。

回到編輯器。

依次點(diǎn)擊: 運(yùn)行圖標(biāo) -> 創(chuàng)建 launch.json 文件：

VSCode如何調(diào)試js代碼

用下面的配置覆蓋掉原本的配置并保存：

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 調(diào)試",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VS Code 就會(huì)在項(xiàng)目所在目錄中保存相關(guān)的配置：

VSCode如何調(diào)試js代碼

注意： "url" 字段中的端口號(hào) 5500 要與 Live Server 提供的端口號(hào)對(duì)應(yīng)。

點(diǎn)擊：

VSCode如何調(diào)試js代碼

你會(huì)看到：

VSCode如何調(diào)試js代碼

如你所愿，它已經(jīng)正常工作了。

我們把鼠標(biāo)移到圖示位置，點(diǎn)擊以打上斷點(diǎn)：

VSCode如何調(diào)試js代碼

然后點(diǎn)擊網(wǎng)頁(yè)上的按鈕：

VSCode如何調(diào)試js代碼

你會(huì)看到打上的斷點(diǎn)成功攔截執(zhí)行：

VSCode如何調(diào)試js代碼

VSCode如何調(diào)試js代碼

細(xì)心的你可能會(huì)發(fā)現(xiàn)，當(dāng)點(diǎn)擊一次 Go Live 按鈕時(shí)會(huì)打開(kāi)一個(gè)瀏覽器窗口，再點(diǎn)擊一次調(diào)試按鈕時(shí)（快捷鍵 F5），會(huì)打開(kāi)第二個(gè)用于調(diào)試的窗口。這可能是沒(méi)有必要的，我們只需要一個(gè)窗口就行了。

下面我們來(lái)編輯配置，使這個(gè)過(guò)程只需打開(kāi)一次瀏覽器窗口。

點(diǎn)擊 “chrome 調(diào)試” 旁邊的齒輪：

VSCode如何調(diào)試js代碼

在打開(kāi)的編輯框依次點(diǎn)擊：

VSCode如何調(diào)試js代碼

得到如下配置并保存：

VSCode如何調(diào)試js代碼

在擴(kuò)展商店搜索 Live Server 并打開(kāi)它的擴(kuò)展設(shè)置：

VSCode如何調(diào)試js代碼

需要修改的配置有兩個(gè)：

VSCode如何調(diào)試js代碼

1、Chrome Debugging Attachment

VSCode如何調(diào)試js代碼

點(diǎn)擊進(jìn)入，將 "liveServer.settings.ChromeDebuggingAttachment": false 改為 true。

"liveServer.settings.ChromeDebuggingAttachment": true

2、Custom Browser

點(diǎn)擊此選項(xiàng)中的下拉框，我們選擇 chrome：

VSCode如何調(diào)試js代碼

修改完成！

接下來(lái)我們重啟 Live Srever 服務(wù)：

VSCode如何調(diào)試js代碼

回到 VS Code，按下 F5 鍵，啟動(dòng)調(diào)試：

VSCode如何調(diào)試js代碼

之后本項(xiàng)目的每次調(diào)試你只需要點(diǎn)擊 Go Live 按鈕并回到 VS Code 按下 F5 鍵就行了。

當(dāng)然，chrome 調(diào)試 選項(xiàng)可能還是生效的，當(dāng)你關(guān)掉 Live Server 打開(kāi)的瀏覽器窗口時(shí)，可以嘗試使用這個(gè)選項(xiàng)再次打開(kāi)。

VSCode如何調(diào)試js代碼

如果遇到端口號(hào)被占用的情況，可以點(diǎn)擊調(diào)試旁邊的齒輪來(lái)修改。

祝：

永無(wú) 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">請(qǐng)點(diǎn)擊下方按鈕以獲取當(dāng)前時(shí)間</div>
    <button id="getTime">獲取時(shí)間</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 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): 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 調(diào)試",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

看完了這篇文章，相信你對(duì)“VSCode如何調(diào)試js代碼”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手