如何使用谷歌浏览器远程调试安卓/ios真机H5应用?

简介: 公司今年开始着手移动办公,将部分原来需要在PC端操作的功能逐渐增加到了移动端,开发了很多的H5报表。因为是内部用的功能,在测试的时候也没有可以去关注兼容性和一些app端的专项测试,我们只是负责测试自己部门开发的轻应用,接入到公司的平台中能不能正常使用。

1

背景 


今年年初受疫情的影响,给大部分同事办公带来了不便,因此,公司今年开始着手移动办公,将部分原来需要在PC端操作的功能逐渐增加到了移动端,开发了很多的H5报表。因为是内部用的功能,在测试的时候也没有可以去关注兼容性和一些app端的专项测试,我们只是负责测试自己部门开发的轻应用,接入到公司的平台中能不能正常使用。

上线一段时间后,偶尔会出现一些交互上的偶现问题不太好排查原因或者定位,最近遇到过一个偶现的问题,用户在使用过程中进入H5页面的时候白屏了,一次偶然的机会,看到了开发使用谷歌浏览器再调试真机,觉得这个功能挺实用的,因此把它记录下来,分享给大家一起学习。



2

远程调试android设备


有几个准备事项要先检查一下:

1、将手机与电脑用数据线连接,确保电脑上安装了手机的驱动,手机打开调试模式

2、确保电脑上可以访问谷歌的相关网站,否则无法捕捉到手机上的页面

可以从https://github.com/ 下载对应的版本

3、打开谷歌浏览器,在地址栏输入chrome://inspect/#devices


微信图片_20220113223350.jpg


点击inspect按钮,会弹出一个新的窗口,上面会显示手机上的页面,点一下刷新之后,会显示相关的请求加载信息:


微信图片_20220113223359.png


动态演示效果图如下:


image.gif


到此,安卓设备的远程调试就可以使用了,具体用来干什么,就看个人需要。


image.png


3

远程调试ios设备


ios设备的连接比安卓的要稍微复杂一点,需要额外安装2个工具。

1、安装scoop工具

需要在win10下,使用powershell安装scoop工具:

#修改执行策略,选择是
set-executionpolicy unrestricted -s cu 
#安装scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

执行完后,会显示一个类似下图的信息:



image.png


如果未得到这样的提示信息,可以多重试几次这个步骤,如果页面有标红的报错信息,可以看一下,C盘用户目录下,是否有生成scoop的文件夹,有的话,直接在scoop的文件夹目录下打开powershell窗口,再执行后面的操作。

2、通过scoop安装ios_webkit_debug_proxy

scoop bucket add extras
scoop install ios-webkit-debug-proxy

也可以从github上下载包进行安装:

https://github.com/google/ios-webkit-debug-proxy

3、手机也需要用数据线连接,并安装好相应的驱动,如果是抓取ios自带的safari浏览器上访问的网页的话,还需要在iphone的设置->safari-->高级->web检查器,打开对应的开关。


4、在powershell窗口中输入如下命令:

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html


image.png


然后谷歌浏览器地址栏输入chrome://inspect/#devices ,在Discover USB devices后面点击Port forwarding...,按照下面的配置添加9221端口,然后刷新页面,就可以捕捉到手机上访问的web网页地址,不过需要安装对应app的debug版本才可以在点击inspect的时候看到页面。



image.png


以上就是真机调试的一些简单操作步骤,当然,调试的工具肯定不止这一个,后续接触到更好的再分享给大家。

相关文章
|
1天前
|
5G Android开发 iOS开发
探索iOS与安卓在移动操作系统领域的技术竞争与合作
本文将深入探讨iOS和安卓这两大移动操作系统的技术竞争与合作。通过对市场份额、用户忠诚度、技术创新、生态系统建设以及安全性等方面的比较,我们将揭示这两个系统各自的优势和挑战。同时,我们还将分析它们如何通过技术合作来推动整个移动行业的发展。
|
2天前
|
存储 Android开发
详细解读Android获取已安装应用信息(图标,名称,版本号,包)
详细解读Android获取已安装应用信息(图标,名称,版本号,包)
|
2天前
|
存储 Android开发
详细解读Android获取已安装应用信息(图标,名称,版本号,包)
详细解读Android获取已安装应用信息(图标,名称,版本号,包)
|
2天前
|
Android开发 开发者 UED
使用AlarmManager实现Android应用中的定时任务
使用AlarmManager实现Android应用中的定时任务
|
3天前
|
安全 Android开发 iOS开发
安卓与iOS移动操作系统的发展与比较
在移动互联网时代的今天,安卓和iOS作为两大主流移动操作系统,各自以其独特的特性和生态系统深刻影响着全球用户。本文将探讨它们的发展历程、核心特点以及在用户体验、开发生态和安全性方面的比较。
|
4天前
|
安全 Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的深度对比
在移动应用开发的广阔天地中,安卓和iOS两大平台各占半壁江山。本文旨在通过数据驱动的分析方法,深入探讨这两大操作系统在开发环境、用户界面设计及市场表现等方面的差异。引用最新的行业报告和科研数据,结合技术专家的观点,本文将提供对开发者和市场分析师均有价值的洞见。
|
5天前
|
安全 Android开发 iOS开发
安卓与iOS的较量:从用户体验到系统安全
在移动操作系统的战场上,安卓和iOS一直是两大巨头。它们各自拥有独特的优势和特点,吸引了大量的用户。本文将从用户体验、系统安全和应用生态等方面对安卓和iOS进行深入的比较和分析,揭示它们之间的差异和竞争关系。
7 0
|
5天前
|
前端开发 开发工具 Android开发
安卓与iOS开发环境的差异性分析
在移动应用开发的广阔天地中,安卓与iOS两大平台各自占据着半壁江山。开发者在选择开发环境时往往需权衡两者的技术架构、开发工具及市场策略等多方面因素。本文深入探讨了安卓和iOS开发环境的主要差异,包括编程语言、IDE选择、API设计哲学等技术层面,以及用户群体、市场份额和分发渠道等市场层面的差异。通过对比分析,旨在为移动应用开发者提供清晰的决策依据,帮助他们在激烈的市场竞争中找到适合自身项目需求的最佳开发路径。
12 0
|
5天前
|
传感器 安全 Android开发
探索iOS与安卓应用开发的性能差异
在移动操作系统领域,iOS和安卓的较量从未停歇。本文将深入探讨两大平台在应用开发中的性能表现,揭示它们各自的优势与局限。通过对比分析,我们将理解开发者如何在这两个不同的生态系统中做出权衡,以及这些选择如何影响最终用户的体验。
7 0
|
3天前
|
iOS开发 开发者 UED
探索iOS开发中的SwiftUI框架
【6月更文挑战第28天】在移动应用开发的海洋中,SwiftUI作为iOS平台的新星,以其声明式语法和灵活性,正引领着界面设计的未来。本文将带你深入理解SwiftUI的核心概念、布局能力以及如何通过它提升开发效率,为开发者们提供一份实操指南,解锁SwiftUI的强大潜力。
12 1