前端小纠结–VS Code调试配置分享

前端小纠结–VS Code调试配置分享mac和Liunx可以参考官方文档,具体还有很多参数配置,mac和linux下启动的时候配置参数启动。

这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准vs code调试)

调试配置

使用vs code插件debugger-for-chromedebugger-for-edge(EdgeHTML&Chromium)Debugger for Firefox调试之前,会自动在工程下添加.vscode文件夹,里面的launch.json就是配置调试参数的位置。

launch.json

很多的配置参数,具体看参考章节的nodejs-debuggingdebugging-protocol

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [


    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: launch chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "userDataDir": false,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "vuejs: attach chrome",
      "webRoot": "${workspaceFolder}/src",
      "port": 9222,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "vuejs: launch EdgeHTML",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "userDataDir": false,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "edge",
      "request": "attach",
      "name": "vuejs: attach EdgeHTML",
      "webRoot": "${workspaceFolder}/src",
      "port": 2015,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "edge",
      "request": "attach",
      "version": "dev", // dev, beta, or canary
      "name": "vuejs: attach Edge(Chromium)",
      "webRoot": "${workspaceFolder}/src",
      "port": 9223,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "edge",
      "request": "launch",
      "version": "dev",
      "name": "vuejs: launch Edge(Chromium)",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "userDataDir": false,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: launch firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    },
    {
      "type": "firefox",
      "request": "attach",
      "reAttach": true,
      "name": "vuejs: attach firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
  ]
}

launch模式

launch模式就是重新打开一个浏览器实例(不是tab)。

attach模式

attach模式,是附加到现在已经打开的浏览器调试端口上,所以需要你在已经打开的浏览器中访问launch.json中配置的网站地址。

attach模式的tab窗口选择

chrome配置

  • windows

chrome配置远程调试端口

  • mac

    终端执行: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

  • Linux

    终端执行: google-chrome --remote-debugging-port=9222

Edge(Chromium)

  • windows

Edge(Chromium)调试端口配置

命令行:msedge.exe --remote-debugging-port=2015

  • mac和Liunx现在官方没说怎么调试…..

Microsoft Edge (EdgeHTML)

  • windows

    命令行: microsoftedge.exe --devtools-server-port=2015

    竟然不能快捷方式配置,不科学。

个人建议

个人建议平时开发,把端口配置到快捷方式,使用attach模式可以共享使用已经安装的浏览器插件。

具体还有很多参数配置,可以参考官方文档。

参考

debugger-for-chrome

debugger-for-edge

vscode-chrome-debug-github

vscode-recipes

devtools-protocol-chromium

devtools-protocol-edge

nodejs-debugging

今天的文章前端小纠结–VS Code调试配置分享分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20565.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注