vscode chrome调试怎么在所有浏览器都好使

小妖6662025-04-30 15:07

chrome调试时只能在打开的浏览器里进行调试，其它打开的chrome浏览器就不能调试了，怎么解决。

右键点击 Chrome 的快捷方式图标，选择属性在目标一栏，最后加上--remote-debugging-port=9222 注意要用空格隔开

lanch.json 文件配置

复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "url": "http://localhost:8056/add-system/",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
          "webpack:///src/*.vue": "${workspaceFolder}/src/*.vue",
          "webpack:///./src/*.js": "${workspaceFolder}/src/*.js"
      },
    }
  ]
}

打开浏览器，当前端页面进入 http://localhost:8056/add-system/ 后就会自动走入断点。如果多个浏览器都想走入调试可以设置多个配置，然后设置同时启动。

启动两个调试方法

复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "url": "http://localhost:8056/add-system/",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*.vue": "${workspaceFolder}/src/*.vue",
        "webpack:///./src/*.js": "${workspaceFolder}/src/*.js"
      }
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:8056/add-system/",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*.vue": "${workspaceFolder}/src/*.vue",
        "webpack:///./src/*.js": "${workspaceFolder}/src/*.js"
      }
    }
  ],
  "compounds": [
    {
      "name": "启动所有",
      "configurations": [
        "Chrome",
        "Attach"
      ],
      "stopAll": true
    }
  ]
}