Visual Studio Code斷點(diǎn)調(diào)試前端程序(Vue)

0. 背景

眾所周知, 斷點(diǎn)調(diào)試時(shí)開發(fā)人員必不可少的技能包之一。
缺少了這一技巧的開發(fā)人員如同少了一只手臂, 開發(fā)效率大打折扣。

在如今五彩繽紛的眾多開發(fā)集成環(huán)境(IDE)中,后端Java開發(fā)人員最鐘愛的是IntelliJ IDEA。
而前端開發(fā)者最鐘愛的則是VS Code。

Java開發(fā)者們都知道,在IDEA或Eclipse中斷掉調(diào)試程序非常簡(jiǎn)單,只需要在你所需要斷點(diǎn)
調(diào)試的代碼行前點(diǎn)個(gè)小圓點(diǎn),然后點(diǎn)擊debug就可以了。

那么在Vs Code中斷點(diǎn)調(diào)試也是這么簡(jiǎn)單呢?

答案是:
沒那么傻瓜化,需要稍微配置一下。
下面我們就來看看前端小白如何在Vs Code中斷點(diǎn)調(diào)試程序吧。

?

1. 添加Debugger for Chrome插件

在Vs Code左側(cè)的工具類點(diǎn)擊"Extensions"按鈕。

安裝插件如下:


安裝插件

?

2. 為你的項(xiàng)目添加啟動(dòng)文件

打開項(xiàng)目后, 在左側(cè)的工具類點(diǎn)擊"Run and Debug"按鈕。
點(diǎn)擊"Add Configuration"。

添加Chrome啟動(dòng)文件

這時(shí)候,會(huì)在項(xiàng)目中生成一個(gè)文件launch.json。

你需要修改launch.json如下:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "91.0.4469.4",
    "configurations": [
        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/#/",
            "runtimeExecutable": "/Applications/Google Chrome Dev.app/Contents/MacOS/Google Chrome Dev",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

上面的配置文件中需要注意兩點(diǎn):
version和runtimeExecutable。
很多開發(fā)者會(huì)遇到一個(gè)問題就是:
Unable to find a Chrome installation on your system

這是由于配置文件中的版本還有Chrome的執(zhí)行路徑和你開發(fā)機(jī)不匹配導(dǎo)致的。

那么,我們?nèi)绾尾榭醋约旱腃home版本和執(zhí)行路徑呢。
很簡(jiǎn)單。
你只需要在瀏覽器輸入路徑:
chrome://version/

見下圖


Chrome版本和執(zhí)行路徑

?

3. 開啟斷點(diǎn)調(diào)試

配置完成以后,我們便可以開啟我們的斷點(diǎn)調(diào)試之旅了。
首先,你需要在你的程序中打斷點(diǎn),這個(gè)和別的IDE沒有區(qū)別。

然后,你照常先運(yùn)行你的程序。
(eg: npm run serve)

最后,點(diǎn)擊那個(gè)小三角的調(diào)試按鈕。
見下圖


點(diǎn)擊調(diào)試

這個(gè)時(shí)候,你會(huì)看到斷點(diǎn)進(jìn)來了。
效果如下:


斷點(diǎn)模式

好了,Vs Code中斷點(diǎn)調(diào)試技巧就結(jié)束了,是不是很簡(jiǎn)單啊。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。