上篇文章介绍了如何在chrome下调试nodejs代码(请访问:),本篇文章将介绍如何在VSCode下调试nodejs的代码。
个人觉得这种方式调试js代码最为简便,推荐!

本机vscode环境:

vscode JavaScript Debugger调试 vscode调试js代码_vscode

1,打开vscode后,点击左边像虫子一样的调试图标

vscode JavaScript Debugger调试 vscode调试js代码_javascript_02


2,创建launch.json文件

点击进入调试页面后,会有两种可能出现的页面情况

第一种:点击齿轮图标

vscode JavaScript Debugger调试 vscode调试js代码_vscode_03


第二种:点击 create a launch.json file

vscode JavaScript Debugger调试 vscode调试js代码_vscode_04


点击后,会自动创建一个launch.json文件,该文件就是vscode的启动配置文件。如果没有自动创建,会提示一个选择环境的搜索框,选择node.js即可完成launch.json文件的创建

vscode JavaScript Debugger调试 vscode调试js代码_launch.json_05


完成创建后,当前项目的根目录会自动创建一个.vscode的文件夹,launch.json文件就放在该文件夹中

vscode JavaScript Debugger调试 vscode调试js代码_调试_06


3,配置启动文件将launch.json文件中program字段的index.js改成需要调试的js文件在本工程中的相对路径

vscode JavaScript Debugger调试 vscode调试js代码_调试_07


4,开始调试

launch.json文件有个configurations字段,该字段是一个数组,数组中每个元素对应一个启动配置,每个元素的name就是该启动配置的名称,可以在调试之前选择需要调试的配置

在调试页面,选择需要调试的配置,然后点击绿颜色的run按钮开始调试

vscode JavaScript Debugger调试 vscode调试js代码_node_08


5,断点调试在运行之前,在需要打断点的地方打上断点标记(鼠标移到对应的行的行头,会有一个小红点提示,点击一下就会打上断点)

vscode JavaScript Debugger调试 vscode调试js代码_调试_09


程序运行到断点处后会暂停,左边调试栏有当前上下文的变量值,窗口上部也会出现断点调试的工具栏

vscode JavaScript Debugger调试 vscode调试js代码_调试_10

如上就可以愉快的使用vscode来调试js代码了,如果想了解更多的vscode调试技巧,可以访问vscode的官方网站:https://code.visualstudio.com/docs/editor/debugging

如果想了解更多其它开发工具调试node的方法,可以访问node的官网,有简洁的介绍可供参考:
https://nodejs.org/zh-cn/docs/guides/debugging-getting-started/

网页截图如下:

vscode JavaScript Debugger调试 vscode调试js代码_node_11