使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

前言

移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便。而 Android 系统,尤其是国内环境下的 Android 系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台。工程师们采用了各种各样的方式来对其进行调试:alert 大法,页面引入或注入VConsole/eruda开启移动端控制台,Fiddler / Charles / Whistle抓包,Weinre......,各种解决方式层出不穷,但随着国内厂商积极的更新内核和旧版本Android机型的逐渐淘汰,在当前节点下,我们只需要做一点微小的工作,就可以使用我们最熟悉的 Chrome 开发者工具对移动端页面进行调试。

这篇文章主要讲述使用 Chrome 开发者工具调试 Android 终端内的各种 webview 环境下页面的方法,主要包含以下环境:

  • Chrome 等基于原生 Chromium 内核的浏览器
  • 微信、QQ、QQ 浏览器等 X5 内核webview
  • UC 浏览器等 U4 以上内核 Webview
  • App 内嵌 Webview
  • 系统浏览器

如果你已经分别知道以上每种环境中开启 Inspect 调试的方法,这篇文章对你来说意义不大,可以选择关闭。但如果以上有你不知道如何开启 Inspect 调试的环境甚至你不知道 Chrome 的 Inspect 调试,可以继续往下看,应该会对你之后的调试工作有所帮助,Let's do it!

开启 Chrome 浏览器 Inspect 调试

在 Chrome 浏览器地址栏中输入 chrome://inspect/#devices 并回车,就可以打开 Inspect 调试界面,此时我们勾选 Discover USB devices 选项便可以看到设备列表。

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

然后打开手机中开发者选项并打开 USB 调试开关(具体方法自行百度,不同手机有一定区别),使用数据线将手机连接到电脑上,我们就可以在设备列表中看到自己的设备。

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

这时,如果你手机上安装了 Chrome 浏览器的话,随便打开一个网址,设备列表中你的设备下便会出现你打开的页面。

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

此时我们点击 inspect 选项,就会看见熟悉的调试界面。

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

微信、QQ、QQ浏览器等 X5 内核 Webview

X5 内核环境下,我们访问 debugx5.qq.com/

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

我们选择信息Tab并勾选“打开TBS内核Inspector调试功能”和“打开TBS内核X5jscore Inspector调试功能”两个选项,完成后重启页面生效

然后 inspect 页面就会自动刷新列表,这时我们就能对微信及 QQ 等 X5 内核 Webview 进行调试

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)-即刻学术

UC 浏览器等 U4 以上内核 Webview

针对U4及以上内核,我们访问 plus.ucweb.com/download/,便可下载中文版及国际版 UC 浏览器的对应开发版

然后我们在 UC 开发版中打开要调试的页面,和上面一样,我们也可以在列表中看到 UC 浏览器打开的页面并对其进行调试

App 内嵌 Webview

很多团队会采用 Hybrid 模式开发业务,针对 App 内嵌页面,我们需要 Android 同事协助打开 Webview 调试,具体方法为:

webView.setWebContentsDebuggingEnabled(true);

每个 webview 组件实例需要单独设置,开启后便可进行 inspect 调试

给TA打赏
共{{data.count}}人
人已打赏
手机数码技术活

幻14 2022款 各种BUG的解决方案(包括不定时卡顿和休眠黑屏假死)

2022-8-17 21:56:15

手机数码数码测评

165Hz机皇 腾讯红魔游戏手机6评测

2021-4-26 19:21:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索