logo标签列表

将Chrome中的console.log保存到文件中

google-chromeconsolelogging
238

有没有办法将Chrome中的console.log输出保存到文件中？或者如何将文本从控制台复制出来？

比如你运行了几小时的功能测试，Chrome里有数千行的console.log输出。你该如何保存或导出它们呢？

3
请查看 从 Google Chrome 导出 JavaScript 控制台日志。 - thisgeek
17个回答
248

好消息

Chrome dev tools现在可以原生地将控制台输出保存到文件中

  1. 打开控制台
  2. 右键单击
  3. 选择 "另存为..."

将控制台保存到文件

Chrome开发者说明在这里。

6
可以使用键盘快捷键或在控制台上运行命令来完成这个操作吗？ - Sarthak Singhal
1
是的，但根据那个，没有这样的方法可以使用键盘快捷键保存控制台日志。 - Sarthak Singhal
18
这似乎没有复制堆栈跟踪。 - Michael
5
你能再次在控制台打开那个文件吗？如果可以，你要如何做到？ - Mahathi Vempati
15
请注意，此操作不会展开对象，它仍然会以缩略形式打印大型对象，例如 {a: 1, b: 2, c: 3, ...}。 - Galen Long
显示剩余7条评论
121

我也需要做同样的事情，这是我找到的解决方案：

  1. 使用以下标志从命令行启用日志记录：

    --enable-logging --v=1

这将记录Chrome内部执行的所有操作，但它也会记录所有的console.log()消息。日志文件名为chrome_debug.log，位于User Data Directory中，该目录可以通过提供--user-data-dir=PATH来覆盖（更多信息请参见此处）。

  1. 过滤获取的日志文件中包含CONSOLE(\d+)的行。

请注意，控制台日志在使用--incognito时不会显示。

5
似乎在我的Mac OS上无法正常工作，虽然有内部日志但没有Console.log记录... - Nico
8
这并不会将console.log信息保存到日志文件中。在Windows 8中。 - rockstardev
4
在Mac上，我发现日志文件在~/Library/Application Support/Google/Chrome/chrome_debug.log。 - vaichidrewar
2
这个在我的OSX 10.10.3上仍然有效 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1，并将日志保存在 ~/Library/Application Support/Google/Chrome/chrome_debug.log。 - mateuscb
6
除了 Chrome 浏览器的内部日志外，我什么都没得到。我的 console.log() 行没有出现在那个文件中。有人知道解决方法吗？ - xandermonkey
显示剩余17条评论
33

我发现了一个简单易行的方法。

  1. 在控制台上右键单击已记录的对象

  2. 点击“存储为全局变量”

  3. 查看新变量的名称 - 例如，它是variableName1

  4. 在控制台中输入：JSON.stringify(variableName1)

  5. 复制变量字符串内容：例如 {"a":1,"b":2,"c":3}

在控制台上右键单击已记录的对象

  1. 转到一些 JSON 在线编辑器： 例如 https://jsoneditoronline.org/

转到一些 JSON 在线编辑器

1
表面看起来有些笨重，但实际上它运行得相当不错。在后续版本中，在输出底部有一个“复制”按钮。我只需按下它，然后有一个小脚本将剪贴板保存为.json文件并在Visual Studio中打开，这非常易读。唯一的变化是我使用JSON.stringify（temp1，null，2）使其更易于阅读。下面的技巧也很好地保存了控制台。 - Wade Hatler
此回答不适用于长文本被截断的情况。 - luiscla27
31

有一个开源的JavaScript插件可以实现这一点，但适用于任何浏览器 - debugout.js

Debugout.js记录并保存console.logs，使您的应用程序可以访问它们。全面披露，我写过它。它可以适当地格式化不同类型，可以处理嵌套对象和数组，并且可以选择在每个日志旁边放置时间戳。您还可以在一个地方切换实时日志记录，而无需删除所有日志语句。

4
作为参考，虽然这看起来是一个很棒的工具，但它不能捕获来自浏览器的输出，例如当图像加载失败或其他内置控制台输出时，并且需要使用特殊语法重写日志语句。 - Lukus
@Lukus，它肯定不会捕获浏览器输出（你需要一个猴子补丁来做到这一点），但是不需要特殊的语法。传递与console.log相同的参数即可。 - inorganik
1
@Inorganik 我正在寻找一种方法，使selenium测试能够捕获控制台输出，但它将用于测试服务，因此我们无法控制用户的网站。我认为你的工具很酷，但它需要用户将其现有的console.log语句重写为bugout.log，这就是我所说的特殊语法。目前似乎没有跨浏览器的方法来做到这一点。 - Lukus
不行，这对我们没有用。我们需要保存测试复杂网站的结果日志，其中包含大量第三方脚本，这些脚本在不同的域上运行，而我们无法更改其中大部分。 - Mike Keskinov
10

为了获得更好的日志文件（去除Chrome-debug的无用信息），请使用：

--enable-logging --log-level=0

使用--v=1会提供太多信息，您可以使用其他方式来代替。

这种方式仍然可以显示Chrome控制台中通常看到的错误和警告。

2020年5月18日更新：实际上，我认为这已经不再是真的了。在这个日志级别中，我找不到控制台消息。

未捕获的语法错误：意外的标识符。 - Brackets
2022年6月，--enable-logging --v=1 确认在运行时显示控制台日志，而 --enable-logging --log-level=0 则不会。 - Wimateeka
8

针对Google Chrome版本84.0.4147.105及以上版本，

只需右键点击并选择“另存为”和“保存”，

然后，txt文件将被保存。

输入图像说明

1
这个答案对 长文本被截断 无效。 - luiscla27
7
5
1
关于“Uncaught TypeError: Converting circular structure to JSON”的问题，也许这个链接可以帮到你：https://dev59.com/T1gR5IYBdhLWcg3wqO1W。 - KtX2SkD
3
有另一个开源工具可以让你将所有的 console.log 输出保存到服务器上的文件中 - JS LogFlush（推荐！）。

JS LogFlush 是一个集成的 JavaScript 日志记录解决方案，包括：

  • 跨浏览器无界面替代 console.log - 在客户端。
  • 日志存储系统 - 在服务器端。

演示

3
  1. 直接右键单击要复制的记录值
  2. 在右键菜单中选择“存储为全局变量”
  3. 您将在控制台下一行看到保存为“temp1”之类的值
  4. 在控制台中，输入 copy（temp1）并按回车键（将 temp1 替换为前一步中的变量名称）。现在，已经将记录的值复制到剪贴板中。
  5. 将这些值粘贴到想要的任何位置

如果您不想更改Chrome中的标志/设置，并且不想处理JSON串化和解析等内容，则特别适用此方法。

更新：我刚找到了这篇带有图片的解释，更易于理解https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接