注: 文章摘自 Dominic- - CSDN

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

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

配置步驟如圖：

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

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

• configuration：配置域

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

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

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

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

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

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

• sourceMaps:默認是啟用的，對于打包的調試，大神們就必須開啟了

• userDataDir：臨時目錄,專門保存調試過程產生的東西，這個字段是為了重新
  打開一個瀏覽器窗口，不會強制關閉已經打開的瀏覽器

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

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

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

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

• ${file} ：當前打開的文件

• ${relativeFile}：當前打開的文件,相對于workspaceRoot

• ${fileBasename} ：當前打開文件的文件名, 不含擴展名

• ${fileDirname} ：當前打開文件的目錄名

• ${fileExtname}：當前打開文件的擴展名

• ${cwd} ：當前啟動時的工作目錄

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。