利用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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
js利用拖放实现添加删除
Aug 27 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.MVC的模板标签系统(五)
2006/09/05 PHP
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
Firefox div高度自适应
2009/04/28 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python实现爬山算法的思路详解
2019/04/09 Python
python调用支付宝支付接口流程
2019/08/15 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
钱塘江大潮导游词
2015/02/03 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python