除了移动设备浏览器中的开发人员工具以外，还有其他替代方法可以查看console.log条目吗？

编程问答 2022-06-03

问题描述

我正在开发基于Web的游戏。

在桌面浏览器中运行时，我可以在几乎所有浏览器中的经典Web开发人员控制台中轻松查看日志：

enter image description here

问题

如何像开发人员工具在台式机浏览器中提供的那样，在移动浏览器中获取console.log条目？

移动浏览器不提供打开开发者工具

的简便方法

研究

我发现这些选项没有成功：

  • https://help.duo.com/s/article/4957?language=en_US
    • 但是我可以在Android浏览器上启用开发者工具
    • 我正在审查的
  • eruda，似乎是浏览器的仿真。
  • 替代方案：：我当时正在考虑创建一个极简主义的Web门户，在其中可以使用ajax（覆盖console.log）从我的网站发送日志。我相信当在移动浏览器中对Web进行测试时，在Web上查看日志可能会更舒适

enter image description here

编辑1

有人将此问题标记为该question的重复，其答案提出：

  • ＃1修改您的网络以在某些可见部分显示日志
  • ＃2 open和android studio可以查看android浏览器的整个日志

我认为＃1如果不是侵入性的并且易于在开发阶段启用，则可能是一个解决方案。可能如下图所示，其中日志条目未修改UI：

enter image description here

解决方法

这可能有用吗？

// Reference to an output container,use 'pre' styling for JSON output
var output = document.createElement('pre');
document.body.appendChild(output);

// Reference to native method(s)
var oldLog = console.log;

console.log = function( ...items ) {

// Call native method first
oldLog.apply(this,items);

// Use JSON to transform objects,all others display normally
items.forEach( (item,i)=>{
    items[i] = (typeof item === 'object' ? JSON.stringify(item,null,4) : item);
});
output.innerHTML += items.join(' ') + '<br />';

};

// You could even allow Javascript input...
function consoleInput( data ) {
// Print it to console as typed
console.log( data + '<br />' );
try {
    console.log( eval( data ) );
} catch (e) {
    console.log( e.stack );
}
}
,

最后，我创建了一个简单的库以在同一网站上查看我的日志：

this

源代码在这里：enter image description here

我只需将其添加到我的网站顶部：

<script src="https://cdn.jsdelivr.net/gh/jrichardsz/log4browser@master/log4browser.min.js"></script>

注意：将其从您的产品包中删除

androidandroidconsole.logiosiosjavascriptmobile