通过UC开发者工具替代Chrome Remote Debug进行手机浏览器调试

mac2024-11-02  16

1.背景

Android移动端浏览器环境验证与测试,可使用vConsole[1],weirne[2],chrome remote debug[3]等方式验证。当然最理想 的方法是chrome remote debug,通过chrome可以使用调试控制台调试js,观察网络面板及性能面板等。

在国内使用chrome调试需要翻墙,否则会出现404页面,无法调试,使用不便。当出现404有时可以通过inspect fallback开页面,pc chrome的版本低于android手机chrome浏览器版时版本时,会出现inspect fallback选项。

chromium67 地址栏输入 chrome://inspect/#devices,会看到如下选项, 其中包含inspect fallback WebView in com.qihoo.browser (73.0.3683.121) ⚠ Remote browser is newer than client browser. Try `inspect fallback` if inspection fails. 携程_360搜索 https://m.so.com/s?q=%E6%90%BA%E7%A8%8B&srcg=360aphone_act_main inspect inspect fallback

但有时通过这种版本差异通过inspect fallback也无效,因此若能有一种和chrome一致的调试方式那么会提高效率,uc开发者工具即是一种替代方式,利用UC的开发者工具进行手机浏览器调试,而且包含chrome中涉及到的大多数测试面板。

2. 环境安装

UC开发者环境需要两个工具,浏览器开发者版本及开发者工具[4]。手机上选择安装开发者版的UC浏览器,开发者工具有mac/linux/windows几种,可根据开发环境安装。根据官方指南[5]进行配置。随后将android系统调整为调试模式,并通过usb连接开发机,并通过手机UC浏览器访问百度。随后打开开发者工具,如下图: 接着点击inspect即可打开测试窗口。

如果直接使用chrome又没翻墙就会出现弹出404无法进行调试的情况。

3 参考资料

[1].https://www.npmjs.com/package/vconsole [2].https://github.com/apache/cordova-weinre [3].https://developers.google.com/web/tools/chrome-devtools/remote-debugging [4].https://dev.ucweb.com/download/?spm=ucplus.11199946.0.0.53974692yuIVvd#DevTool [5].https://plus.ucweb.com/docs/pwa/docs-zh/oo3g8d?spm=ucplus.11213647.toc.10.7bed4ed09rilVU

最新回复(0)