如何使用谷歌浏览器远程调试安卓/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


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

相关文章
|
22天前
|
安全 Android开发 iOS开发
Android vs iOS:深入剖析两大移动操作系统的优劣与未来趋势####
【10月更文挑战第21天】 本文旨在通过技术视角,全面对比分析Android与iOS两大主流移动操作系统的架构差异、用户体验、安全性及生态系统等方面,探讨其各自优势与不足,并预测未来发展趋势。 ####
35 1
|
13天前
|
IDE 开发工具 Android开发
移动应用开发之旅:探索Android和iOS平台
在这篇文章中,我们将深入探讨移动应用开发的两个主要平台——Android和iOS。我们将了解它们的操作系统、开发环境和工具,并通过代码示例展示如何在这两个平台上创建一个简单的“Hello World”应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧,帮助你更好地理解和掌握移动应用开发。
39 17
|
13天前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
38 14
|
16天前
|
Java Linux 数据库
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。
|
17天前
|
Java 开发工具 Android开发
安卓与iOS开发环境对比分析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文深入探讨了这两个平台的开发环境,从编程语言、开发工具到用户界面设计等多个角度进行比较。通过实际案例分析和代码示例,我们旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和个人偏好做出明智的选择。无论你是初涉移动开发领域的新手,还是寻求跨平台解决方案的资深开发者,这篇文章都将为你提供宝贵的信息和启示。
24 8
|
12天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
15天前
|
人工智能 安全 物联网
Android与iOS:移动操作系统的双雄争霸
在智能手机市场中,Android和iOS作为两大主流操作系统,各自拥有庞大的用户群体和独特的生态系统。本文将深入探讨这两种系统的发展历程、技术特点、市场表现以及未来趋势,以期为读者提供全面而深入的了解。通过对比分析,我们可以发现,尽管Android和iOS在某些方面存在竞争关系,但它们也在相互借鉴中不断进步和完善。
|
12天前
|
安全 生物认证 Android开发
深入探索iOS与Android操作系统的安全性差异
本文旨在通过对比分析iOS和Android两大主流移动操作系统在安全性方面的差异,揭示它们各自的安全机制、面临的挑战以及用户如何提升自身设备的安全保护。通过对系统架构、应用审核机制、数据加密方式及隐私政策的深入探讨,本文为读者提供了一个全面了解两大平台安全性的视角,并提出了实用的安全建议。
|
13天前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
17天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。