如何从移动设备上的移动设备获取 console.log 输出？

Posted 2023-02-22

技术标签:

【中文标题】如何从移动设备上的移动设备获取 console.log 输出？【英文标题】：How can I get console.log output from my mobile ON the mobile device? 【发布时间】：2018-04-14 07:46:31 【问题描述】：

我的很多开发工作都是通过移动设备完成的。有没有办法让 js 从移动浏览器 within 访问 console.log 输出？

【问题讨论】：

通过将设备连接到工作站并在工作站上使用 chrome 进行调试来调试最简单：developers.google.com/web/tools/chrome-devtools/… 感谢您的快速回复，@admcfajn。我知道如何通过 USB 或 wifi 使用桌面开发工具进行 chrome，但是，我正在寻找一种从移动设备本身获取 console.log 输出的方法。我在我的实际手机上做了很多工作，虽然从我碰巧在的任何地方将远程会话和 adb 隧道连接到我的桌面很容易，但从我所在的任何地方处理远程桌面会话只是为了获得如果我没有平板电脑，日志输出不方便。我在手机本身上做了很多工作，而且通常很简单，有时我需要控制台。有些网站提供这样的功能，但我不喜欢将我的代码放到随机人的服务器上。这是一个示例：jsconsole.com。但是必须有一种方法可以做到这一点，而不依赖于其他人的服务器。它的措辞有点不同，但这是迄今为止我找到的最好的资源：@987654323@ 我听说您可以通过创建新书签并将以下内容添加到地址字段来从移动设备查看源代码：

javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();

【参考方案1】：

目前，最好的方法是“挂钩”本机控制台并将输出显示为 HTML，同时仍允许输出转到本机控制台。

你可以很容易地实现你自己的版本....

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

....与其重新发明***，您可能有兴趣尝试几个项目。

我个人使用hnlDesign's mobileConsole 并且对此非常满意。这很简单，正是您想要和期望的。

我最近知道了Eruda，但除了玩他们的演示之外，还没有机会对其进行测试。它实现了更多的开发人员工具，但出于这个原因，对于很多项目来说也可能是矫枉过正。它感觉不那么轻巧（它的文件大小肯定要大得多，甚至缩小了！），如果您想要开发人员工具的广度和强度，最好使用远程调试。我们大多数想要移动控制台的人只是想要快速测试等的基础知识。

【讨论】：

谢谢你，@Marcus！我真的很感谢你花时间给我一个答案。看来我的问题往往是相当深奥的。无论如何，真的很感谢这篇文章是的，我只想要你从 console.log 获得的基本输出（特别是）以及对象的自动枚举等。我自己做了一些“控制台”劫持，但无法扩展使用本机控制台的对象。奇怪的是，昨天我发现一个网站就是这样做的，它使用浏览器控制台对象并重定向它的输出。我会检查一下，并发布我发现的链接。谢谢！【参考方案2】：

使用 Eruda，这是迄今为止最好的，至少在我尝试过的那些中。

【讨论】：

【参考方案3】：

对于 android - 我发现这是可行的：

打开 Android Studio IDE 在调试模式下连接设备打开 logcat 在 android 设备上运行浏览器 UI - 查看控制台日志输出

这里有一些来自 logcat 的 console.log() 行：

[INFO:CONSOLE(18)] "100 - checking FUNC PARAM ... ", source: https://somewhere/util/message_util.js (18)

[INFO:CONSOLE(18)] "101 - > ENTER: AppAuth.onHasAuthFunc", source: https://somewhere/util/message_util.js (18)

尝试这种方法的想法，感谢@Marcus's answer，建议：

" '钩入'本机控制台"

~~~~~~

另外，看到其他帖子建议输入：about:debug

.. 进入设备浏览器的地址栏。不确定这是否与使连接正常工作有关

【讨论】：

嗯...有趣的方法。然而，这里的想法是独立于另一个设备；但是，如果没有额外的计算机，是否可以从设备上查看？最好来自浏览器本身。在类似的情况下，我看到了一些原生的 Android logcat 应用程序，但是对它们的运气并不好。我真希望 Chromium 的人能像在 PC 上那样做一种本机的方式。信息就在那里。我们只需要看到它。有时您只需要编码，即使您可用的只有手机。（或平板电脑/平板电脑）。完整枚举。