使用Webstorm调试nodejs项目

俗话说的好,“工欲善其事,必先利其器”,要想使用 Webstorm 更高效率的去开发 nodejs 项目,则必须要清楚如何使用 Webstorm 去调试我们的 nodejs 项目。在讲解如何调试 nodejs 项目之前,有必要先说说如何使用 Webstorm 去启动 nodejs 项目。

1.启动nodejs项目

启动一个 nodejs 项目可以直接通过在命令行输入:node ***.js 启动,而下面要介绍的是通过 IDE Webstorm 如何启动一个 nodejs 项目。

首先需要配置好相关信息,右上角打开 EditConfiguration :

添加一个 node.js:

在界面中输入如下信息:

  1. name : 随便取
  2. Node interpreter : 电脑上 node 安装路径
  3. Working directory : 项目路径
  4. Javascript file : 项目启动 js 文件,一般是项目根目录下的 app.js

保存,然后点击 Webstorm 右上角的三角形符号,会发现在正下方 run 控制台出现输出信息,并告知你服务已启动: http://localhost:3000,表明项目已启动。

2.调试nodejs项目

我们往往需要知道项目中的某个 function 可以一直追溯到何处,便可以通过打断点然后运行 debug 的形式追踪下去。这里要说明 webstorm 调试 nodejs 与 webstorm 调试 javascript 是完全不同的两个操作,相关配置也不同。 我们知道调试 javascript 的另一种方式是可以通过浏览器直接调试,例如 chrome 浏览器下直接右键选择工具即可,或者使用键盘快捷键 command + option + i(Mac) 即可打开;而在 webstorm 中调试 javascript ,需要进行相关配置,选择 webstorm 右上角的 EditConfiguration ,在出现的界面中添加一个javascript debug:

配置相关信息:

需要填写:

  1. name:随便取。
  2. url:需要调试的 js 文件路径。

配置好后选择保存,在相关 js 文件中添加断点,然后选择右上角的 js debug 配置服务器,选择甲虫形状的 debug 按钮即可进行调试。
相比较起来,个人觉得浏览器中的调试更为方便,相关信息可参考如下链接:webstorm下调试javascript总结

好了,说回正题,如何使用 webstorm 进行 nodejs 的相关调试呢?很简单,待完成了上述“ webstorm 启动 nodejs 项目”的配置后则无需再进行相关配置操作。只需在需要调试的地方打下断点,然后运行 webstorm 右上角 nodejs 服务器的甲虫形状的 debug 按钮即可:

正下方 debug 控制台出现输出信息,并告知你 local 服务已启动: http://localhost:3000 ,然后点进去通过浏览器进入到你的项目内部。待你运行到打断点处的功能时,浏览器会带你自动跳转回 webstorm 的 debug 控制台处,查看控制台的debugger选项,通过控制即可进行代码追踪。

3.心得

另外想总结下如何通过产品中的某个功能进入到项目的相应代码中。首先对着浏览器右键选择“检查”,进入到 network :

通过点击浏览器界面中的相关操作,下方也会出现对应的请求资源 request 与服务器返回的资源 response ,通过点击出现的相关资源,即可看到请求路径,然后通过请求路径在项目中通过全局搜索即可找到此操作对应在项目中的代码流程操作。

坚持原创技术分享,您的支持将鼓励我继续创作!