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

Posted 2023-02-14

【中文标题】将 Chrome 中的 console.log 保存到文件中

【英文标题】：Save the console.log in Chrome to a file

【发布时间】：2011-11-29 10:31:24

【问题描述】：

有谁知道将 Chrome 中的 console.log 输出保存到文件的方法？或者如何将文本复制出控制台？

假设您正在运行几个小时的功能测试，并且在 Chrome 中输出了数千行 console.log。如何保存或导出？

【问题讨论】：

见Export javascript Console log from Google Chrome

【参考方案1】：

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

使用标志从命令行启用logging：

--enable-logging --v=1

这会记录 Chrome 在内部执行的所有操作，但也会记录所有 console.log() 消息。日志文件名为 chrome_debug.log，位于 User Data Directory 中，可以通过提供 --user-data-dir=PATH (more info here) 覆盖。

过滤您获得的日志文件中带有CONSOLE(\d+) 的行。

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

【讨论】：

在我的mac os上好像不行，有内部日志但是没有Console.log...

这不会将 console.log 信息保存到日志文件中。在 Windows 8 中。

在 Mac 上，我在 ~/Library/Application Support/Google/Chrome/chrome_debug.log 找到了日志文件

这对我在 OSX 10.10.3 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1 上仍然有效，日志保存在 ~/Library/Application Support/Google/Chrome/chrome_debug.log

除了内部 chrome 日志之外，我什么也没得到。我的 console.log() 行不在该文件中。有没有人可以解决这个问题？

【参考方案2】：

直接右键单击要复制的记录值 在右键菜单中，选择“存储为全局变量” 您会在控制台的下一行看到保存为类似“temp1”的值 在控制台中，键入copy(temp1) 并按回车键（将temp1 替换为上一步中的变量名）。现在记录的值被复制到您的剪贴板。 将值粘贴到您想要的任何位置

如果您不想在 Chrome 中更改标志/设置并且不想处理 JSON 字符串化和解析等，这是一种特别好的方法。

更新：我刚刚找到了这个解释我建议的图片更容易理解https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

【讨论】：

感谢 copy() 语法。拯救了我的一天。

【参考方案3】：

我已经找到了一个非常简单的方法。

在控制台中 - 右键单击​​控制台记录的对象

点击“存储为全局变量”

查看新变量的名称 - 例如它是变量名1

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

复制变量字符串内容：e.g. "a":1,"b":2,"c":3

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

【讨论】：

表面上看起来很笨重，但效果很好。在更高版本中，在输出的底部有一个“复制”按钮。我只是按下它，然后有一个小脚本将剪贴板保存为 .json 文件并在 Visual Studio 中打开，这非常易读。唯一的改变是我做 JSON.stringify(temp1, null, 2) 使它更容易阅读。下面保存控制台的技巧也很有效。

【参考方案4】：

对于 Google Chrome 版本 84.0.4147.105 及更高版本，

只需右键单击并单击“另存为”和“保存”

然后，txt文件将被保存

【参考方案5】：

为了更好的日志文件（没有 Chrome 调试废话）使用：

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

而不是 --v=1 信息太多了。

它仍会提供您通常在 Chrome 控制台中看到的错误和警告。

2020 年 5 月 18 日更新：实际上，我认为这不再正确。无论此日志记录级别是什么，我都找不到控制台消息。

【讨论】：

Uncaught SyntaxError: Unexpected identifier

【参考方案6】：

此线程中的其他解决方案不适用于我的 Mac。这是一个使用 ajax 间歇性保存字符串表示的记录器。与console.save 一起使用而不是console.log

var logFileString="";
var maxLogLength=1024*128;

console.save=function()
  var logArgs=;

  for(var i=0; i<arguments.length; i++) logArgs['arg'+i]=arguments[i];
  console.log(logArgs);

  // keep a string representation of every log
  logFileString+=JSON.stringify(logArgs,null,2)+'\n';

  // save the string representation when it gets big
  if(logFileString.length>maxLogLength)
    // send a copy in case race conditions change it mid-save
    saveLog(logFileString);
    logFileString="";
  
;

根据您的需要，您可以保存该字符串或只是console.log 并复制和粘贴。如果你想保存它，这里有一个 ajax：

function saveLog(data)
  // do some ajax stuff with data.
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function()
    if (this.readyState == 4 && this.status == 200) 
  

  xhttp.open("POST", 'saveLog.php', true);
  xhttp.send(data);

saveLog.php 应该将数据附加到某处的日志文件中。我不需要那个部分，所以我不在这里包括它。 :)

https://www.google.com/search?q=php+append+to+log

【参考方案7】：

在 Linux 上（至少）您可以在环境中设置 CHROME_LOG_FILE 以让 chrome 在每次运行时将控制台活动的日志写入指定文件。每次 chrome 启动时，日志都会被覆盖。这样，如果您有一个运行 chrome 的自动会话，则无需更改 chrome 的启动方式，并且在会话结束后日志就在那里。

导出 CHROME_LOG_FILE=chrome.log

【参考方案8】：

现在这很容易 - 右键单击​​控制台日志中显示的任何项目并选择另存为并将整个日志输出保存到计算机上的文件中。

【参考方案9】：

如果您在本地主机上运行 Apache 服务器（不要在生产服务器上执行此操作），您还可以将结果发布到脚本而不是将其写入控制台。

因此，您可以写而不是console.log：

JSONP('http://localhost/save.php', fn: 'filename.txt', data: json);

那么save.php可以这样做

<?php

 $fn = $_REQUEST['fn'];
 $data = $_REQUEST['data'];

 file_put_contents("path/$fn", $data);

【讨论】：

我真的希望没有人将它上传到生产中的服务器?。这会对服务器造成危险。

您没有阅读第一行：“如果您在本地主机上运行 Apache 服务器”？

你对我的帖子投反对票是没有道理的，因为如果有人在“localhost”（JSONP 请求发布数据的地方）上运行生产服务器，那将是非常愚蠢的。

我从来没有否决过你的回答，我只是指出了这个脚本如果上传到公众可用的服务器上会带来的危险。

【参考方案10】：

很多很好的答案，但为什么不直接使用 JSON.stringify(your_variable) 呢？然后通过复制和粘贴获取内容（删除外部引号）。我也发布了同样的答案：How to save the output of a console.log(object) to a file?

【讨论】：

关于"Uncaught TypeError: Converting circular structure to JSON"的问题，this 可能会有所帮助。

【参考方案11】：

好消息

Chrome 开发工具现在允许您将控制台输出本地保存到文件中

打开控制台 右键单击 选择“另存为..”

Chrome 开发者说明here。

【讨论】：

这可以使用键盘快捷键或在控制台上运行命令来完成吗？

这里是所有 devTools 快捷方式的列表developer.chrome.com/devtools/docs/shortcuts

这似乎没有复制堆栈跟踪

你能在控制台再次打开那个文件吗？如果是这样，你是怎么做到的？

请注意，这不会扩展对象 - 它仍会以截断形式打印大对象，例如a: 1, b: 2, c: 3, ....

【参考方案12】：

还有另一个开源工具，可让您将所有 console.log 输出保存在服务器上的文件中 - JS LogFlush（插入！）。

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

console.log 的跨浏览器 UI 替换 - 在客户端。 日志存储系统 - 在服务器端。

Demo

【参考方案13】：

有一个开源 javascript 插件可以做到这一点，但适用于任何浏览器 - debugout.js

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

【讨论】：

作为参考，虽然这看起来是一个很棒的工具，但它不会捕获来自浏览器的输出，例如图像加载失败或其他内置控制台输出，它需要您重写日志使用特殊语法的语句。

@Lukus 它肯定不会捕获浏览器输出（你需要一个猴子补丁来做到这一点），但不需要特殊的语法。传递与 console.log 相同的参数

@Inorganik 我正在寻找一种方法让 selenium 测试捕获控制台输出，但它将用于测试服务，因此我们无法控制用户的网站。我认为您的工具很酷，但它需要用户将他们现有的 console.log 语句重写为 bugout.log，这就是我所说的特殊语法的意思。到目前为止，这次似乎没有跨浏览器的方式来做到这一点。

不，它对我们不起作用。我们需要保存包含大量第三方脚本的复杂网站的测试结果日志，这些脚本运行在不同的域上，我们无法更改其中的大部分。

【参考方案14】：

这可能有用也可能没用，但在 Windows 上，您可以使用 Windows 事件跟踪来读取控制台日志

http://msdn.microsoft.com/en-us/library/ms751538.aspx

我们的集成测试在 .NET 中运行，因此我使用此方法将控制台日志添加到我们的测试输出中。我制作了一个示例控制台项目来演示：https://github.com/jkells/chrome-trace

--enable-logging --v=1 似乎不适用于最新版本的 Chrome。