管理书籍排行榜,大主宰天蚕土豆小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

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

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元全椒做網(wǎng)站,已為上家服務(wù),為全椒各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

介紹 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代碼

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

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

嘗試在打開的編輯框中輸入幾句代碼：

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

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

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

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

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

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

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

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

點(diǎn)它！

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

http://127.0.0.1:5500/

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

同時也會有提示：

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

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

請記住這個端口號：5500，因?yàn)楹竺鏁玫?。?dāng)你多開 Live Srever 或其他程序占用了這個端口號時，端口號會自動 +1 。

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

回到編輯器。

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

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

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

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請?jiān)L問: 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 就會在項(xiàng)目所在目錄中保存相關(guān)的配置：

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

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

點(diǎn)擊：

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

你會看到：

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

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

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

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

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

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

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

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

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

下面我們來編輯配置，使這個過程只需打開一次瀏覽器窗口。

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

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

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

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

得到如下配置并保存：

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

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

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

需要修改的配置有兩個：

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代碼

修改完成！

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

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

回到 VS Code，按下 F5 鍵，啟動調(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 打開的瀏覽器窗口時，可以嘗試使用這個選項(xiàng)再次打開。

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

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

祝：

永無 BUG！

使用到的代碼：





    
    
    Document


    請點(diǎn)擊下方按鈕以獲取當(dāng)前時間

獲取時間

// ./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)有屬性的描述。
    // 欲了解更多信息，請?jiān)L問: 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}"
        }
    ]
}

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

當(dāng)前題目：VSCode如何調(diào)試js代碼
文章路徑：http://fisionsoft.com.cn/article/jeddoi.html

新聞中心

其他資訊