利用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下弹出窗口的变通
Apr 18 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
微信小程序版翻牌小游戏
Jan 26 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
中队活动总结
2014/08/27 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
mysql left join快速转inner join的过程
2021/06/30 MySQL