注: 文章摘自 Dominic- - CSDN

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

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

配置步驟如圖：

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

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

• configuration：配置域

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

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

• request : 配置文件的請(qǐng)求類(lèi)型，有l(wèi)aunch和attach兩種，launch是需要服務(wù)器的需要配置url，這里我就用的它，attach就比較麻煩了，因?yàn)榕渲胠aunch也能用，所以我就沒(méi)有配置attach了

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

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

• ${workspaceRoot}:就是你打開(kāi)vscode讀取的項(xiàng)目目錄

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

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

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

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

• ${workspaceRoot}：VSCode中打開(kāi)文件夾的路徑

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

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

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

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

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

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

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

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

總結(jié)

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

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