使用Android模拟机开发调试移动端页面

2024-05-11 06:10:06

使用真机调试可以还原bug场景，但由于真机上不方便输出调试信息，不容易进行代码调试。这里可以通过在电脑上安装一个Android模拟器，然后结合Chrome的devices远程设备功能，进行移动端页面的开发和调试

安装模拟器

mac上面的Android模拟器可选择的比较少，且性能不太好，这里推荐夜神Android模拟器 https://www.yeshen.com/ ，windows上也可使用（windows建议版本v5.0.0 https://www.yeshen.com/blog/version/）

然后设置代理、下载App等

记得在浏览器中访问 ip:端口下载证书

使用Chrome的远程设备功能

使用模拟器打开APP或者浏览器，进入需要调试的web页面

打开chrome，在地址栏输入 chrome://inspect/#devices ，可以看见已经打开的页面

注意：第一次使用chrome://inspect/#devices 需要翻墙下载一些依赖工具才行，确保Chrome可以访问google.com

点击对应页面下的inspect，则会打开chrome开发者工具

然后就可以愉快的进行调试啦~

调试webview页面需要客户端配置支持webkit远程调试，所以并不是所有的app都可以按照这种操作进行调试的。

Android真机

android手机的调试web页面可以使用Chrome移动版配合进行调试

android手机连接相同局域网，然后打开移动端chrome输出需要调试的页面，
PC端chrome地址栏输入chrome://inspect/#devices，可以查看到对应的设备及打开页面，选择即可进行调试

这种方式好像不能直接调试app内的webview页面~

iPhone怎么办~

这里参考 https://chon.io/blog/safari-ios-iphone-itouch-web-dev-inspector/

【iOS 终端】：设置 → Safari → 高级 → Web 检查器 → 开。（如图）
【OS X】：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

然后通过数据线连接iPhone至mac，打开safari，在右上角的开发->iPhone，看见对应打开的页面，点击展开开发者工具，即可在电脑上调试移动端页面

由于Xcode内置的iPhone模拟器无法安装AppStore的应用，因此暂时只能通过在Mac上使用Safari进行网页调试，webview内的页面暂时没有找到更合适的解决办法。

使用Android模拟机开发调试移动端页面相关推荐

怎么在pc端浏览器调试移动端页面
在最近的工作中兼任一点测试工作,需要调试移动端页面,在看了好多方法大概主要就是以google chrome浏览器为主,大概步骤为: 1.打开chrome浏览器 2.输入网址 3.按f12呼出开发者工具 ...
Android Studio系列（二）使用Android Studio开发/调试整个android系统源代码（不定时更新）
本文是以源码中development/tools/idegen/README作为指导文档,给出了使用Android Studio导入Android源码的方法步骤. 环境: Ubuntu 12.04,o ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
android 布局字体大小,移动端页面布局及字体大小该如何设置
之前发过一篇文章<移动端应该如何动态设置字体大小?>,主要说了移动web端布局的一些解决方法,本文再一次把这个问题提出来,并分别对安卓和IOS设备的屏幕了解做出自己的分享,在进入正文之前最 ...
android service前台服务器,Android网络前台向服务端页面请求数据
这是一个android前台向服务端网站请求少量数据的小例子. 首先设计好服务端,再来写安卓前端. 一:服务端新建动态网站,在java包下新建一个类继承HttpServlet父类,重写doGet()方 ...
weinre调试移动端页面
1. 安装 npm install -g weinre 2. 启动 weinre --httpPort 8080 --boundHost -all- 也可以新建 ~(win: c:/user/youn ...
火狐（firefox）调试移动端页面
大家都知道火狐有firebug,不管是调试css还是调试js都非常的棒. 那火狐自带的调试工具大家知道吗? 今天我们就来讲讲火狐自带的调试工具如何使用户或自带的调试工具调试手机站? 1.打开火狐,如 ...
在mac电脑上,用Safari浏览器调试ios手机移动端页面
打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器], 具体如下图所示打开Mac上Safari的开发者模式,流程是[Safar ...
在mac上如何用safari调试ios手机的移动端页面
步骤如下: 第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图2 第二步:打开Mac上Safari ...

最新文章

热门文章