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

栏目: JavaScript · 发布时间: 5年前

内容简介:这不是一篇科普文,只是一篇浏览器调试配置的分享(主要对准对准vs code调试)使用vs code插件debugger-for-chrome和很多的配置参数,具体看参考章节的

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

调试配置

使用vs code插件debugger-for-chrome和 debugger-for-edge(EdgeHTML&Chromium) 调试之前,会自动在工程下添加 .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",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

复制代码

launch模式

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

attach模式

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

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

chrome配置

  • windows
前端小纠结--VS Code调试配置分享
  • mac

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

  • Linux

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

Edge(Chromium)

  • windows
前端小纠结--VS Code调试配置分享

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

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

Microsoft Edge (EdgeHTML)

  • windows

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

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

个人建议

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

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


以上所述就是小编给大家介绍的《前端小纠结--VS Code调试配置分享》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Building Websites with Joomla!

Building Websites with Joomla!

H Graf / Packt Publishing / 2006-01-20 / USD 44.99

This book is a fast paced tutorial to creating a website using Joomla!. If you've never used Joomla!, or even any web content management system before, then this book will walk you through each step i......一起来看看 《Building Websites with Joomla!》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换