vscode(Visual Studio Code)中安裝Debugger for Chrome插件調試頁面

         最近換了下編輯器，改用vscode(Visual Studio Code),很喜歡它左邊顯示的文件路徑，輕松新建文件夾和文件，也喜歡它的編碼轉換功能，gbk和utf-8可以隨時切換，因為公司網站有些頁面是utf-8有的是gbk2312，很多時候我都分開使用用2個編輯器，感覺從現在開始不用了，哈哈

    

 

        很快就看到一個好用的拓展，可以在編輯器中設置斷點，谷歌瀏覽器中調試代碼，我很想要這個功能，但是我裝了Debugger for Chrome后，按照百度出來的方法進行配置，屢屢報錯，嘗試了很久，終於在剛才配好了。感覺度娘上面的東西有時候寫的還是太淺了。下面先說說我遇到的問題：

        下面貼出詳細步驟：

         1：VSCode 上安裝：Debugger for Chrome 

2：vscode打開一個html，按F5，在彈出來的框中選擇 Chrome，會自動打開launch.json文件 

3.往launch.json中追加以下代碼：

,
        {
            "name": "使用本機 Chrome 調試",
            "type": "chrome",
            "request": "launch",
             "file": "${file}",
            // "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir":"${tmpdir}",
            "port":9222
        } 

        改完是這個樣子：

       這里需要注意的是參數runtimeExecutable，我注釋掉了，不然會報錯：

       Chrome error: Error: spawn C:\Program Files (x86)\Google\Chrome\Application\chrome.exe EACCES

       4：更改調試方式，選為我們新建的名稱

 

5：啟用Chrome並啟用遠程調試

        先在其快捷方式右鍵選屬性，在“目標”字段中，追加--remote-debugging-port=9222（追加前要放個空格），我一開始改了無法保存，需要先去掉只讀這個勾，如下：

      啟動瀏覽器，如果瀏覽器默認打開的頁面不是about:blank，會彈框報錯，需要設置，如下圖，設置好之后，關掉瀏覽器，重新打開：

       到現在為止，已完成配置！選擇html頁面，點擊調試按鈕，選好使用本機Chrome調試即可，如圖：

 

弄這個配置，我納悶了好多天，終於搞好了。