vscode使用Debugger for Chrome配置

使用VSCODE开发html的时候，难免少了调试。可是按下F5会自动打开chrom。并且打开 localhost:8080，如图：

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

{
  "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"
    }
  ]
}

注意画红框的地方

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

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

运行：
配置文件准备好后，就是运行了。打开调试页面，这里记得选择对应的配置

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