利用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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python内置数据类型详解
2014/08/18 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python之web模板应用
2017/12/26 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python分类测试代码实例汇总
2020/07/23 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
企业内部培训方案
2014/02/04 职场文书
完美的中文自荐信
2014/05/24 职场文书
宣传委员竞选稿
2015/11/19 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js