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調試便可，如圖：

 

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