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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/kabuda0311/article/details/80967454

使用真机调试可以还原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内的页面暂时没有找到更合适的解决办法。

展开阅读全文

没有更多推荐了,返回首页