VSCode配置 Debugger for Chrome外掛（終於搞定了..）

今天重灌了vsCode，重新安裝了外掛，配置這個除錯外掛時花了一個小時…好菜，因為我按網上教程配置了出現斷點灰色，除錯不了的問題，所以我找解決方法…現在半夜兩點了，我要禿了…才剛入行哈哈哈哈哈哈

進入正題：
Debugger for Chrome這款外掛是專門為前端除錯開發的，很方便除錯，跟谷歌的控制檯是一樣的功能，下載了它就不用開啟瀏覽器的控制檯就能進行打斷點。
1.安裝Debugger for Chromec外掛

2.配置launch.json檔案
這個檔案怎麼開啟？
安裝了外掛右邊會多出除錯按鈕，點選，然後再點選左上角的 齒輪， 就自動跳出launch.json檔案了

這裡配置我看了好多…最終配置成功如下
也就是配置下面兩個，一個配置html裡面的js, 一個單獨除錯js檔案的，這裡沒帶註釋，方便需要的道友複製，註釋具體看下面完整檔案

 {
            "type": "chrome", // html裡面的js
            "request": "launch", 
            "name": "LaunchChrome", 
            "file": "${file}", 
            "webRoot": "${workspaceFolder}", 
            "sourceMaps": false, 
            "userDataDir": "${workspaceFolder}/.vscode/chrome"
        },
        {
            "type": "node", // 單獨除錯js檔案
            "request": "launch",
            "name": "本地js逆向除錯",
            "program": "${file}"
        }

我的全部launch.json檔案如下，帶註釋

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "browser-preview",
            "name": "Browser Preview: Attach",
            "request": "attach"
        },
        {
            "type": "chrome", // 谷歌--除錯html裡面的js
            "request": "launch", // 模式launch模式：由 vscode 來啟動一個獨立的具有 debug 模式的  attach模式：附加於（也可以說“監聽”）一個已經啟動的程式（必須已經開啟 Debug 模式）
            "name": "LaunchChrome", // 名字自個起個好聽的吧，
            // "url": "http://localhost/", // 本地http服務路徑 ,比如用apache服務，這裡我有，但是懶得開，所以我配置檔案路徑好了
            "file": "${file}", // 當前開啟的檔案， 沒開本地http服務就配置本地檔案路徑開啟
            "webRoot": "${workspaceFolder}", // 也是chrome外掛帶的，指定根目錄或者執行檔案,${workspaceRoot}:就是你開啟vscode讀取的專案目錄
            "sourceMaps": false, // 設定false,我一開始設定true，斷點灰色，除錯不了
            "userDataDir": "${workspaceFolder}/.vscode/chrome", // 臨時目錄,專門儲存除錯過程產生的東西,這個欄位是為了重新開啟一個瀏覽器視窗，不會強制關閉已經開啟的瀏覽器
        },
        {
            "type": "node", // 單獨除錯js檔案
            "request": "launch",
            "name": "本地js逆向除錯",
            "program": "${file}"
        },
        {  // 這個不用管，是其他外掛配置
            "type": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:3000",
        }
    ]
}

介面介紹：
配置了這兩個就可以除錯了（偷張圖，來源https://blog.csdn.net/weixin_43411585/article/details/108798737）

除錯測試：
1.記得左上角選擇除錯用的配置，也就是上面設定的名字，這裡除錯html的js，使用我選擇LaunchChrome,然後點選綠色的三角開始，或者f5
2.正常出現除錯斷點行，就代表成功了
3.這裡配置除錯時開啟一個頁面的，不過開啟後自動最小化了

除錯js檔案：

最後，對配置資訊感興趣看這裡說明吧…(複製的哈哈哈…)

1.兩種模式
launch模式：由 vscode 來啟動一個獨立的具有 debug 模式的程式
attach模式：附加於（也可以說“監聽”）一個已經啟動的程式（必須已經開啟 Debug 模式）

2.欄位解釋
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} ：當前啟動時的工作目錄

終於搞定了…半夜2.30，不行了不行了，睡了睡了，寫的不好多多交流…