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"。
這時(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/
見下圖
?
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)試按鈕。
見下圖
這個(gè)時(shí)候,你會(huì)看到斷點(diǎn)進(jìn)來了。
效果如下:
好了,Vs Code中斷點(diǎn)調(diào)試技巧就結(jié)束了,是不是很簡(jiǎn)單啊。