利用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,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
javascript制作2048游戏
Mar 30 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
详解babel升级到7.X采坑总结
May 12 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python调用C语言程序方法解析
2020/07/07 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
宣传策划类求职信范文
2014/01/31 职场文书
两只小狮子教学反思
2014/02/05 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
垃圾桶标语
2014/06/24 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
财政局个人总结
2015/03/04 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
python中super()函数的理解与基本使用
2021/08/30 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js