vscode调试学习

肥乐
733 阅读3分钟

日常开发调试存在的问题

在我们日常开发中我们使用最多的调试工具就是debugger和console.log(),但是在我们实际项目打包发布上去以后我们./dist/app.js文件就是我们入口文件,最终所有的代码都会编译转换成我们浏览器可以识别的代码,此时我们在测试或者生产上面去进去调试就会非常困难,那么有没有其他的办法我们不管在什么环境我们都可以进行调试debug呢?

解决方案

VSCode 调试中 launch.json 配置不完全指南

调试node.js

demo

// File: main/index.js
const fs = require('fs')
const path = require('path')
require('http').createServer((req, res) => {
    if (req.url === '/') { 
        fs.createReadStream( path.join(__dirname, '../index.html') ).pipe(res); 
    } else {
        res.end(req.url); } 
    }).listen(8001, () => { 
       console.log('run at 8001'); 
 });

建立.vscode文件=> 建立launch.json文件=>配置launch.json

image.png

  • launch.json
{
    // 使用 IntelliSense 了解相关属性。 
     // 悬停以查看现有属性的描述。
     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
     "configurations": [
         {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/main/index.js"
         }
    ]
 }

launch.json配置详解

(vscode调试: code.visualstudio.com/docs/editor…)

  • type- 用于此启动配置的调试器类型。每个已安装的调试扩展都引入了一种类型：node例如，用于内置 Node 调试器，或者php和go用于 PHP 和 Go 扩展。chorme用于调用chrome的工作台去调试

  • request- 此启动配置的请求类型。目前，launch并attach受支持。 前者的意思就是 VSCode 会打开这个程序然后进入调试，后者的意思是你已经打开了程序，然后接通 Node.js 的 内部调试协议进行调试

  • name - 显示在调试启动配置下拉列表中的易于阅读的名称 以下是所有启动配置可用的一些可选属性：

  • presentation-使用order，group和hidden在属性presentation对象，可以进行排序，在调试配置下拉菜单，并在调试组，和隐藏的构造和化合物快速挑选。

  • preLaunchTask- 要在调试会话开始之前启动任务，请将此属性设置为tasks.json中指定的任务标签（在工作区的.vscode文件夹中）。或者，这可以设置${defaultBuildTask}为使用您的默认构建任务。

  • postDebugTask- 要在调试会话的最后启动任务，请将此属性设置为tasks.json（在工作区的.vscode文件夹中）中指定的任务的名称。

  • internalConsoleOptions - 此属性控制调试会话期间调试控制台面板的可见性。

  • debugServer-仅适用于调试扩展作者：此属性允许您连接到指定端口而不是启动调试适配器。

  • serverReadyAction- 如果您想在调试中的程序向调试控制台或集成终端输出特定消息时在 Web 浏览器中打开 URL。有关详细信息，请参阅下面的调试服务器程序时自动打开 URI部分。

许多调试器支持以下一些属性：

  • program - 启动调试器时要运行的可执行文件或文件
  • args - 传递给程序以进行调试的参数
  • env- 环境变量（该值null可用于“取消定义”变量）
  • envFile - 带有环境变量的 dotenv 文件的路径
  • cwd - 用于查找依赖项和其他文件的当前工作目录
  • port - 附加到正在运行的进程时的端口
  • stopOnEntry - 程序启动时立即中断
  • console-什么样的控制台来使用，例如internalConsole，integratedTerminal或externalTerminal
  • runtimeExecutable 设置运行时可执行文件路径，默认是node 可以是其他的执行程序，如npm、nodemon
  • runtimeArgs 传递给运行时可执行文件的参数,例如：
{ 
    "type": "node", 
    "request": "launch", 
    "name": "npm launch app", 
    "args":["a"], 
    "runtimeExecutable": "npm", 
    "runtimeArgs": [ "run-script", "app", "b" ],
    "port": 6666 }
}

打印参数可以发现 args 、runtimeArgs都会传给程序，但是runtimeArgs参数会紧跟可执行文件

image.png

变量替换#

(参考变量: code.visualstudio.com/docs/editor…) ${workspaceFolder}给出工作区文件夹的根路径、`

  • ${workspaceFolder} - 在 VS Code 中打开的文件夹的路径
  • ${file}在活动编辑器中打开的文件以及
  • ${env:Name}环境变量“名称”。

点击调试

1637916504(1).png

image.png

调试一个 TS Node 程序

当我们调试一个ts文件的话我们node环境是无法识别ts代码的,我们首先要配置tsconfig.json基本项,然后执行launch.json过程中去读取tasks.json的配置,内部会去读取tsconfig.json的配置,编译我们代码或者使用ts-node依赖包和typescript依赖包

  • 前提条件安装 typescript 和 ts-node 两个依赖 配置tsconfig.json
{
    "compilerOptions": {
      "module": "commonjs",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true,
      "outDir": "./out"
    },
    "include": [
      "test/**/*.ts"
    ],
    "exclude": [
      "node_modules",
      "**/*.spec.ts"
    ]
  }

配置launch.json

{ 
    "name": "调试 TS Node 程序 - args", 
    "type": "node",
    "request": "launch", 
    "runtimeExecutable": "node", 
    "runtimeArgs": [ "-r", "ts-node/register" ], 
    "args": [ "${workspaceFolder}/test/index.ts" ]
}

或者

{ 
    "name": "[错误]调试 TS Node 程序 - ts-node",
    "type": "node",
    "request": "launch",
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node", 
    "args": [ "${workspaceFolder}/test/index.ts" 
    ] }

注意在其他文章参考里面可能runtimeArgs 是为 runtimeExecutable环境提供的配置，而 args 是为程序提供的配置在启动时为 node 注入一个 ts-node/register 模块，以便可以执行 ts 类型的文件。实际执行代码为：

node --inspect-brk=DEBUG_PORT -r ts-node/register ./test/index.ts

但是本人在项目创建以及配置过程中没有看到这个,只有node -r ts-node/register ./test/index.ts这个,所以两种方案对我没有什么区别影响,但是有其他博主有不同的问题,大家视具体情况具体分析

  • 没有依赖包方案

配置tasks.json

{
    "label": "tsc_build", 
    "type": "typescript", 
    "tsconfig": "tsconfig.json"
}

配置launch.json

{
    "name": "调试 TS Node 程序 - preTask", 
    "type": "node", 
    "request": "launch",
    "program": "${workspaceFolder}/out/index.js", 
    "preLaunchTask": "tsc_build"
}

调试已启动的 Node.js 程序

{ 
    "name": "Attach to node", 
    "type": "node",
    "request": "attach", 
    "processId": "${command:PickProcess}"
}

启动

node src/index.js

调试网页的 JS 代码

{ 
    "name": "调试网页的 JS 文件", 
    "request": "launch", 
    "type": "chrome",
    "file": "${workspaceFolder}/index.html" 
}

注意，这里的 type 是 chrome，默认会启动一个 Chrome 浏览器（新用户）加载 file 字段对应的文件地址（通过 file:// 协议加载），文件中用到的 JS 都可以断点调试。当然你也可以起一个 Web Server 来调试 http:// 协议的文件，这里就需要设置 webRoot 和 url 参数了，可自行 Google。

参考资料: juejin.cn/post/684490…
juejin.cn/post/684490…

avatar
文章
阅读
粉丝