vscode 调试 帮助你快递开发

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

一、调试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 的页面在编辑器里就能够打断点了

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

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

三、调试 node 后台项目 注意：本身写node时候通常是 node ./bin/www 启动一个服务，调试时候不须要启动直接 按 F5 启动调试便可(会自动启动服务) 不然会致使端口冲突调试失败

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}\\bin\\www"
    }
  ]
}