vscode 调试 帮助你快递开发

2024年5月15日 164次阅读 来源: wang

前端不只是只能在浏览器调试，现在越来越多单页面，在编辑器里面进行调试将大大提高你的开发效率~~

1、调试vue 开发环境需要打开 source-map 方便调试 workspaceRoot 为根路径

在 launch.json 中配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8087",  // 8087 为你启动vue项目的端口
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ]
}

然后按 F5 就会启动一个google 的页面在编辑器里就可以打断点了

2、调试 node 环境下某个 js 文件

{
  "version": "0.2.0",
  "configurations": [
    // 此为数组可以写多个
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/build/creat.js"  
    },
  ]
}

3、调试 node 后台项目 注意：自己写node时候一般是 node ./bin/www 启动一个服务，调试时候不需要启动直接 按 F5 启动调试即可(会自动启动服务) 否则会导致端口冲突调试失败

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}\\bin\\www"
    }
  ]
}
    原文作者：wang
    原文地址: https://segmentfault.com/a/1190000020007898
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞