uc浏览器分享新闻到微信pc打开不要跳转UC打开?

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

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

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

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

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

看到这个熟悉的界面了吗?接下来你便可以和调试 PC 界面一样通过 Chrome 进行你所需要的调试你茬左侧屏幕上做的一切操作和你的手机上的操作会始终保持同步,如果你嫌左边这块多余也可以关闭 Toggle Screencast 只保留控制台本身。

点击左上角箭頭然后手指点击手机屏幕你要选择的区域,即可完成选取指定元素操作其余的操作都和在 PC 上完全一样。

如果你之前没有使用过这种调試方式你应该会感到相比之前的调试方式更加方便快捷

问题来了,Chrome 手机浏览器在国内市场份额非常少我们的页面主要出现的地方也是微信pc,QQUC浏览器或者 App 内嵌等等,针对这些环境如何开启 inspect 调试?下面我们逐一讨论

在这个页面中我们可以对 X5 内核进行配置(如非必要不建议改动配置),我们选择信息Tab并勾选“打开TBS内核Inspector调试功能”和“打开TBS内核X5jscore Inspector调试功能”两个选项完成后重启页面生效

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

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

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

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

针对 MIUI 自带浏览器(MIUI为例),我们需要刷入开发版系统然后系统自带浏览器便可以通过 inspect 进行调试

以上就是茬使用 Chrome 开发者工具调试 Android 端各种环境 Web 页面的方法,希望能帮助到你

如果文章对你有帮助欢迎关注我的微信pc公众号(骄尔),不定期更新踩坑笔记好用的工具和有趣的思想,谢谢!

是指点击微信pc中用“在浏览器中咑开”后是直接用UC浏览器打开吗

这个需要到手机设置—应用程序—找到微信pc—清除数据,然后再重新点击微信pc中选择“在浏览器中打开”—选择浏览器 即可

本回答被提问者和网友采纳

你对这个回答的评价是?

我要回帖

更多关于 微信pc 的文章

 

随机推荐