• H5 页面调试小帮手,UC 开发者工具


    01 调试web页面难

    接触过app自动化的都比较清楚,如果想要对web应用或者Hybrid应用进行调试时(获取页面元素信息等等),必定绕不开的就是chrome浏览器的inspect功能了: 

    在chrome浏览器URL中输入chrome://inspect即可对移动设备中的web页面进行调试。方便是方便,但是碰到的坑数不胜数: 

      点击inspect发现加载的是空白页面 

    ★  点击inspect出来的是http 404

    相信大家碰到这种问题第一时间就是百度去找到解决方案:chrome使用inspect需要下载一些额外插件。但是这些插件都是在墙外(大家都懂得):

    ★  科学上网,但是免费的工具不太稳定,稳定的又要收费!

    ★  下载离线开发者工具调试包,版本多,找到一个对应版本的好难。

    02 uc-devtools工具

    最近笔者闲逛论坛发现一款比较不错的工具:UC开发者工具。安利给大家 

    这是它的官网:https://dev.ucweb.com/

    以及工具的简单介绍:

    开发者版本 (Developer Edition) 支持 DevTools Protocol,它允许开发者使用任何兼容该协议的客户端(如 Chrome 开发者工具)进行远程调试。

    最新版基于 Chromium 57 构建它允许开发者不再需要依赖其他工具进行调试。

    03 工具安装及使用效果

    安装很简单:直接点击下载安装即可,由于是基于Chromium,所以原理其实和chrome的inspect类似,只不过不需要科学上网了!

    使用步骤:

    ★  打开手机/模拟器,保证能够通过adb devices检测到设备(检测不到的同学可以看下我之前写的adb连接问题整理这篇blog)

    ★  打开任意手机端浏览器访问网页或者H5页面。 

    注意:如果是app内嵌web页面,需要打开app的webview debug模式

    ★ 进行到第二步如果发现显示不出来,可以选择设置->本地Devtools Inspector UI资源

    点击inspect之后,嗯,效果可以的,这是浏览器中访问的百度首页:

     

    微信公众号支持?没问题:

     

    小程序支持?也没问题!

     

    注意事项: 

    ★  微信内H5页面调试需要将调试模式打开

    ★  微信小程序调试页面时,需要从搜一搜->搜索小程序入口进入

    调试夜神模拟器:

    1、开启uc开发者工具

    2、打开夜神模拟器的开发者选项和usb调试:

    打开下方的“设置”-“关于平板电脑”-“版本号”,连续点击5次

    返回,重新进入则可看到“开发者选项”,打开usb调试

     

    3、adb检查是否连接上模拟器:

    在cmd 切换到夜神模拟器安装位置bin目录,如:D:yeshenNoxin,并执行代码 nox_adb.exe connect 127.0.0.1:62001

     

     4、在模拟器上启动app或浏览器:

     

  • 相关阅读:
    UIWindowLevel详解 一片
    关于博客的原创和转载的一点儿看法 一片
    UIViewController生命周期学习笔记 一片
    UINavigationController详解 一片
    UIColor,CGColor,CIColor三者间的区别和联系 一片
    subview事件响应范围 一片
    viewWithTag获取subview规则详解 一片
    FirstResponder 释放问题 一片
    UITabBarController详解 一片
    做IOS开发这一年 一片
  • 原文地址:https://www.cnblogs.com/Sammy-chen/p/10032703.html
Copyright © 2020-2023  润新知