ChatGPT解决这个技术问题 Extra ChatGPT

是否可以在 Android 手机上的 Chrome 中打开开发者工具控制台?

AngularJS 应用程序在桌面上运行良好,但在移动设备上无法正确呈现(显示实际代码)。这是在安卓手机上。

我想看看控制台中显示了哪些错误。

是否可以在移动设备上的 chrome 应用程序上打开 JS 控制台(就像在桌面上一样)?


P
PseudoAj

您可以使用远程调试来完成,这里是 official documentation。基本流程:

连接您的 android 设备 选择您的设备:更多工具 > 从 pc/mac 上的开发工具检查设备*。在您的手机上进行授权。调试愉快!!

* 现在是“远程设备”。


我认为文档链接中提供了详细说明
这可能在没有外部计算机的情况下做到这一点吗?
问题要求在 Android 手机上的 Chrome 中打开开发者工具控制台?你的灵魂需要一台单独的调试机器。在您的回答中,调试不在手机本身上
我没有其他方式知道@fennekin。如果您认为有更好的方法,请随时更新,
截至 2019 年 1 月,我无法在更多工具下找到 Inspect 设备,我终于在 chrome://inspect 找到了它,您需要允许从手机进行 USB 调试
t
trogper

当您手头没有 PC 时,您可以使用 Eruda,它是用于移动浏览器的开发工具 https://github.com/liriliri/eruda
它作为可嵌入的 javascript 和书签提供(在 chrome 中粘贴书签会删除 javascript: 前缀,因此你必须自己输入)


像 Termux 这样的工具的非常好的伴侣,它使单独的移动设备上的开发变得真实!我已经将 eruda-webpack-plugin 集成到一个项目中:npm i eruba-webpack-plugin --save-optional
获取控制台内容的最简单方法
很棒的解决方案。它在 CDN 中可用。
这似乎对我不起作用。将它粘贴到地址栏中(然后读取'javascript:')似乎没有任何作用。
@BT 一些网站限制从列出的允许域加载脚本。在另一个网站上试试。
f
fatemeh sadeghi

在 android 中使用远程调试第一个活动开发者模式

1-in android>setting>search bulid number->然后点击几次激活开发者模式

2-安卓>设置>开发者选项>启用usb调试

3-用usb线连接电脑

英寸 chrome pc 类型 chrome://inspect > enter

5- 在移动打开 url 然后在 pc chrome://inspect/#devices 中监控


有史以来最好的答案。
当我在手机上打开 URL 时,chrome://inspect/#devices 中究竟应该“发生”什么?因为那里似乎没有发生任何事情,即使我遵循了步骤 1-4。特别是,设备子页面中没有列出任何内容,我的手机没有出现在那里,即使我确实在手机上收到了授权请求并接受了它。
@SzczepanHołyszewski 您在手机中打开的链接在 PC 控制台中列出,您可以对其进行调试,就像您直接在 PC 中打开链接并对其进行调试一样。如果此操作不正确,Google 开发可能会被阻止因此请在您的 PC 上使用 VPN 或代理,然后重试
S
Sensei James

请帮自己一个忙,然后点击简单的按钮:

从 Play 商店下载 Web Inspector (Open Source)

警告:ATTOW,控制台输出不接受其余参数!即,如果你有这样的事情:

console.log('one', 'two', 'three');

你只会看到

登录到控制台。您需要手动将参数包装在一个数组中并加入,如下所示:

console.log([ 'one', 'two', 'three' ].join(' '));

查看预期的输出。

但应用程序是 open source!补丁may be imminent!修补程序甚至可能是你!


这是一个很好的起点,但不显示控制台日志
@skplunkerin 不确定你的意思?控制台日志输出:lh3.googleusercontent.com/…
哦,我以为只记录 XHR 请求,而不是所有控制台日志。谢谢!
这不称为休息参数,而只是可变参数函数/多个参数
该链接现在是 404
C
Ciske

原来的答案似乎不再有效。从当前的 Chrome developer docs 开始,您需要完成以下基本步骤:

在您的 Android 上打开开发人员选项屏幕。请参阅配置设备上开发人员选项。选择启用 USB 调试。在您的开发机器上,打开 Chrome。转到 chrome://inspect#devices。确保启用了发现 USB 设备复选框。

之后,在您的 Android 设备上打开 Chrome(并确认 USB 调试提示以防弹出)。切换回您的 PC,您应该会看到当前打开的浏览器选项卡:

https://i.stack.imgur.com/W2n6j.png

如果您的设备选项卡未出现,您可能需要通过激活移动设备上的文件传输来触发 USB 调试提示。


为什么我无法打开直接从终端加载的 chrome://inspect#devices 页面的 Chrome,例如:$ chrome 'chrome://inspect#devices'?!
P
Pawel

Kiwi 浏览器是移动 Chromium,允许安装扩展。安装 Kiwi,然后安装“Mini JS 控制台”Chrome 扩展(只需在 Google 中搜索并从 Chrome 扩展网站安装,uBlock 也可以;)。它将在底部的 Kiwi 菜单中可用,并将显示当前页面的控制台输出。


这很棒,不遥远!
d
divibisan

我只想查看控制台中打印的内容,您可以简单地将“打印”部分添加到 HTML 中的某处,这样它就会出现在网页上。您可以自己做,但有一个 javascript 文件可以为您做这件事。你可以在这里读到它:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

The code is available from Github;您可以下载它并将其粘贴到 javascipt 文件中,然后将其添加到您的 HTML


仅供参考:您可能会遇到控制台不会出现的情况。根据 its official homepage 末尾的一些对话,您可以尝试明确地mobileConsole.init() 它。这个技巧对我有帮助。 YMMV。
该链接仍然有效,只是需要很长时间才能加载。尽管如此,我可以总结一下,我和那个 lib 所有者之间的那些对话最终导致他将以下信息添加到他主页的注释部分:“如果 mobileConsole 没有启动(移动检测失败),您可以通过设置覆盖自动启动overrideAutorun 为 true 或将以下脚本添加到您的页面:if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
z
zahra_oveyedzade

Remotely debugging Firefox 是另一种选择。提到的步骤here


2
2 revs

使用 Kiwi 浏览器应用程序

允许您安装所有 chrome 扩展以及访问开发工具(控制台,...)

或者

要访问和测试不同移动浏览器的所有控制台,您可以使用以下类似网站:

https://www.browserstack.com/


使用 Kiwi 效果很好,谢谢!