利用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代码
Mar 06 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
JavaScript中reduce()的用法
May 11 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/03/27 PHP
php5中类的学习
2008/03/28 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python入门篇之字典
2014/10/17 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python模拟登陆实现代码
2017/06/14 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python列表如何更新值
2020/05/27 Python
Python自带的IDE在哪里
2020/07/01 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
美容院考勤制度
2014/01/30 职场文书
行政助理工作职责范本
2014/03/04 职场文书
班长演讲稿范文
2014/04/24 职场文书
贷款担保书
2015/01/20 职场文书
学校施工安全责任书
2015/01/29 职场文书
房租涨价通知
2015/04/23 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python