【问题标题】：Is there an alternative to the developer tools in mobile device browsers to see console.log entries?是否有替代移动设备浏览器中的开发人员工具来查看 console.log 条目？
【发布时间】：2021-02-20 18:14:55
【问题描述】：

我正在开发一个基于网络的游戏。

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

问题

如何像桌面浏览器中提供的开发者工具一样，在移动浏览器中获取 console.log 条目？

移动浏览器无法轻松打开开发者工具

研究

我找到了这些选项，但没有成功：

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

已编辑 1

有人将此问题标记为与此question 重复，其答案建议：

#1 修改您的网站以在某些可见部分显示日志
#2打开和android studio查看android浏览器的整个日志

如果在开发阶段不具有侵入性且易于启用，我认为 #1 可能是一个解决方案。它可能类似于下图，其中日志条目不会修改 UI：

【问题讨论】：

这能回答你的问题吗？ How can I get console.log output from my mobile ON the mobile device?

标签： javascript android ios mobile console.log

【解决方案1】：

这可能有用吗？

// 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 );
}
}

【讨论】：

谢谢。但我认为有些侵入性。

【解决方案2】：

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

源码在这里：https://github.com/jrichardsz/log4browser

我只需要在我的网页顶部添加这个：

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

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

【讨论】：