最终成果预览
image
如图,左边会实时显示真实手机页面的预览(注意是你真实手机,而不是chrome浏览器开启模拟手机端的页面),右边是chrome的开发者模式,包含所有日常用的工具,怎么样,是不是很惊喜,很开心,也很想要实现,接下来,就跟着我一步一步的来操作吧。
环境配置
1.手机启用开发者模式
远程调试需要打开”开发者模式”。如果你的手机已经打开，可以跳过这一步。
安卓手机开发者模式的打开方法是，进入”设置 > 关于手机”菜单，找到”内部版本号”这一项（或类似名称的条目），在上面连续按七次。退回上一级菜单，应该就能看到”开发者模式”。
image
关闭"关于手机"页面，打开"开发人员选项"，打开”USB 调试”选项。
image
2.手机上安装chrome浏览器
安装包我已经上传百度网盘了chrome浏览器（密码:zj68）
3.chrome浏览器中发现安卓设备
在chrome浏览器中输入
chrome://inspect/
就可以看到如下页面，勾选discover usb devices选项
image
或者在电脑的Chrome浏览器的菜单中选择
更多工具>开发者工具,然后在出现的面板的右上角选择more tools->remote devices也可以看到类似页面
- 连接手机（windows系统记得提前安装驱动）在手机上选择始终允许这台计算机访问即可
-
在电脑上即可发现手机设备，如图
image
4.手机打开网页开始调试
-
手机用chrome浏览器打开想要调试的网页，一定要chrome浏览器哦，打开之后就会显示手机打开网页的标签，如图：
image
-
点击下面的
inspect按钮即可调试
image
image
inspect按钮还提供了重载、关闭等操作。有了这个神器之后，妈妈再也不用担心我调试手机页面了，另外要说明的是，这个方法不仅能调试手机网页，还能调试所有以webview的页面，比如，有些应用是基于这个webview来实现的页面，通过这个方法，都能调试
在有了这篇文章的基础后，请看我博客中的另一篇文章，真机实时显示电脑开发的网页效果
本人博客：http://yushihua.vip
本人公众号：
bianchengIT（手把手教编程IT）
分享编程相关经验，欢迎大家关注，只分享干货
来源: 华哥博客
作者: Hua
链接: http://yushihua.vip/2019/07/13/meng-mei-yi-qiu-de-dian-nao-diao-shi-shou-ji-wang-ye-lai-liao/
文章著作权归作者所有，转载请注明出处。
网友评论