如何使用移动浏览器调试 JavaScript 代码
我了解 firebug 和主要现代桌面浏览器的开发人员工具,但我找不到任何在移动浏览器上调试 JavaScript 代码的方法。
我可以使用哪些高级技术在移动浏览器上调试代码?
I know about firebug and the developer tools for the major modern desktop browsers, but I can't find any way of debugging JavaScript code on mobile browsers.
What are some high level techniques I can use to debug code on mobile browsers?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
Android 设备可以通过设置 > 手机状态然后点击“版本号”7 次来进入开发者模式。这允许您执行 一堆事情(参见步骤 5) 包括 USB 调试。 (某些设备可能在软件信息下有内部版本号)
要激活 USB 调试,请在“设置”中查找新出现的“{ } 开发人员选项”,打开它并打开 USB 调试。使用直接 USB 连接来连接您的设备。
在桌面上的 Chrome 中,在用于调试的常用开发人员工具面板中,在菜单中查找更多工具>远程设备。选择“发现 USB 设备”后,您现在应该会在侧面看到您的移动设备。
选择它可以查看您已打开的所有 Chrome 选项卡的列表以及直接输入 URL 的功能。
选择其中一个链接将打开一个新窗口,左侧是设备屏幕的镜像,右侧是所有熟悉的 chrome 调试工具。您仍然可以直接控制您的设备或在镜像屏幕上使用鼠标。它甚至会旋转。
来自 Google 的远程调试的完整详细信息和如何从askvg.com 启用开发者模式(链接如上)
Android devices can be put into developer mode by going through settings>Phone status then tapping on "Build number" 7 times. This allows you to do a bunch of things (see step 5) including USB debugging. (Some devices might have Build number under Software Info)
To activate USB debugging, look in Settings for the newly appeared "{ } Developer Options", open this and switch on USB debugging. Connect your device using a direct USB connection.
In Chrome on your desktop, in the usual developer tools panel used for debugging, look in the menu for more tools>remote devices. With Discover USB devices selected, you should now see your mobile device on the side.
Select it to see a list of all the chrome tabs you have open and the ability to enter URLs directly.
Selecting one of the links will open up a new window with a mirror of your device screen on the left and all the familiar chrome debug tools on the right. You can still control your device directly or use the mouse on the mirrored screen. It even rotates.
full details on remote debugging from google and how to enable developer mode (link as above) from askvg.com
您可以使用任何 iPhone/iPad 在 Safari Mobile 上进行调试。在开发人员菜单中,您可以找到您的设备,然后可以使用检查器调试代码。
如果您有 Android 设备,则可以使用
chrome://inspect
在 Chrome 桌面上进行调试(请记住激活调试模式)You can debug on Safari Mobile with any iPhone/iPad. In Developer menu you can find your device and you can then debug your code with inspector.
If you have an Android Device instead, you can debug on Chrome Desktop (remember to active the debug mode) with
chrome://inspect
Android 提供了用于以下目的的工具集:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Apple 也采用类似的方式:
https://developer.apple.com/safari/tools/
教程:https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/
Android provides a tool set for these purposes:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Apple does it a similar way:
https://developer.apple.com/safari/tools/
Tutorial: https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/
在 iPhone 上,您可以进入“设置”>“Safari”>“高级”并打开 Web 检查器
On the IPhone you can go into settings>Safari>advanced and turn web inspector on
有时,我会收到客户报告的错误,这些错误并非每次或在我们的测试中都可以重现。对于这种情况,我推荐Lucky Orange。它记录用户活动,还可以选择记录控制台消息。
PS - 我不是附属机构,我将它们用于我自己的项目并且喜欢它。
Sometimes I get bugs reported by customers that are not reproducible every time or in our testing. For such cases I recommend Lucky Orange. It records the user activity and also has the option to record console messages.
PS - I'm not an affiliate, I use them for my own projects and like it.
基本调试的另一个解决方案(很多时候都是必需的)是在移动设备上拥有控制台polyfill,而无需插入桌面上的USB。
mobileConsole 就是这样一个控制台polyfill。
希望它对某人有帮助,我发现它很有用。
Another solution for basic debugging (which many times is all is needed), is having a console polyfill on mobile without the need to plug into USB on desktop.
mobileConsole is such a console polyfill.
Hope it helps someone, I found it useful.