如何配置debugger for chrome饰剥，包含attach多搀、launch兩種模式的介紹，講述關(guān)鍵步驟應(yīng)該呈現(xiàn)的狀態(tài)侧甫。實(shí)際安裝過(guò)程中出現(xiàn)的一些問(wèn)題該如何解決珊佣。
歡迎補(bǔ)足。
下載插件
![]()
插件安裝.PNG
安裝完后記得重新加載
將自己的項(xiàng)目先運(yùn)行起來(lái),我是用vue-cli搭建的披粟。
注意要開(kāi)啟source-map功能
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#在瀏覽器中展示源代碼
切換到debugger模式,為自己的項(xiàng)目添加配置
選擇chrome 環(huán)境后咒锻，你會(huì)得到下面這個(gè)文件
request 是指具體的模式 有l(wèi)aunch和attach兩種
launch 模式會(huì)新打開(kāi)一個(gè)瀏覽器窗口
url 瀏覽器標(biāo)簽頁(yè)的url,這里要輸入項(xiàng)目的有效地址
webRoot 源代碼的位置,這一項(xiàng)非常重要,如果出現(xiàn)打斷點(diǎn)不起作用或者斷電的位置不對(duì)都與此項(xiàng)配置有關(guān)。
下面是我的配置守屉，僅供參考!
{
// 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": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://192.168.10.144:8080/#/",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true
}
]
}
"webRoot": "${workspaceFolder}/src" 指向的位置就是項(xiàng)目中src文件夾
在源代碼中設(shè)置一個(gè)斷點(diǎn),正常境況下斷點(diǎn)是紅色的
啟動(dòng)插件
點(diǎn)擊綠色按鈕啟動(dòng)后,vs code 的顯示是這樣的,你可以Ctrl + ` 打開(kāi)控制臺(tái)查看輸出
同時(shí)會(huì)新彈出一個(gè)瀏覽器窗口
這時(shí)候,觸發(fā)斷點(diǎn)惑艇，正常境況下瀏覽器顯示為
vscode 顯示為
如果控制臺(tái)打印錯(cuò)誤
(Error processing "setBreakpoints": Error: Could not resolve breakpoint): 需要再次檢驗(yàn)項(xiàng)目是否開(kāi)啟sourcemap。
attach的開(kāi)啟
該模式是基于已開(kāi)啟瀏覽器窗口的監(jiān)聽(tīng)拇泛，在配置上
url 一定是當(dāng)前瀏覽器顯示的路徑,否則啟動(dòng)時(shí)會(huì)報(bào)錯(cuò)
下面是我的配置敦捧，僅供參考
{
// 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": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"url": "http://192.168.10.144:8080/#/",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true
}
]
}
要開(kāi)啟chrome瀏覽器的遠(yuǎn)程調(diào)試端口
找到chrome瀏覽器快捷方式所在的文件夾 在目標(biāo)一欄末尾添加一個(gè)空格后 在加入 --remote-debugging-port=9222
注意端口要和配置的一致
點(diǎn)擊確定后 重啟瀏覽器须板，請(qǐng)直接雙擊配置好的快捷方式,其他地方的快捷方式可能為何其產(chǎn)生關(guān)聯(lián)從而導(dǎo)致程序失效，報(bào)如下錯(cuò)誤
配置好后 開(kāi)啟成功后的樣式如下兢卵。
