利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)


Posted in Javascript onFebruary 16, 2017

前提

Node.js 6.3+, 这个可上Node.js官网自行下载;

Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行。

配置

就目前来说,在浏览器端并行调试JavaScript与Node.js还属于新特性,新体验。为了能够正常使用,你还需要做如下配置:

1、输入url:chrome://flags/#enable-devtools-experiments. 注:如果使用中文版Chrome,显示的配置项名称应该为: 开发者工具实验性功能 ,如下图;

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

2、启用它;

3、重启Chrome;

4、打开 DevTools Setting -> Experiments 页卡;

5、找到 Node debugging , 勾选.

最后应该能看到类似下图,表示环境已准备好:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

调试

调试很简单,像普通的js文件一样,利用DevTools进行断点调试.

运行Node.js app

需要在debug模式下运行Node.js应用,很简单,只要添加 ?inspect 参数即可。

node --inpect server.js

注:server.js 为我自己的应用文件,自定义,下图中为' node.js ‘。如果顺利的话,应该能看到类似下图信息:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

运行后,可以看到在 DevTools -> Sources 有 server.js 应用:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

展开后,可以查看当前node应用的js文件,至此,您已经可以利用Chrome进行并行调试操作了。

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

最后

使用此新版Chrome,还有许多其他的功能,比如在调试期间修改文件内容、保存文件快照等。

还要感谢原作者 Serg Hospodarets 的分享,好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可留言交流。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
vue实现多级菜单效果
Oct 19 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
js面向对象编程总结
Feb 16 #Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 #Javascript
JS实现DIV高度自适应窗口示例
Feb 16 #Javascript
Js apply方法详解
Feb 16 #Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 #Javascript
js实现文字无缝向上滚动
Feb 16 #Javascript
node学习记录之搭建web服务器教程
Feb 16 #Javascript
You might like
php变量作用域的深入解析
2013/06/03 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python MD5加密实例详解
2017/08/02 Python
Python实现的科学计算器功能示例
2017/08/04 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python安装scipy的方法步骤
2019/06/26 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
十周年庆典策划方案
2014/06/03 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
建党伟业的观后感
2015/06/01 职场文书
找规律教学反思
2016/02/23 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python装饰器的练习题
2021/11/23 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server