vscode插件“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": "D:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir":"${tmpdir}",
            "port":9222
} 

4：更改调试方式，选为我们新建的名称

5：启用Chrome并启用远程调试

        先在其快捷方式右键选属性，在“目标”字段中，追加--remote-debugging-port=9222（追加前要放个空格），我一开始改了无法保存，需要先去掉只读这个勾，如下：

      启动浏览器，如果浏览器默认打开的页面不是about:blank，会弹框报错，需要设置，如下图，设置好之后，关掉浏览器，重新打开：

       到现在为止，已完成配置！选择html页面，点击调试按钮，选好使用本机Chrome调试即可，如图：