如何配置debugger for chrome，包含attach、launch兩種模式的介紹，講述關(guān)鍵步驟應(yīng)該呈現(xiàn)的狀態(tài)。實(shí)際安裝過(guò)程中出現(xiàn)的一些問(wèn)題該如何解決。

歡迎補(bǔ)足。

下載插件

插件安裝.PNG

安裝完后記得重新加載

重新加載頁(yè)面.PNG

將自己的項(xiàng)目先運(yùn)行起來(lái),我是用vue-cli搭建的。
注意要開啟source-map功能
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#在瀏覽器中展示源代碼

切換到debugger模式,為自己的項(xiàng)目添加配置

切換到debugger模式.PNG

選擇chrome 環(huán)境后，你會(huì)得到下面這個(gè)文件

配置文件.PNG

request 是指具體的模式 有l(wèi)aunch和attach兩種

launch 模式會(huì)新打開一個(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文件夾

src文件夾.PNG

在源代碼中設(shè)置一個(gè)斷點(diǎn),正常境況下斷點(diǎn)是紅色的

斷點(diǎn).PNG

啟動(dòng)插件

啟動(dòng)插件.PNG

點(diǎn)擊綠色按鈕啟動(dòng)后,vs code 的顯示是這樣的,你可以Ctrl + ` 打開控制臺(tái)查看輸出

vscode開啟debugger后.PNG

同時(shí)會(huì)新彈出一個(gè)瀏覽器窗口

新彈出瀏覽器窗口.PNG

這時(shí)候,觸發(fā)斷點(diǎn)，正常境況下瀏覽器顯示為

觸發(fā)debugger后瀏覽器的樣子.PNG

vscode 顯示為

觸發(fā)debugger后vscode的顯示.PNG

如果控制臺(tái)打印錯(cuò)誤
(Error processing "setBreakpoints": Error: Could not resolve breakpoint): 需要再次檢驗(yàn)項(xiàng)目是否開啟sourcemap。

attach的開啟

該模式是基于已開啟瀏覽器窗口的監(jiān)聽，在配置上

url 一定是當(dāng)前瀏覽器顯示的路徑,否則啟動(dòng)時(shí)會(huì)報(bào)錯(cuò)

attach模式url配置錯(cuò)誤.PNG

下面是我的配置，僅供參考

{
// 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
    }
]
}

要開啟chrome瀏覽器的遠(yuǎn)程調(diào)試端口

找到chrome瀏覽器快捷方式所在的文件夾 在目標(biāo)一欄末尾添加一個(gè)空格后 在加入 --remote-debugging-port=9222

開啟遠(yuǎn)程端口.PNG

注意端口要和配置的一致

點(diǎn)擊確定后 重啟瀏覽器，請(qǐng)直接雙擊配置好的快捷方式,其他地方的快捷方式可能為何其產(chǎn)生關(guān)聯(lián)從而導(dǎo)致程序失效，報(bào)如下錯(cuò)誤

attach無(wú)法連接錯(cuò)誤.PNG

配置好后 開啟成功后的樣式如下。

正常開啟attach模式.PNG