相关链接

如何使用vscode调试浏览器中执行的js代码

use DevTools as protocol client

  1. chrome打开的时候增加参数--remote-debugging-port=9229。
1
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9229

  1. 执行上述命令，将打开浏览器1，此时9229端口将被作为通信端口被占用。

  2. 然后，再打开一个chrome客户端--user-data-dir=/Users/ricardo/Downloads/SuperCar-master/dist

1
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --user-data-dir=/Users/ricardo/Downloads/SuperCar-master/dist

  1. 执行上述命令，将新建一个chrome实例子，并打开该实例。

  2. 在新打开的浏览器中访问localhost:9229, 将附加到浏览器1的所有tab进行调试。

使用vscode调试vue项目

  1. 在vscode的插件市场下载并安装Debugger for Microsoft Edge.

  2. 在vue.config.js中修改webpack配置devtool.

    1
    2
    3
    configureWebpack: {
        devtool: 'source-map' 
    }

  3. 在左侧Activity Bar配置启动项,.vscode/lunch.json.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
      "type": "edge",
      "request": "launch",
      "name": "Launch Edge",
      "url": "http://localhost:8081", // 端口与vue项目的dev server端口一致
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }

  4. npm run serve 启动vue项目.

  5. 启动vscode 调试，F5或者在Activity Bar的Run中点击绿色箭头。

  6. vscode底部的status bar由蓝色变为黄色，右上角显示调试栏，链接成功。即可在代码中进行加断点调试.

注意: 如果出现端口超时， 可能浏览器的--remote-debugging-port=9229字段中的端口号，与调试配置中的端口号不一致。 可以将Edge进程杀死后，重新操作步骤5, vscode会启动一个端口一致的新浏览器实例。