利用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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 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 设计模式之 单例模式
2008/12/19 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Django框架视图介绍与使用详解
2019/07/18 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
机关单位动员会主持词
2014/03/20 职场文书
公司请假条格式
2014/04/11 职场文书
促销活动计划书
2014/05/02 职场文书
诚信考试标语
2014/06/24 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android