使用chrome浏览器调试移动端web页面
貌似史上最详尽的一篇教程,步步详细、步步带图,啥也不说开始往下看吧 :
以下所说软件都指 android 版
1、电脑中安装 chrome 浏览器,最新版就好了;
2、手机中安装 chrome 浏览器,总之安装最新版就好了;
3、将手机用 usb 线连接至电脑;
3、打开电脑中 chrome 浏览器,F12 键开启开发者工具;
4、开发者工具中依次点开“最右更多菜单”→“More tools”→“Remote devices”,看图:
QQ 截图 20161125145630.png
5、打开后开发者工具下面会看到“Remote devices”面板,并且可以看到已连接的手机设备,看图:
QQ 截图 20161125145921.png
6、手机中打开 chrome 浏览器,并浏览你想要调试的页面,本例打开百度首页,随便截张图:
Screenshot_2016-11-25-14-46-19.png
7、查看电脑端 chrome 浏览器开发者工具的“Remote devices”面板,会看到手机设备中已经打开的百度首页,看图:
QQ 截图 20161125150702.png
8、点击 “Remote devices”面板右侧的“Inspect”按钮,即可开启 chrome 熟悉的调试工具,还有实时的预览图哦,看图:
QQ 截图 20161125144507.png
9、接下来能干点啥就不多说了。。。
PS:我不会告诉你们微信打开的 web 页面也是可以的,其它手机浏览器请自测