使用webstorm调试node程序

前言

相信大家接触过不少node代码了,如果你应用的比较初级或者针对你的项目不需要接触过深的node代码,也许你仅仅需要简单的console.log(‘your variable‘)就完全满足你的需要了。如果你应用node比较深入,想要调试(debug)之,我想你应该接触过node-inspector,大致用法流程,简单如下——

1.安装:npm install -g node-inspector
2.启动debug模式(单独命令行):
    node-debug &(该命令默认8080端口)
    node-debug --web-port 1984 (定义任意端口)
3.访问chrome debug devTools
  路径如:http://127.0.0.1:1984/?ws=127.0.0.1:1984&port=5858
4.启动gulp或者grunt服务(具有gulp或者grunt任务时)
  node --debug-brk $(which grunt) server (这种模式使用在第一次初始化执行的代码)
  node --debug $(which grunt) server(这种模式使用在初始化之后监听的node代码)

调试面板与chrome developer tools基本一致,很熟悉,知道怎么使用chrome的,都知道怎么玩儿好它,没什么学习成本。

在这里,主要介绍一下使用webstorm去调试node代码,之前在网上各种搜索了一番,不是很靠谱,所以,自己多做了些尝试与思考,在这儿汇总总结,希望可以帮助到使用webstorm的同学。

如果你不知道webstorm,好吧,看看官方介绍吧。对于编辑器的选择,每个人都有不同观点,在此不讨论。只是个人用过eclipse(aptana)、sublime text、webstorm,一步步小小进阶,便对webstorm爱不释手了,功能非常强大,集成度确实比较高。基本的用法有机会再详细讨论,这里只介绍如果调试node程序。

如果你玩儿过java,使用eclipse调试起来,确实方便。或者你玩儿php,相信phpstorm调试php代码也非常不错。如果有个IDE同样能够调试Node,那就太赞了。没错,一个webstorm搞定这些。

主要按照如下目录介绍——

1.调试nodejs程序——常规用法(run/debug模式)、调试面板等介绍
2.调试gulp/grunt
3.调试web应用

1.调试nodejs程序

如下图——

可以看到在23行打了一个断点。想要断点起作用,那么需要对该文件做debug配置——

Run模式,直接运行该文件,不会对断点起作用,此时,可以通过打日志(console.log)的方式进行调试,它会顺序执行该js文件,并不需要有入口方法或者入口类等等(不同于java)。

接下来可进行配置——

点击“Debug”之后,会看到——

就可以看到,代码debug于23行了。同时在下方的Debug面板中,能够看到Debug toolbar和Stepping toolbar,至于两个toolbar的说明,看看官方IntelliJ IDEA的说明即可,附上链接地址:http://www.jetbrains.com/idea/help/debug-tool-window.html

启动debug,更便捷的方式,就是该文件右键后,选在debug即可。看下图——

以上,可以调试简单的node程序代码,操作很简单,也很方便。接下来,看看如何调试gulp任务(grunt类似,就不列举了)。

2. 调试gulp

在对应的gulpfile.js文件上面,右键即可,如下图——

选择“Create ‘clean‘”用来添加配置并启动debug;若选择“Debug ‘clean‘”可以直接进行调试。

如果你的任务并没有在gulpfile.js文件中声明,同样可以打开配置对话框进行配置,如下:

注意在gulpfile.js内部进行操作,它需要加载所有的任务名称,这样调试才会有效。会看到调试页面如下——

如上图,我们看见了程序走到50行断点处,承接以上,继续说一下如何调试web应用。

3.调试web应用

如上图,我们已完成gulp任务的断点调试的配置(针对非gulp任务的普通node程序,同样如是),当web进行访问时,自然会再对应断点处停下,如——

也可以看到对应浏览器一直处于加载状态,如下图——

如果想要对request对象中传递的参数进行查看的话,如——

OK,调试web应用介绍到这儿。

从各个应用分类(node普通程序调试、gulp/grunt任务调试、web调试等)的角度,对应的调试的配置及方法介绍到这儿。比较简单、便捷。

希望读到这篇文章的你,可以试试webstorm,或许你也会爱上它。

时间: 2024-10-19 16:58:18

使用webstorm调试node程序的相关文章

使用WebStorm调试node工程

coder比较偏好debug,调试node比较麻烦,我们借助高大上的工具webStorm(我用的是10)来调试node,配置也比较简单,直接上图: 首先,配置node环境,在导航栏选择"Edit/configuration", 接下来配置 注:javascript file 为node的入口 到这里还没有结束,还需要配置远程调试,在上面的窗口中,选择defaults中的 node.js remote debug: 下面就可以debug了,入口在这里:

webstorm调试Node的时候配置

点击Edit Configurations的这个的配置:(不能点击是因为目前你选中的不是项目)

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

vscode 调试node.js

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

用node-inspector调试Node.js(转自NOANYLOVE'S BLOG)

原文地址:http://www.noanylove.com/2011/12/node-the-inspector-debugging-node-js/ 用node-inspector调试Node.js 2011年12月15日 | 标签: JavaScript, Node.js, 调试 重要:因为node和node-inspector更新了的缘故,现在的界面有一些不同,抽空我会更新一下.另外,下面的debug参数前应该是两个“-”,不知道为什么显示出来只有一个“-”.比较郁闷. 据说,一个程序员一

Node程序debug小记

有时候,所见并不是所得,有些包,你需要去翻他的源码才知道为什么会这样.用Console来Debug 背景 今天调试一个程序,用到了一个很久之前的NPM包,名为formstream,用来将form表单数据转换为流的形式进行接口调用时的数据传递. 这是一个几年前的项目,所以使用的是Generator+co实现的异步流程. 其中有这样一个功能,从某处获取一些图片URL,并将URL以及一些其他的常规参数组装到一起,调用另外的一个服务,将数据发送过去. 大致是这样的代码: const co = requi

使用webstorm调试Hexo

之前在编辑hexo下的插件的时候,就觉得用notepad++有点麻烦,需要确认的都要打印出来,因此考虑使用用惯了的编辑器WebStorm,但是会者不难,难者不会,牵扯到hexo命令,确实有点挠头,查找了半天,还绕了一个弯才最终解决. 如何做 说麻烦麻烦,说简单其实也很简单,就是需要做了一个配置而已. 我使用的环境是WebStorm,其他版本应该类似: Run-->Edit Configurations... 如上图,选好Node的位置,设定好工作目录.稍微有点不一样的是,启动文件选择node_m

使用Chrome DevTools直接调试Node.js与JavaScript(并行)

Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行. 配置 就目前来说,在浏览器端并行调试JavaScript与Node.js还属于新特性,新体验.为了能够正常使用,你还需要做如下配置: 输入url:chrome://flags/#enable-devtools-experime

亲测VS2010纯静态编译QT4.8.0,实现VS2010编译调试Qt程序,QtCreator静态发布程序(图文并茂,非常详细)

下载源代码,注意一定是源码压缩包如qt-everywhere-opensource-src-4.8.0.zip,不是Qt发布的已编译的不同版本的标准库如qt-win-opensource-4.8.0-vs2010.exe,这些版本都只是动态编译的,不是我们所需要的.只有用源码包才能做真正的纯静态编译,如果用Qt官网已编译的标准库.exe文件进行编译,有可能出现各种错误,而且编译后的文件巨大,我当时就在这里绕了很大的弯子,请童鞋们注意啦!!可能有些老鸟会笑话,但我本着最严肃的态度告诉菜鸟们,上网查