从 Node.js 输出到 Chrome 控制台

Output to Chrome console from Node.js

提问by ThomasReggi

I'm looking for a way to output Node variables directly into the google chrome browser console. The same way a console.log()works on the client side. Something like this for php. This would greatly speed up development.

我正在寻找一种将 Node 变量直接输出到 google chrome 浏览器控制台的方法。与console.log()在客户端工作的方式相同。类似这样的 php。这将大大加快开发速度。

采纳答案by Nahn

NOTE: Since the old answer (written in september 2014) refers to an older version of node-inspector, my instructions are not relevant anymore in 2017. Also, the documentation has gotten a lot better, so I have updated my original answer:

注意：由于旧答案（写于 2014 年 9 月）指的是旧版本node-inspector，我的说明在 2017 年不再相关。此外，文档已经变得更好，所以我更新了我的原始答案：

node-inspectoris what you need. It opens up an instance of Chrome with its developer tools for debugging.

节点检查器是您所需要的。它打开了一个 Chrome 实例，并带有用于调试的开发人员工具。

It's also easy to use:

它也很容易使用：

1.Install

1.安装

$ npm install -g node-inspector

2.Start

2.开始

$ node-debug app.js

Source: https://github.com/node-inspector/node-inspector

来源：https: //github.com/node-inspector/node-inspector

回答by honzzz

You might want to try NodeMonkey - https://github.com/jwarkentin/node-monkey

您可能想尝试 NodeMonkey - https://github.com/jwarkentin/node-monkey

回答by Moin Zaman

The closest thing to this I've seen is Node JS console object debug inspector

我见过的最接近的是Node JS 控制台对象调试检查器

See this post for usage and potential issues: http://thomashunter.name/blog/nodejs-console-object-debug-inspector/

有关用法和潜在问题，请参阅此帖子：http: //thomashunter.name/blog/nodejs-console-object-debug-inspector/

回答by Marcel Ennix

For users with nodejs on linux via ssh-shell(putty):

对于通过 ssh-shell(putty)在 linux 上使用nodejs 的用户：

Problem with nodejs on linux-ssh-shell is, that you have no browser connected. I tried all this solutions, but didnt get it to work.

linux-ssh-shell 上 nodejs 的问题是，您没有连接浏览器。我尝试了所有这些解决方案，但没有让它起作用。

So i worked out a solution with firebase (https://firebase.google.com), because my project uses firebase. If you are familiar with firebase, than this is a great way. If not, firebase is worth using in combination with nodejs - and its free!

所以我用 firebase ( https://firebase.google.com)制定了一个解决方案，因为我的项目使用了 firebase。如果您熟悉 firebase，那么这是一个很好的方法。如果没有，firebase 值得与 nodejs 结合使用 - 而且它是免费的！

In the server-side-script (started with node) use a own function log():

在服务器端脚本（从节点开始）中使用自己的函数 log()：

// server-side:
// using new firebase v3 !
var fbRootRef = firebase.database();
var fbConsoleRef = fbRootRef.ref("/console");
var log = function(args) {
  fbConsoleRef.set({'obj': args});
}

// inside your server-code:
log({'key':'value'});

On client-side you create a firebase-reference on this console-object:

在客户端，您在此控制台对象上创建了一个 firebase-reference：

// client side:
fbRootRef.child('/console').on('value', function(d) {
  var v = d.val();
  console.log(v);
});

Now everything logged on server-side with the log() - function is transferred in realtime to the firebase-database and from there triggering the client-console-reference and logged into the browsers console.

现在，使用 log() 函数在服务器端登录的所有内容都会实时传输到 firebase-database，然后从那里触发 client-console-reference 并登录到浏览器控制台。

If anyone needs help, i will explain in more detail and could give a more extended version of this logging with types (console./log/warn/info), grouping with title-info (i.e. server says: (filename + line).

如果有人需要帮助，我将更详细地解释，并可以提供此日志记录的更扩展版本，类型为 (console./log/warn/info)，使用标题信息分组（即服务器说：（文件名 + 行）。

Setting up firebase for your project is done in max 30 minutes, inserting the console-function in 30 minutes. I think its worth the time!

为您的项目设置 firebase 最多在 30 分钟内完成，在 30 分钟内插入控制台功能。我认为值得花时间！

回答by S1awek

I know it's an old question but came on top of my Google search so maybe somebody will find my answer useful.

我知道这是一个老问题，但出现在我的谷歌搜索之上，所以也许有人会发现我的答案很有用。

So you can use node --inspect-brk index.js

所以你可以使用 node --inspect-brk index.js

Now, all you have to do is basically just type chrome://inspectin your Chrome address bar and click Open dedicated DevTools for Node

现在，您所要做的基本上只是输入chrome://inspect您的 Chrome 地址栏并点击Open dedicated DevTools for Node

In DevTools, now connected to Node, you'll have all the Chrome DevTools features you're used to:

在 DevTools 中，现在连接到 Node，你将拥有你习惯的所有 Chrome DevTools 功能：

• Complete breakpoint debugging, stepping w/ blackboxing

• Source maps for transpiled code

• LiveEdit: JavaScript hot-swap evaluation w/ V8

• Console evaluation with ES6 feature/object support and custom object formatting

• Sampling JavaScript profiler w/ flamechart

• Heap snapshot inspection, heap allocation timeline, allocation profiling

• Asynchronous stacks for native promises

• 完整的断点调试，带黑盒的步进

• 转译代码的源映射

• LiveEdit：带有 V8 的 JavaScript 热插拔评估

• 具有 ES6 功能/对象支持和自定义对象格式的控制台评估

• 使用火焰图对 JavaScript 分析器进行采样

• 堆快照检查、堆分配时间表、分配分析

• 本机承诺的异步堆栈

Hope that helped.

希望有所帮助。

回答by Ramesh Papaganti

This is cool video I found on How to debug code on VSC and chrome browser by Andrew Mead

这是我在 Andrew Mead 的 How to debug code on VSC and chrome browser 上找到的很酷的视频

You tube link

优管链接

回答by Yuchen Huang

You can use bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.

您可以使用bonsole，这是一种在浏览器中记录某些内容的简单方法。即使在Linux中，你也可以去局域网的ip查看。