注: 文章摘自 Dominic- - CSDN

Debugger for Chrome這個插件是直接在vscode里面進行調(diào)試js文件，跟谷歌的控制臺是一樣的功能，下載了它就不用打開瀏覽器的控制臺就能進行打斷點。

首先在左側(cè)擴展欄找到這個插件下載好了后重啟編輯器之后配置

配置步驟如圖：

圖中配置字段信息解釋如下：

• version : 你定義這個配置文件的版本，生成的時候默認(rèn)是0.2.0

• configuration：配置域

• name：配置文件的名字，可以自己起

• type：調(diào)試的類型，node是vscode本身就支持，其他就需要下載插件了

• request : 配置文件的請求類型，有l(wèi)aunch和attach兩種，launch是需要服務(wù)器的需要配置url，這里我就用的它，attach就比較麻煩了，因為配置launch也能用，所以我就沒有配置attach了

• url:這個是chrome插件帶的，指定訪問的鏈接，到這里我覺得就個缺點了，url只能配置死鏈接，就算用預(yù)定義變量也不能做到多項目自動識別要打開的HTML，可能是我沒有發(fā)現(xiàn)其他的預(yù)定義變量，如果有大神知道，歡迎在評論里留言

• webRoot：也是chrome插件帶的，指定根目錄或者執(zhí)行文件

• ${workspaceRoot}:就是你打開vscode讀取的項目目錄

• sourceMaps:默認(rèn)是啟用的，對于打包的調(diào)試，大神們就必須開啟了

• userDataDir：臨時目錄,專門保存調(diào)試過程產(chǎn)生的東西，這個字段是為了重新
  打開一個瀏覽器窗口，不會強制關(guān)閉已經(jīng)打開的瀏覽器

launch.json中有很多屬性可以設(shè)置, 通過智能提示查看有那些屬性可以設(shè)置, 如果要查看屬性的具體含義, 可以把鼠標(biāo)懸停在屬性上面, 會屬性的使用說明.

在launch.json中會使用到一些預(yù)定變量, 這些變量的具體含義如下：

• ${workspaceRoot}：VSCode中打開文件夾的路徑

• ${workspaceRootFolderName}：VSCode中打開文件夾的路徑, 但不包含"/"

• ${file} ：當(dāng)前打開的文件

• ${relativeFile}：當(dāng)前打開的文件,相對于workspaceRoot

• ${fileBasename} ：當(dāng)前打開文件的文件名, 不含擴展名

• ${fileDirname} ：當(dāng)前打開文件的目錄名

• ${fileExtname}：當(dāng)前打開文件的擴展名

• ${cwd} ：當(dāng)前啟動時的工作目錄

當(dāng)你配置完成后直接打開你要調(diào)試的js，進入調(diào)試界面選好調(diào)試的工具（就是剛才配置的名字）如圖

總結(jié)

以上是生活随笔為你收集整理的VSCode配置 Debugger for Chrome插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。