时间戳

首页 > 解决方案 > 如何从外部来源捕获 console.log？

javascript - 如何从外部来源捕获 console.log？

问题描述

我了解如何修改 console.log 函数以拦截日志并将其推送到数组中。但是，这似乎不适用于所有控制台日志。在我的 html 中，我加载了一个 html webapp ( \creative\300x600 with video\index.html)，它也console.log("click detected")可以在我的 chrome 开发工具中看到，但不会被控制台捕获。ogs（代码示例中的第二个脚本）。我怀疑因为这是一个正在加载的外部文件，所以我无法拦截它。

是否有解决方案可以从任何来源获取所有 console.log 并保存？

<!DOCTYPE html>
<head>
<script>

//add index.html to div on click

function load_home() {
    console.log("Loaded");
    document.getElementById("content").src='creative\\300x600 with video\\index.html';

}
window.addEventListener("click",load_home);
</script>
<script>

//modify console.log

console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function() {
    console.defaultLog.apply(console, arguments);
    console.logs.push(Array.from(arguments));
};
    </script>
</head>
<html>
<iframe id="content" style="width: 300px; height:600px; background-color:blue"  ></iframe>
</body>
</html>

编辑：

尝试在 div 而不是 iframe 上制作它，同样的问题是无法记录外部 html 的 console.log。仅从 console.log("loaded")load_home 函数被记录。

<!DOCTYPE html>
<head>

<script>
function load_home() {
    console.log("Loaded");
     document.getElementById("content").innerHTML='<object type="text/html" data="creative\\300x600 with video\\index.html" ></object>';


}
window.addEventListener("click",load_home);
</script>
<script>
console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function() {
    console.defaultLog.apply(console, arguments);
    console.logs.push(Array.from(arguments));
};
    </script>
</head>
<html>


<div id="content" style="width: 300px; height:600px; z-index:-1;" ,"onclick=load_home();" </div>

</body>
</html>

标签： javascriptiframeconsole.log

解决方案

这里的问题就是因为这个iframe。iframes 有一个不同的window对象，独立于父window对象。这意味着您对父级所做的任何修改window.console都不会影响 iframe 的window.console.

您可以通过获取框架的window对象contentWindow并修改其console. 但是你必须为每一个现在和未来 iframe都这样做。此外，您无法访问contentWindow从另一个域呈现页面的 iframe。

如果您尝试捕获所有帧的日志并以某种方式将它们合并到一个大日志中，那么更好的选择是console在您要跟踪的每个页面上都使用相同的 -altering 脚本。然后将所有日志发送到服务器，按时间戳或其他方式排序。这几乎就是Sentry的工作方式。

推荐阅读