在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序。
下面的记录显示了在一个 HTTP 服务器中设置断点的情况。
该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起。它的目的在于为调试、分析和开发 Node.js 应用程序提供一个简单的界面。
你可以使用 npm 来安装它:
npm install -g devtool
在某种程度上,我们可以用它来作为 node
shell 命令的替代品。例如,我们可以这样打开一个 REPL (译者注: REPL 全称为”Read-Eval-Print Loop”,是一个简单的、交互式的编程环境)。
devtool
这将启动一个带有 Node.js 特性支持的 Chrome 开发者工具实例。
我们可以引用 Node 模块、本地 npm 模块和像 process.cwd()
这样的内置模块。也可以获取像 copy()
和 table()
这样的 Chrome 开发者工具中的函数。
其他的例子就一目了然了:
# run a Node scriptdevtool app.js
# pipe in content to process.stdindevtool < audio.mp3
# pipe in JavaScript to eval itbrowserify index.js | devtool
run a Node script
我们可以在通用模块和应用程序的开发中使用 devtool
,来代替像 nodemon 这样目前已经存在的工具。
devtool app.js --watch
这行命令将会在 Chrome 开发者工具中的控制台中启动我们的 app.js
, 通过 --watch
参数,我们保存的文件将(自动)重新载入到控制台。
点击 app.js:1
链接,程序将会在 Sources
标签中把我们带到与之相关的那一行。
在 Sources
标签中,你也可以敲击 Cmd/Ctrl + P
按键在所有依赖的模块中进行快速搜索。你甚至可以审查和调试内置模块,比如 Node.js 中的那些。你也可以使用左手边的面板来浏览模块。
因为我们能够访问 Sources
标签,所以我们可以用它来调试我们的应用程序。你可以设置一个断点,然后重新加载调试器( Cmd/Ctrl + R
),或者你也可以通过 --break
标记来设置一个初始断点。
devtool app.js --break
下面是一些对于那些学习 Chrome 开发者工具的人来说可能不是特别常用的功能:
- 条件断点
- 有未捕获的异常时暂停
- 重启帧
- 监听表达式
提示 - 当调试器暂停时,你可以敲击 Escape
按键打开一个执行在当前作用域内的控制台。你可以修改一些变量然后继续执行。
devtool
的另一个功能是分析像 browserify , gulp 和 babel 这样的程序。
这里我们使用 console.profile()
(Chrome 的一个功能)来分析一个打包工具的 CPU 使用情况。
var browserify = require('browserify'); // Start DevTools profiling...console.profile('build'); // Bundle some browser applicationbrowserify('client.js').bundle(function (err, src) {if (err) throw err; // Finish DevTools profiling... console.profileEnd('build');});
现在我们在这个文件上运行 devtool
:
devtool app.js
执行之后,我们可以在 Profiles
标签中看到结果。
我们可以使用右边的链接来查看和调试执行频率较高的代码路径。
高级选项
Chrome 会不断的向他们的开发者工具中推送新功能和实验,例如 Promise Inspector 。你可以通过点击右上角的三个点,然后选择 Settings -> Experiments
来开启他们。
一旦启用,你就可以通过敲击 Escape
按键来调出一个带有 Promises 监视器的面板。
提示: 在 Experiments 界面,如果你敲击 Shift
键 6 次,你会接触到一些甚至更多的实验性(不稳定)的功能。
--console
你可以重定向控制台输出到终端中( process.stdout
和 process.stderr
)。也允许你通过使用管道将它导入到其他进程中,例如 TAP prettifiers。
devtool test.js --console | tap-spec
--
和 process.argv
你的脚本可以像一个普通的 Node.js 应用那样解析 process.argv
。如果你在 devtool
命令中传递一个句号( --
),它后面的所有内容都会被当做一个新的 process.argv
。例如:
devtool script.js --console -- input.txt
现在,你的脚本看起来像这样:
var file = process.argv[2];console.log('File: %s', file);
输出:
File: input.txt
--quit
和 --headless
使用 --quit
,当遇到了一个错误(如语法错误或者未捕获的异常)时,进程将会安静的退出,并返回结束码 1
。
使用 --headless
,开发工具将不会被打开。
这可以用于命令行脚本:
devtool render.js --quit --headless > result.png
--browser-field
一些模块为了更好的在浏览器中运行或许会提供一个入口点。当你需要这些模块时,你可以使用 --browser-field
来支持 package.json flag
例如,我们可以使用 xhr-request ,当带有 "browser"
字段被引用时,这个模块会使用 XHR。
const request = require('xhr-request'); request('https://api.github.com/users/mattdesl/repos', { json: true}, (err, data) => {if (err) throw err; console.log(data);});
在 shell 中执行:
npm install xhr-request --savedevtool app.js --browser-field
现在,我们可以在 Network
选项卡中审查请求:
--no-node-timers
默认情况下,我们提供全局的 setTimeout
and setInterval
,因此他们表现的像 Node.js 一样(返回一个带有 unref()
and ref()
函数的对象)。
但是,你可以禁用这个方法来改善对异步堆栈跟踪的支持。
devtool app.js --no-node-timers
V8 Flags
在当前目录,你可以创建一个 .devtoolrc
文件来进行诸如 V8 flags 这样的高级设置。
{"v8": {"flags": ["--harmony-destructuring" ] }}
访问 这里 获取更多细节
由于程序是在一个 Browser/Electron 环境中运行,而不是在一个真正的 Node.js 环境中。因此这里有 一些陷阱 你需要注意。
目前已经存在了一些 Node.js 调试器,所以你或许想知道他们之间的区别在哪。
WebStorm 调试器
WebStorm 编辑器里面包含了一个非常强大的 Node.js 调试器。如果你已经使用 WebStorm 作为你的代码编辑器,那对你来说很棒。
但是,它缺少一些 Chrome 开发者工具中的功能,例如:
- 一个丰富的互动的控制台
- 异常时暂停
- 异步堆栈跟踪
- Promise 检查
- 分析
但因为你和你的 WebStorm 工作空间集成,所以你可以在调试时修改和编辑你的文件。它也是运行在一个真正的 Node/V8 环境中,而不像 devtool
一样。因此对于大部分的 Node.js 应用程序来说它更稳健。
iron-node
一个同样基于 Electron 的调试器是 iron-node 。 iron-node
包含了一个内置的命令来重新编译原生插件,还有一个复杂的图形界面显示您的 package.json
和 README.md
。
而 devtool
更侧重于把命令行、Unix 风格的管道和重定向和 Electron/Browser 的 API 当作有趣的用例。
devtool
提供各种各样的功能来表现的更像 Node.js (例如 require.main
, setTimeout
和 process.exit
),并且覆盖了内部的 require
机制作为 source maps,还有改进过的错误处理、断点注入、以及 "browser"
字段的解决方案。
node-inspector
你或许也喜欢 node-inspector ,一个使用远程调试而不是构建在 Electron 之上的工具。
这意味着你的代码将运行在一个真正的 Node 环境中,没有任何 window
或其他的 Browser/Electron API 来污染作用域并导致某些模块出现问题。对于大型 Node.js 应用(即本地插件)来说它有一个强有力的支持,并且在开发者工具实例中拥有更多的控制权(即可以注入断点和支持网络请求)。
然而,由于它重新实现了大量的调试技巧,因此对于开发来说感觉可能比最新版的 Chrome 开发者工具要慢、笨拙和脆弱。它经常会崩溃,往往导致 Node.js 开发人员很无奈。
而 devtool
的目的是让那些从 Chrome 开发者工具中转过来的人觉得比较亲切,而且也增加了像 Browser/Electron APIs 这样的功能。
在 Chrome 开发者工具中调试 node.js相关推荐
- 请参阅:Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
- nodejs --inspect-brk结合Chrome开发者工具的调试
命令行 node --inspect-brk 启动nodejs应用: 然后打开Chrome,在地址栏里输入chrome://inspect,点击inspect按钮: 就可以在Chrome开发者工具里调 ...
- 在chrome开发者工具中观察函数调用栈、作用域链、闭包
在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...
- Chrome开发者工具中Elements(元素)断点的用途
2019独角兽企业重金招聘Python工程师标准>>> SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行J ...
- android allow usb debugging,远程调试Android设备 - Chrome 开发者工具中文文档
在Windows,Mac 或 Linux 上远程调试 Android 设备上的实时内容. TL;DR 设置你的Android设备进行远程调试,并从开发机中发现它. 从您的开发机器检查和调试Androi ...
- 企业微信H5在微信开发者工具中调试:
1. 给开发者添加企业微信管理员 2. 开发者--网页登录企业微信官网,找到"我的企业"下"微信插件",勾选"开发者工具". 3. 顺利进行 ...
- Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- 如何调试Node.js应用程序?
如何调试Node.js服务器应用程序? 现在,我主要使用带有以下打印语句的警报调试 : sys.puts(sys.inspect(someVariable)); 必须有更好的调试方法. 我知道Goog ...
最新文章
- ATT与Intel汇编语言的比较
- java中的equals方法
- apple music有一点坏处。。这个乱码有点不本土化啊
- 软件结构B/S和C/S
- 跟随器反馈回路电阻_如何将短反馈回路设置为单独编码器
- c++中wstring 和 string的转换
- Jungle Roads//最小生成树kruskal
- 容器技术Docker K8s 11 容器服务Kubernetes版ACK详解-集群查看及管理
- python 文件操作新姿势 pathlib模块的详细使用
- mysql内置函数大全
- 7.4 SiamFC
- beetl模板使用场景_BeetlSQL3性能
- 水星无线路由启动dhcp服务器,水星无线路由器桥接设置桥接(图文详解) | 192.168.1.1登陆页面...
- 摩斯电码php源码,摩斯密码: 用php实现摩斯密码 morse
- 广告roi怎么计算公式_【图】- 什么是ROI?ROI计算公式?ROI的影响因素 - 杭州江干九堡广告媒体 - 杭州百姓网...
- 测坐标天幕靶软件设计_测速天幕靶检定装置与检定方法
- Todesk远程连接时一直显示密码错误
- oracle 信用检查,Oracle EBS 信用(Credit)额度(1)
- Linux基础 linux账号及权限管理
- 两个平板打天下-将中国看做一个城市圈,漉战移动互联网、高铁时代
热门文章
- mysql json类型数组索引_MySQL JSON 类型数据操作
- android设置为存储设备,我可以从格式化为内部存储器的Android SD卡或USB驱动器中恢复数据吗? | MOS86...
- sql server ssl安全错误_Nginx的这些安全设置,你都知道吗?
- 异步通知是什么意思_一次相亲经历,我彻底搞懂了阻塞非阻塞、同步异步
- 简单介绍numpy实现RNN原理实现
- 卵巢鸿蒙不全怎么检查,性激素六项如何看黄体功能萎缩不全
- runtime 分类结构体_水性木器涂料的5大分类+4大配方事项
- poj1523(割点)
- Is It A Tree?
- 组合计数 ---- 732 Div2 D. AquaMoon and Chess