命令行工具 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 script
devtool app.js # pipe in content to process.stdin
devtool < audio.mp3 # pipe in JavaScript to eval it
browserify 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 , gulpbabel 这样的程序。

这里我们使用 console.profile() (Chrome 的一个功能)来分析一个打包工具的 CPU 使用情况。

var browserify = require('browserify');

// Start DevTools profiling...
console.profile('build'); // Bundle some browser application
browserify('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.stdoutprocess.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 --save
devtool 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-nodeiron-node 包含了一个内置的命令来重新编译原生插件,还有一个复杂的图形界面显示您的 package.jsonREADME.md

devtool 更侧重于把命令行、Unix 风格的管道和重定向和 Electron/Browser 的 API 当作有趣的用例。

devtool 提供各种各样的功能来表现的更像 Node.js (例如 require.main , setTimeoutprocess.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的更多相关文章

  1. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  2. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...

  3. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

  4. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  5. 使用Chrome开发者工具远程调试原生Android上的H5页面

    Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容.具体步骤如下: (1)设置Webview调试模式 可以在Ac ...

  6. 前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在前端开发中,有一个非常重要的技能,叫做断点调试. 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象, ...

  7. Chrome 开发者工具中的命令菜单

    单 大家对命令菜单(Command Menu)应该都不陌生.目前主流的编辑器中都内置了对该功能的支持.在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ct ...

  8. 在chrome开发者工具中观察函数调用栈、作用域链、闭包

    在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...

  9. Chrome开发者工具中Elements(元素)断点的用途

    SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...

随机推荐

  1. mac 连接windows 共享内容

    mac 连接windows 共享内容 一:场景 在win7上下载了一个5G左右的系统文件,想弄到mac上,本打算用使用U盘,把文件从win7copy到mac电脑上: 可是U盘的分区是fat的,大于4G ...

  2. Struts2(三)更改字符编码

    一.导入包和struts配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE stru ...

  3. Java从零开始学九(数组)

    一.什么是数组 数组是一组相关数据的集合,一个数组实际上就是一连串的变量,数组按照使用可以分为一维数组.二维数组.多维数组.同一数组中的变量数据类型相同 二.数组的优点 不使用数组定义100个整型变量 ...

  4. Java EE HTML5 WebSocket 示例

    http://www.oschina.net/translate/java-ee-html5-websocket-example?cmp HTML5给Web浏览器带来了全双工TCP连接websocke ...

  5. JSON path

    https://github.com/itguang/gitbook-smile/blob/master/springboot-fastjson/fastjson%E4%B9%8BJSONPath%E ...

  6. exception http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application

      http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed w ...

  7. 警察与小偷的实现之中的一个client与服务端通信

    来源于ISCC 2012 破解关第四题 目的是通过逆向police.实现一个thief,可以与police进行通信 实际上就是一个RSA加密通信的样例,我们通过自己编写client和服务端来实现上面的 ...

  8. 保护HTTP的安全

    #如果没有严格的限制访问的权限,公司放在服务器上的重要文档就存在隐患,web需要有一些安全的http形式: #安全方法: #基本认证.摘要认证.报文完整性检查都是一些轻量级的方法,但还不够强大,下面介 ...

  9. linux 服务器删除大文件之后不释放存储空间的解决办法

    查看磁盘空间使用情况:df -h 查看根目录下,第一层目录所占空间情况:du -h --max-depth=1 / 找出根目录下大于2000M的文件:find / -size +2000M 找出已删除 ...

  10. Linux ssh服务开启秘钥和密码认证

    问题描述: 实现Linux秘钥和密码同时认证 解决方案: vim /etc/ssh/sshd_config 基本参数: PermitRootLogin yes #允许root认证登录 Password ...