利用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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
javascript元素动态创建实现方法
May 13 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python中的yield浅析
2014/06/16 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python3爬虫之设计签名小程序
2018/06/19 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python数据可视化图实现过程详解
2020/06/12 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
暑期实践思想汇报
2014/01/06 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
导游词之神仙居景区
2019/11/15 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript