vscode设置debugger for chrome,亲试可行

下载debugger for chrome 插件
点击右侧类似播放图标的按钮
vscode设置debugger for chrome,亲试可行_第1张图片
点击图示设置按钮,在弹出来的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设置debugger for chrome,亲试可行_第2张图片
操作完之后,就可以在VScode中按F5选择我们刚刚设置的chrome,进行调试了。
vscode设置debugger for chrome,亲试可行_第3张图片

你可能感兴趣的:(vs,visual,studio,vue.js,javascript,前端)