【转】移动应用调试之 Inspect

移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备。 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢?

下面介绍2种针对android机的调试方法

 一.直接使用Chrome浏览器:

1.在浏览器中输入待调试的site,F12打开调试窗口;

2.根据需要选择不同类型设备进行调试;

【转】移动应用调试之 Inspect

二.使用手机真机调试:

1. 在pc和android手机上都安装最新版本的chrome;
2. 使用usb将手机的PC相连接;
3. 手机中打开“设置”->"开发人员选项"->"USB调试"

 【转】移动应用调试之 Inspect



4. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devices 选中discover usb devices。可以看到我们的手机设备,如下图所示:

 【转】移动应用调试之 Inspect



5.在手机侧chrome中访问页面. 比如:https://test.lifeccp.com/m/ 同步的,我们会在pc侧的chrome上看到到手机侧访问的页面,如下图所示

【转】移动应用调试之 Inspect

【转】移动应用调试之 Inspect

 



6. 点击上图中的inspect, 熟悉的调试界面出现!

 【转】移动应用调试之 Inspect


在调试窗口中选择 More tools --> Inpect devices...

【转】移动应用调试之 Inspect

在下面页面打开 Inspect:

【转】移动应用调试之 Inspect

注意图中右上角的手机图标,点击后,PC和手机的显示内容相同。手机打开的页面被直接拉到pc上显示了。调试更加事半功倍!
【转】移动应用调试之 Inspect

想了解更多信息,可以参考Chrome官方帮助:https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

相关推荐