使用Chrome DevTools调试Android和iOS页面

2018-11-11 18:57:19 / 打印

在实际开发过程中,我们写好的页面在移动设备中打开可能会没有达到预期的效果,为了能够更容易的分辨问题,今天特地给大家准备了一个小技巧。

首先在电脑上安装新版谷歌浏览器,然后地址栏输入chrome://inspect,会打开设备(iOS和Android)监视页面

1、使用usb连接电脑,手机要开启usb调试

2、手机上安装最新版谷歌浏览器并打开,设备监视页面会多出了一个设备,并且能看到当前手机上谷歌浏览器打开的网页的连接

可以在这里输入手机要打开的url然后open,手机上显示的当前页面就会改变

inspect表示开始调试当前页面,会打开调试面板(重要)

focus tab,表示让手机显示当前这个连接

reload表示重新加载页面,也就是刷新

close表示关闭当前手机显示的页面

接下来,点击inspect开始调试页面,注意如果google浏览器不能翻|墙的话,这个调试页面是打不开的,可以百度修改hosts文件翻|墙

然后就可以像调试PC端网页一样远程调试手机网页了

1、电脑安装iTunes软件,不然苹果手机不能正常被识别,安装好后数据线连接手机和电脑

2、打开手机的设置=>Sarafi=>高级=>Web检查器=>启用

3、下载ios-webkit-debug-prox代理(32位或者64位),其作用就是在Chrome和Sarafi之间建立了一个代理,便于电脑的Chrome检测手机Sarafi打开的页面

4、在cmd中执行ios_webkit_debug_proxy-f chrome-devtools://devtools/bundled/inspector.html,命令中-f是以谷歌内置的监视器来调试(默认使用远程的)

启动后会监听9222端口,然后看到连接上了一台名为jiba的iOS设备,括号中为设备的UDID;然后看谷歌浏览器是否检查了这个端口,右图中有9222端口即可,没有就手动添加

此时打开手机Sarafi浏览器,打开百度首页,发现浏览器能检测到,没看到就刷新这个监视界面,一般来说会在3秒内自动出现