vscode使用Debugger for Chrome配置

使用VSCODE开发html的时候,难免少了调试。可是按下F5会自动打开chrom。并且打开 localhost:8080,如图:
vscode使用Debugger for Chrome配置_第1张图片

这时候只需要改一下配置文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "debug index",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

注意画红框的地方
vscode使用Debugger for Chrome配置_第2张图片

这里是添加一个配置,名称为: debug index 下面有个 "file": "${workspaceRoot}/index.html" 这句配置的作用是打开自己目录下的index.html文件,所以想打开其他文件那就修改为其他目录即可。

假如还想打开 new_file.html的话,可以直接把index.html改成new_file.html或者复制一份{}中的配置进行修改。记得修改name的配置和file的配置即可

运行:
配置文件准备好后,就是运行了。打开调试页面,这里记得选择对应的配置
vscode使用Debugger for Chrome配置_第3张图片

然后按F5运行,就可以在浏览器中看到自己的index.html页面了

你可能感兴趣的:(开发工具)