网页手机调试之UC浏览器开发版
先森的网站在安卓版UC浏览器上出了BUG,这次先森有点摸不着头脑,因为只有安卓版才存在这个问题,所以先森想要直接从电脑调试手机,就像电脑上F12审查元素调试网页一样。
昨天发布了一篇Adobe Edge Inspect CC的折腾经过,一把辛酸结果还没成功。最后还是放弃了。先森在百度Adobe Edge Inspect CC教程的时候,也看到过另一种安卓调试方式,就是利用谷歌的Chrome浏览器远程调试(Remote Debugging)。其实另外还有一个叫做Weinre的,但是先森在其官网上找来找去,感觉和Remote Debugging是差不多的。
然而Chrome浏览器的远程调试需要用数据线连接安卓手机,并且手机要开启开发者模式。开始开发者模式简单,但是先森折腾了一下午,也没能把三星、华为的手机驱动装好,电脑始终不能连接手机。
后来用能够连接手机的电脑尝试了,结果谷歌Chrome浏览器远程调试界面还是没有显示出手机(Chrome浏览器地址栏输入chrome://inspect 或者about:inspect)。没办法,放弃。
到了晚上,先森在放弃之后突然想起,Chrome浏览器电脑上有个开发者模式,UC浏览器有没有呢?
结果一百度,就找到了一个让先森惊喜的搜索结果,也就是本文的标题,UC浏览器开发版。大家可以去看看,越看越惊喜哦!
先看最终的效果图,先森将浏览器的调试界面和手机被调试的界面拼在了一起,这样看起来效果更直观(点击后按F键看最大化/点击倒数第二个按钮):
UC浏览器调试界面
配置调试模式
其实关于如何配置,UC+开放平台已经写得很清楚了,只是先森在设置的时候还是走了一截弯路,所以先森还是把自己的调试过程写出来。
1.准备工作
手机端下载UC浏览器开发者版,电脑端安装chrome浏览器(先森尝试了下UC浏览器电脑版,好像不行)。
2.连接手机与PC
有两种连接方式。一种是WIFI连接,手机与电脑同一个网段下即可。另一种是USB连接,这又是像上面说的一样,需要手机进入开发者模式,电脑数据线连接手机,而且USB连接模式需要搭建AndroidSDK开发环境或安装adb工具。关于怎么USB连接,UC有详细介绍,先森不在累述,而且先森使用的是WIFI连接。
WiFi连接非常方便,先森推荐使用这种方法。
3.开始调试
WIFI连接的话,直接在chrome中输入:手机IP+:9998
关于手机的IP查看,一般在设置->关于设备->状态,可以找到。
USB方式的先森就不多说了。
输入访问后,手机上UC浏览器开发者版会弹出对话框,先森用的是三星S3,情况如下图:
UC浏览器开发者版弹出对话框
这里点击确定就行了。然后chrome浏览器会显示出UC浏览器中打开的网页索引界面:
chrome浏览器索引界面显示
这时,点击任一需要调试的页面即可进行调试。调试的界面和审查元素的样式一样,操作起来感到非常熟悉:
chrome调试页面
当UC浏览器开发者版的某个页面被远端浏览器调试时,系统通知栏会显示扳手图标,提示UC浏览器-调试模式开启,表明当前手机页面处于调试状态。先森想说,震动模式的三星,进入调试模式的震动时间还真长,长!
折腾总结
这次折腾网页手机调试,Adobe Edge Inspect CC浪费了先森上午半天时间,USB手机连接电脑浪费了先森下午时间,UC浏览器开发者版先森没看懂,去折腾安装adb工具(实际上WIFI模式根本用不着)折腾了一晚上。
浪费了一整天,然而并没有成效。结论就是折腾之中无时间。
另外,实现WiFi调试是先森第二天早上花了一分钟成功的。。。
(资源库 www.zyku.net)
原文链接:https://www.capjsj.cn/wysjtszucllqkfb.html
上一篇:手机web前端调试页面的几种方式
栏 目:工具资源
下一篇:通过chrome inspect模式进行调试,设备连接成功,但一直没有inspect内容出现
本文标题:网页手机调试之UC浏览器开发版
本文地址:https://www.zyku.net/gongju/2060.html
您可能感兴趣的文章
- 03-16手机web前端调试页面的几种方式
- 06-17PHP 7安装调试工具Xdebug扩展的方法教程
- 02-21dedecms文章及列表标题SEO调试
- 02-19Zend Studio调试php教程
- 02-18Yii调试SQL的常用方法
- 04-01IOS14小组件添加照片设置方法
- 03-17javascript-基本数据类型和转换
- 09-14抖音粉丝级别如何查询
- 11-15vivoX70Pro启用无障碍设置步骤一览
- 05-16DeDecms文章列表每一行不一样的方法
- 01-08vivos12怎样设置双击亮屏
- 09-19猫耳FM未关注人消息如何关闭
- 04-04XShell与虚拟机连接的IP问题
- 05-31linux 网卡配置详解及实例
- 04-02iPhone查看蹭网教程
- 09-17oppo手机怎么智能拦截垃圾短信
- 01-11小米12Pro如何设置边缘防误触
- 01-12全能音频裁剪-全能音频裁剪应用软件功
- 02-08opporeno5pro状态栏显示实时网速设置
- 01-11微控云-微控云应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 07-15帝国CMS灵动标签调用Discuz帖子的方法
- 02-23DedeCMS附件上传后不自动改名的实现方
- 02-17帝国CMS-前台定时执行刷新任务插件下载
- 05-10javascript实现单张或多张图片持续无
- 12-30华为手机开启淘宝应用锁方法介绍
- 10-08苹果13promax录屏功能在哪里
- 02-27帝国CMS 7.0后台登录验证码不显示的解
- 11-16homepodmini重新配对教程分享
- 01-25使用numpy实现topk函数操作(并排序)
- 02-19SiteServer CMS内容组管理