利用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 相关文章推荐
今天是星期几的4种JS代码写法
Sep 17 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
理解javascript中的闭包
Jan 11 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
爬虫利器Puppeteer实战
Jan 09 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python Xpath语法的使用
2020/11/26 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
初二生物教学反思
2014/02/03 职场文书
体育教学随笔感言
2014/02/24 职场文书
政工例会汇报材料
2014/08/26 职场文书
车辆委托书范本
2014/10/05 职场文书
大学生实训报告总结
2014/11/05 职场文书
客户付款通知书
2015/04/23 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
 python中的元类metaclass详情
2022/05/30 Python