vscode设置debugger for chrome，亲试可行

下载debugger for chrome 插件
点击右侧类似播放图标的按钮

点击图示设置按钮，在弹出来的config.json中按下面的内容进行配置，有不会的或者不懂的字段的含义可以留言问我，看到就会回复。照下图设置后，第一步操作基本完成。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against locakhost",
      "url": "http://localhost:8080",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    },
    {
        "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
    }
  ]
}

第二步操作，找到桌面上的浏览器图标，点击右键属性，在目标那一栏中添加一段语句，
-remote-debugging-port=9222，记得在添加之前加一个空格隔开，不然会失效。

操作完之后，就可以在VScode中按F5选择我们刚刚设置的chrome，进行调试了。