欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

怎么在移动端调试web前端?

18 个回答

刚才被误删了,再多写点文字重发一下,这里我总结了各种远程真机调试方法,并且会随着技术的进步逐步更新:
https://github.com/jieyou/remote_inspect_web_on_real_device
上面列了chrome浏览器模拟、调试安卓上的UC、安卓上的chrome、weinre、调试ios上的safari等方法
自荐一篇文章 移动端前端调试
特别推荐 BrowserSync 这个工具 http://yujiangshui.com/multidevice-frontend-debug/#toc-2
iphone+ safari 可以直接用satari开发工具调试。chrome+android也有类似的工具组合,但是没有实际用过
打个广告,刚写的移动端console:GitHub - liriliri/eruda: Console for mobile JavaScript
只要嵌入一个js文件就可以查看手机webview的一些基本信息,window.onerror捕获页面全局错误。
Visual Studio + Windows 10 Mobile. 也支持 Cordova Android*/iOS** 应用的调试哦!
* 需要安装可选的 VS 组件.
** 需要安装可选的 VS 组件, 和用于远程 build 的 Mac 设备.
真机调试的话,wenire 、Chrome inspect 都行,但是有缺点:
  • wenire 需要插入一段代码,在线上调试比较难
  • Chrome inspect 比较好,但是要安卓系统4.4以上,局限比较大

现在都是Hybird开发的话,很多webview内置的接口根本没办法在浏览器上模拟。所以还是要真机来测。但是这样太不优雅了。所以推荐自己的一篇文章 打造最舒适的webview调试环境 · Issue #11 · riskers/blog · GitHub

像在文章中说的一样,模拟器 + Chrome inspect + Fiddle / Charles 现在是比较完美的调试办法。
日常开发中,用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性,完成第一阶段的开发和调试。

第二阶段:
iOS 的话,iPhoen 数据线链接 Mac,打开 Safari 就可以直接使用 Mac 的 Safari 调试工具了。

Android 的话,Chrome 也有提供对应的调试工具。
插件链接:chrome.google.com/webst

国产浏览器中,UC 在 Android 提供了开发者版本,局域网下直接访问机器的IP + 9998端口即可进入调试环境。

但对于国内开发者而言,最大的问题在于国产浏览器的各种奇怪BUG。
面对这类没有调试工具的浏览器,weinre 也是一个可行的解决方案。
关于这些,

的回答已经十分全面了。

 

如果只是对JavaScript的异常进行跟踪,自己敲几行代码也可以勉强处理一下。
引入一个外部链接来接收异常信息,借此把异常显示到开发环境中,这样就可以根据异常的信息对 JavaScript 代码进行跟踪和定位。
其中大致的实现原理,是通过对 window.onerror 进行一个全局的异常监听,把捕获到的异常发送到指定的接口。

最后,我也提供一个能直接在线使用的工具:JavaScript console
最笨的麻烦是手机开QQ电脑开QQ把做好的页面传给手机QQ直接打开。。
======================2016年
更新一下,我现在是用XAMPSS开测试的。首先要保证电脑和手机处于同一个局域网。
这样的好处是可以借同事的苹果手机方便浏览。
JavaScript console
这一个就够了

iOS 上面有个应用 MIHTool 可以在移动端使用 weinre。为了应付 weinre 在移动端操作非常困难的问题,还顺便提供了服务器功能。

About MIHTool

自荐开发的软件:使用JScompress Mobile Debug调试手机端网页 欢迎测评

可以调试线上线下页面(类似接近chrome体验),捕获/劫持请求(轻量级的fiddler)









直接在浏览器里面启用移动设备模拟器就行了,然后可以在sources里面设置断点,调试非常方便..
假装有人邀,首先作为一个老司机我理解你的意思是在移动端和在pc端那样打开一个console端,然后可以看网络请求,错误信息,基于这个假设,我推荐你试试vconsole这个开源插件,可以去github上搜,btw,有篇简单的博文介绍:webapp调试工具推荐
fiddler不能再赞(๑•̀ㅁ•́ฅ✧
iOS6是可以在safari中看控制台输出的,iOS7就必须要连接到OS X系统中,使用OS X中的Safari进行调试,和使用PC端Chrome调试体验一样
如果没有OS X或者在Android系统中可以使用Weinre(people.apache.org/~pmue)
这个笔记本 用户界面远程调试 - Evernote Shared Notebook 在不断地被维护着!另外,这是 Speakerdeck 上头关于 "Mobile Debugging" 的幻灯片 speakerdeck.com/rem/mob

来自 https://www.zhihu.com/question/24250869

普通分类: