Debugger for Chrome這個插件是直接在vscode里面進行調試js文件，跟谷歌的控制臺是一樣的功能面殖，下載了它就不用打開瀏覽器的控制臺就能進行打斷點毅访。
首先在左側擴展欄找到這個插件下載好了后重啟編輯器之后配置
配置步驟如圖：
圖中配置字段信息解釋如下：
version : 你定義這個配置文件的版本仇矾，生成的時候默認是0.2.0
configuration：配置域
name：配置文件的名字坎吻，可以自己起
type：調試的類型，node是vscode本身就支持揪荣，其他就需要下載插件了
request : 配置文件的請求類型筷黔，有l(wèi)aunch和attach兩種，launch是需要服務器的需要配置url仗颈，這里我就用的它佛舱，attach就比較麻煩了，因為配置launch也能用挨决，所以我就沒有配置attach了
url:這個是chrome插件帶的名眉，指定訪問的鏈接，到這里我覺得就個缺點了凰棉，url只能配置死鏈接损拢，就算用預定義變量也不能做到多項目自動識別要打開的HTML，可能是我沒有發(fā)現(xiàn)其他的預定義變量撒犀，如果有大神知道福压，歡迎在評論里留言
webRoot：也是chrome插件帶的，指定根目錄或者執(zhí)行文件
${workspaceRoot}:就是你打開vscode讀取的項目目錄
sourceMaps:默認是啟用的或舞，對于打包的調試荆姆，大神們就必須開啟了
userDataDir：臨時目錄,專門保存調試過程產(chǎn)生的東西，這個字段是為了重新
打開一個瀏覽器窗口映凳，不會強制關閉已經(jīng)打開的瀏覽器
launch.json中有很多屬性可以設置, 通過智能提示查看有那些屬性可以設置, 如果要查看屬性的具體含義, 可以把鼠標懸停在屬性上面, 會屬性的使用說明.
在launch.json中會使用到一些預定變量, 這些變量的具體含義如下：
${workspaceRoot}：VSCode中打開文件夾的路徑
${workspaceRootFolderName}：VSCode中打開文件夾的路徑, 但不包含"/"
${file} ：當前打開的文件
${relativeFile}：當前打開的文件,相對于workspaceRoot
${fileBasename} ：當前打開文件的文件名, 不含擴展名
${fileDirname} ：當前打開文件的目錄名
${fileExtname}：當前打開文件的擴展名
${cwd} ：當前啟動時的工作目錄
當你配置完成后直接打開你要調試的js胆筒，進入調試界面選好調試的工具（就是剛才配置的名字）如圖
