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

2018-07-09 本文已影响0人 sosay_b375

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

安装模拟器

mac上面的Android模拟器可选择的比较少，且性能不太好，这里推荐夜神Android模拟器https://www.yeshen.com/，windows上也可使用（windows建议版本v5.0.0https://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怎么办~

【iOS 终端】：设置 → Safari → 高级 → Web 检查器 → 开。（如图）

【OS X】：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

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

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