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)單啊。