移动端前端调试工具总结

一、系统自带调试功能

(一)、IOS系统

a、有真机(要求iOS 6 +)

1、iPhone开启web检查(设置 -> Safari -> 高级 -> 开启 Web 检查器)
2、Lightning 数据线将 iPhone 与 Mac 相连
3、iPhone 使用 Safari 浏览器打开要调试的页面
4、Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)(如果你的菜单栏没有“开发”选项,可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。)

  • 如果要调试原生IOS应用中的webview页面,则需要 App 必须开启 DEBUG 模式!!!另外,由于IOS有签名校验机制,真机正式包不允许Safari 直接Debug,因此要求安装在真机上的包必须是测试签名打的包。需要联系IOS客户端将我们的ios设备id写入到可信任设备列表中,然后使用 iTunes 安装客户端提供的测试包即可。
b、无真机

无真机则使用Xcode里的内置的 iOS 模拟器

1、在https://developer.apple.com/download/more/?q=xcode 里或者MAC 的 App Store 安装 Xcode;
如果要安装IOS 8.1- IOS11.3,建议安装xcode9.4.1(9F2000)版本,如果要安装IOS10.3.1-IOS12.2,建议安装xcode 10.3(10GB) 版本;

选择ios系统步骤

2、右键 Xcode 图标 -> Open Developer Tool -> Simulator
3、运行Simulator后 在Simulator中打开safari ,选择Mac的 Safari的开发菜单,找到Simulator 即可


image.png

如果想调试低版本IOS,可以点击左上角 Xcode -> Preferences -> Downloads 就可以选择相应的版本了

  • 如果想调试原生app里的webview应用,可在模拟器中打开webview应用,在mac的Safari 上选择 iOS Simulator 即可;


    image.png

(二)、安卓系统

a、有真机(要求 Android 版本 4.0 +)

1、使用 USB 数据线将手机与电脑相连(驱动安装失败 可以到Android Studio
手动安装)
2、手机开启开发者模式(安卓4.2及以后版本 需要进入关于手机-->连续点击版本号7次才能够开启)并进入,勾选 USB 调试,并允许调试
3、电脑打开 Chrome 浏览器(要求Chrome 版本 >= 32),在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
4、手机打开网址,在 Chrome 浏览器 点击 相应的inspect 按钮即可(需要翻-强 否则会出现HTTP/1.1 404 Not Found 或者空白页面)

  • 如果需要调试原生安卓应用中的WebView 页面(需要安卓4.4及以后),则需要在WebView 类上调用静态方法 setWebContentsDebuggingEnabled
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

上述设置 适用于应用中的所有WebView;WebView 调试不会受应用清单中 debuggable 标志的状态的影响。如果您希望仅在 debuggable 为 true 时启用 WebView 调试,请在运行时测试标志。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

以上具体可看这里远程调试 Android 设备使用入门远程调试 WebView

推荐 极客学院的官方教程

如果以上方法无效,可通过 Android SDK 提供的 adb 二进制包方法: 在Android上进行远程调试(旧版工作流程) ,这个方法主要推荐Chrome32以下

其它注意的事项 https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in

b、无真机

1、Android Virtual Device(AVD)
2、 夜神模拟器
3、Genymotion 软件,使用 Genymotion 前需要安装 VirtuaBox,并且注册登陆后才能显示所有的虚拟设备。
4、网易的Mumu模拟器
5、雷电模拟器
6、逍遥模拟器

二、weinre

weinre 不推荐,测试发现weinre不支持查看资源加载情况及部分js错误不展示(需要加延时)

1、安装weinre npm install -g weinre
2、启动weinre weinre --httpPort 8080 --boundHost -all-
3、在待测试的页面中注入脚本

image.png

4、进入调试控制界面
image.png

三、 spy-debugger

spy-debugger原理是集成了weinre,简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。当然它对weinre在页面document ready事件前,无法打印console.log日志进行了增强修复,增强了weinre打印未捕获异常(Uncaught Exceptions)功能。

  • 1、npm install spy-debugger -g

  • 2、 spy-debugger -p 8080 设置8080端口
    还有其他设置如:
    a、设置外部代理(默认使用AnyProxy)spy-debugger -e http://127.0.0.1:8888
    b、是否只拦截浏览器发起的https请求 spy-debugger -b false ((默认: true))
    c、设置页面内容为可编辑模式 spy-debugger -w true (默认: false)
    d、是否允许weinre监控iframe加载的页面 spy-debugger -i true (默认: false)

  • 3、设置手机HTTP代理,代理的ip地址为pc的ip地址,端口为 spy-debugger的启动端口(默认为9888),这里的端口号为8080 不是9888

这里特别提一下pc的ip地址 ,由于我安装了VirtualBox,spy-debugger将我的pc ip识别成了 VirtualBox IPv4 地址( 在win10 采用 ipconfig -all 得到 以太网适配器 VirtualBox Host-Only Network:)
而不是我的pc真实ip(以太网适配器 以太网: IPv4 地址)


image.png

Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动

  • 4、手机安装证书(注:手机必须先设置完代理后再通过(非微信)手机浏览器访问安装证书)
    扫码安装


    image.png

    有一点别遗漏了 设置->通用->关于本机->证书信任设置-> 找到node-mitmproxy CA(打开)

  • 5、用手机浏览器访问你要调试的页面即可。

四、 待补充

五、ios-webkit-debug-proxy

谷歌出品的,具体使用可看这里使用Chrome DevTool调试iOS设备的webView 或者 调试iOS H5 项目的另一种选择-ios-webkit-debug-proxy
windows 看这里通过 Chrome 调试运行在 IOS-safari 上的页面

六、 vConsole

七、 Eruda

Eruda据说比vConsole更好用

八、TBS Studio

这个只适合接入x5内核的app 如微信、手Q、QQ音乐、QZone中的webview
它官网里提到了 Inspector (谷歌在Chrome中内嵌的一款调试工具Chrome DevTools)
官网QQ群 434421502

image.png

不让用户使用x5内核的方法:在聊天页面 输入 http://debugtbs.qq.com 进入后

image.png
选择 第一个选项 清除TBS内核 即可。 如果安卓机提示“您使用的为非x5内核浏览器”,但是你确定自己确实使用的是x5内核浏览器(页面下拉 在上面可以看到是否是使用x5内核),可在聊天窗口发送 debugmm.qq.com/?forcex5=true 强制开启X5内核后 再点击 清除TBS内核即可。

如何判断已加载了x5内核? http://soft.imtt.qq.com/browser/tes/feedback.html,显示000000表示加载的是系统内核,显示大于零的数字表示加载了x5内核(该数字是x5内核版本号)

2019年5月24日更新

今天测试一台vivo Y66i A(手机系统7.1.2、未升级原生浏览器版本Chrome Mobile 38.0.2125 vivoBrower5.xxx) 如果清除TBS内核后,则使用微信最原始内置的浏览器(不是x5内核),该浏览器内核版本比未升级原生浏览器内核版本要高(该浏览器内核版本跟微信版本有关系,未升级原生浏览器不支持let、=>等ES6语法,但该浏览器却支持)

九、Android 上的 x5 内核(主要针对微信等)

过程略繁琐,但是这个方案应该是目前调试webview最强大的工具,支持断点调试、控制台打印等。以下步骤以微信举例:

  • 前期准备

    • 下载 TbsSuiteNew.apk 安装到手机

    • 打开微信,进入任意聊天界面,输入框内输入 //deletetbs,点发送

    • 打开 TbsSuiteNew,安装本地 tbs 内核
      应用包名 微信:com.tencent.mm,qq:com.tencent.mobileqq,qq 空间:com.qzone,本例中选择微信即可

    • 启动应用,用微信访问一个页面,停留1分钟左右,目的是让微信来静默安装刚导入进去的tbs_xxxx_inspector.apk 包

    • 一分钟过后打开TbsSuiteNew 检查是否安装成功。
      这里还需要在检查下 打开微信 随便进入一个 webview 页面 然后长按页面文字是否有水滴 ,若有则成功

  • ADB安装

    • 官网下载 android-sdk ,执行tools文件夹下面的 android,然后选择 android sdk platform tools 安装( 示意图 )

    • 配置android环境变量 vim ~/.bash_profile

      export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools
      export PATH=$PATH:$ANDROID_TOOLS
      
    • 输入source .bash_profile,执行下环境变量;接着在终端输入 adb,看是否已经配置ok;

    • usb连接手机,启动调试模式。终端输入adb devices,就能看到已经连接的设备。
      有时 adb devices不能显示连接设备,需要拔掉数据线,多插几次,并且退出终端,然后重新打开,重启adb。

  • python启动调试服务

    • 下载 调试包 ,解压,找到其中的 inspector_client20150401 解压,然后进入

    • 执行以下 python 命令,

      python ./inspector.py —abd 你自己的adb路径
      python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb
      
  • 启动成功,PC 打开 Chrome 浏览器,访问 http://localhost:9222/; 手机打开微信任意 webview,就能在 Chrome 看到这个页面的选项卡,点进去就是熟悉的调试界面~

以上选自 移动端浏览器调试方法汇总

https://github.com/jieyou/remote_inspect_web_on_real_device

https://www.jianshu.com/p/ccf124f1f74b

十、微信开发者工具

推荐:微信开发者工具

不推荐(版本没在维护):微信web开发者工具

十一、 adb 辅助工具

UC 手机浏览器调试 可能需要用到 adb 辅助工具,具体可见 UC 手机浏览器调试经验

十二、 Android调试神器stetho

Stetho 是一个功能强大的 Android 应用调试桥,起到桥梁的作用,连接 Android 应用和 Chrome,通过 Chrome 开发者工具调试 Android 应用,提供视图元素检查,网络监控,数据库动态交互,Dumpapp(可扩展的命令行交互接口),JavaScript Console 等功能。
当启用后,开发者可以通过 Chrome 桌面浏览器中的开发者工具访问本地应用。开发者也可以选择启用可选的 dumpapp 工具提供一个强大的应用内部命令行接口。
作者:linchaolong
链接:https://www.jianshu.com/p/38d8324b126a

十三、debugGap

目前为止找到最好的移动端调试工具-debugGap
特点:据说安卓支持断点调试;其他感觉没啥特色;
官网 https://www.debuggap.com/debug_webview.html

十四、whistle

它 其实是Node 版的 Fiddler、Charles,不过这个工具能远比后两者更加适合 Web 开发者、使用更简单、功能也更加实用;其支持:1、替代本地的host文件;2、转换 http 协议(可本地模拟https)3、mock数据 4、修改后端的返回码 5、往html插入脚本或样式;

十五、UC浏览器调试

1、 开发版下载: https://dev.ucweb.com/
2、如何在手机上远程调试UC浏览器 https://dev.ucweb.com/docs/pwa/docs-zh/oo3g8d?spm=ucplus.11213647.toc.10.28c24ed0ihk661

十六、Mobile Debug

https://www.mobiledebug.com/

十七、Ghostlab

http://www.vanamco.com/ghostlab-downloads/

浏览器信息检测神器:

1、检测浏览器名称和版本及内核及版本的网站 :http://i.ewceo.com/browser.html
2、检测操作系统、浏览器内核及其版本的网站:https://ie.icoa.cn/
3、浏览器内核、操作系统、屏幕大小及h5支持情况:http://mybrowse.osfipin.com/ 【IE测试最准确】
4、Chromium浏览器内核检测:https://liulanmi.com/labs/core.html
5、非Chromium浏览器内核检测:https://liulanmi.com/core
6、Safari浏览器更新信息:https://trac.webkit.org/browser/tags/Safari-537.51.2
7、浏览器内核检测:http://pc.uc.cn/core/
8、浏览器头信息及ip地理位置对应关系 https://www.sojson.com/ip/
9、https://ie.itzmx.com/ 测试IE版本 准确

云真机

建议看我的这一篇文章:云真机汇总对比

其他工具

1、iphone、ipad 有真机补充:MIH(make it happen)工具: http://www.mihtool.com/
2、mac 有真机补充 https://www.parallels.com/ 最新版本可以在mac上安装IE8-11浏览器及安卓8.0

参考资料

1、移动端真机调试指南
2、前端 WebView 指南之调试篇
3、打造最舒适的webview调试环境

推荐资料

1、前端|本地调试H5页面方案总结
2、Charles 从入门到精通
3、手把手教你如何在Mac本地调试微信JS SDK
4、 各种 真机远程调试 方法 汇总

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容