利用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刷新框架子页面的七种方法代码
Nov 20 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
js自定义瀑布流布局插件
May 16 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
yii用户注册表单验证实例
2015/12/26 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
详解python中的Turtle函数库
2018/11/19 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python while循环使用else语句代码实例
2020/02/07 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
园艺师求职信
2014/03/10 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书