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调试即可,如图:

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐