如何在电脑上远程调试手机中的页面

如何在电脑上远程调试手机中的页面

1、用chrome浏览器远程调试安卓手机上的页面

  • 1)Chrome浏览器远程调试只能调试安卓手机,毕竟Chrome和安卓都是谷歌的(貌似有其他方式可以调试iphone但比较麻烦,目前我还不太清楚)
  • 2)电脑和手机分别安装Chrome浏览器(版本尽量是最新版,不是最新也要接近最新版本)
  • 3)把你的安卓手机开启usb调试模式,这个不同手机开启方式可能不一样,具体网上查查你的手机怎么开启就行
  • 4)如果是windows电脑,请安装你手机对应的电脑驱动程序
  • 5)电脑Chrome浏览器打开这个地址:chrome://inspect/#devices
  • 6)把手机用usb线连接上电脑,选择usb debug模式连接,这个一般连接的时候会弹出来让你选择,不同手机有可能有点不一样,比如我的魅蓝S6,就要选择『内置光盘』
    Xnip2018-09-17_01-28-261.png
    而小米3则是选择文件传输(选择以后就会自动问你是否同意使用usb调试之类的):
    IMG_75252.png

  • 7)打开手机Chrome浏览器,并打开你要调试的页面,如果一切正常,你将看到类似下图所示的界面:
    魅蓝S6:
    Xnip2018-09-16_13-54-18.png
    小米3:
    Xnip2018-09-17_02-48-32.png

点击inspect,即可开始调试:
Xnip2018-09-17_01-23-37.png
如果电脑上的Chrome浏览器没有出现手机上的页面,请检查:

  • 电脑是否正确安装了手机驱动(如果正确安装是否考虑重启电脑试试)?
  • 手机是否开启了USB调试模式?
  • 手机连接USB的时候是否使用了usb调试模式?(有时候很奇怪,插上线手机就是不提示问你是否使用usb调试模式,我遇到的情况是重启手机就好了)
    如果是Windows系统,这篇文章会更详细一点:移动前端页面与Chrome的远程真机调试
    另外这里还有一篇高级使用文章:Chrome 调试工具的一些高阶功能

2、用Safari浏览器远程调试iPhone上的页面

  • 1)因为Safari浏览器是苹果的,所以目前我这里测试的是用苹果电脑(即Mac)的Safari浏览器调试iPhone的Safari浏览器
  • 2)Mac的safari浏览器开启显示开发者工具选项:偏好设置高级
    Xnip2018-09-17_02-17-41.png
  • 3)把你的iPhone用数据线连接到Mac上
  • 4)Mac和iPhone都打开Safari浏览器,iPhone浏览器上打开你要调试的网页
  • 5)在Mac的Safari按下图操作即可调试iPhone的Safari浏览器上的网页
    Xnip2018-09-17_02-24-55.png
打赏

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

如何在电脑上远程调试手机中的页面