使用VSCode打断点debug javascript / typescript

不念不忘少年蓝@ 2022-12-24 12:59 329阅读 0赞

我们经常在浏览器的`devtools`中使用debug工具去调试代码，那么如果我运行的是Nodejs，也就是运行环境是nodejs, 那么应该如何debug打断点呢？

其实VSCode已经内部集成了调试工具，专门针对nodejs运行环境的，如果你需要debug其他的运行环境，你还需要安装对应的插件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
以上是一些插件，可以根据选择自行下载，本次只是针对于Nodejs。VSCode已经内部集成了。

使用起来也很简单，点击最左侧的`bug`的图标，会显示如下三个按钮。此处我新建了一个debug.js的文件，并打了一个断点，然后点击第一个按钮`Run and Debug`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]  
如下图，断点就已经生效了，是不是很easy?  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]  
值得注意的是，上面的方式只能debug**当前窗口文件**，如果需要复杂的配置，比如像下面这样：

*  指定某个文件作为入口文件
 *  指定当前的debug环境是Node
 *  为程序运行时指定参数

以上等等特殊配置，就需要单独创建配置文件，在上面的截图中也看到，`create a lanuch.json file`点击后就会在你的项目目录中创建一个`.vscode/lanuch.json`的配置文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 3]  
以上，其实内置的调试工具不仅可以调试JS，也可以调试TS，不妨直接来试试。

Uncaught /Users/yananliu/temp/learn-debugger/debugTs.ts:1
    const helloTs: string = "hello typescript";
          ^^^^^^^
    
    SyntaxError: Missing initializer in const declaration

可惜很不幸，报错了，原因是需要将ts转换为js，才能执行。实际上只要生成了sourceMap，VSCode会自动映射到ts源文件中。具体做法如下：

需要添加`tsconfig.json`文件来配置生成sourceMap，然后再次配置`launch.json`文件指明先编译后运行以及sourceMap和生成的js文件对应的目录。

**tsconfig.json**

{ 
      "compilerOptions": { 
        "target": "es5",
        "module": "commonjs",
        "outDir": "out",
        "sourceMap": true
      }
    }

**launch.json**

{ 
      // 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": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${workspaceFolder}/helloworld.ts",
          "preLaunchTask": "tsc: build - tsconfig.json",
          "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }
      ]
    }

之后重新点击运行，看是不是可以了:)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/1d7c98fdeaab4ae28709858da67fcebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201128145908160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201128145235756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201128151034248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201128153559610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng==,size_16,color_FFFFFF,t_70