360安全浏览器使用Remote Debugging远程调试手机端

原创 野人  2020-04-12 09:01  阅读 42 次

一般在电脑端,需要调试网站的一些样式,js代码之类的,只需要F12(审查元素)即可打开开发者工具了,而且在这上面可以很轻松的看到调试的结果,所以由此就想到手机端是不是也可以这么轻松的调试,尽管之前有看过这方面的文章,但是并没有的真正的去实际操作一番,好在调试顺利,随即写下文章记录下。

在开始之前也通过搜索引擎看了很多大佬的文章,但是都没有是在360安全浏览器的环境下调试的,我就在想都是用的谷歌内核的浏览器应该是可以的吧,事实证明我是对的。

一、调试前准备工具

1、电脑端——360安全浏览器(版本号12.1.2452.0),写上版本号的原因是,之前有出现过不同的版本之前是有一定的差异性的,所以就给放上的,也就是说如果没成功,可以试试在相同的坏境下是否能成功。

2、手机端——谷歌浏览器一枚(我在酷安APP下的)

3、手机一部

4、手机USB数据库一条

二、打开手机的开发人员选项

不同的手机,开发者选项打开方式有一定的差异性,不懂得朋友可以直接百度搜索【xx手机xx型号怎么打开开发人员选项】一般都是可以快速解决这个步骤,我就以华为手机为例:设置——系统——关于手机——连续点击版本号。

三、打开手机的USB调试模式

在二的基础之上,才可以打开USB调试模式,我的是在设置——系统——开发人员选项,然后按下图勾选。(小编就是因为这步没勾选对花了好多时间,排除问题,所以大家要注意了!)

四、开始调试

1、手机通过usb数据线连接到电脑,这步的话有的朋友会出现usb设备无法识别的情况,这里我建议大家统一使用相关的电脑版手机助手(我是360手机助手)帮你安装好驱动,好处就是使用手机助手,会自动识别你的机型,然后自动安装驱动,反正就是各种自动化操作,你只要保证usb数据线连接正常。

2、打开360安全浏览器网址栏输入:【chrome://inspect】,勾选【Discover USB devices】我这边默认就是勾选的,没有的朋友记得勾选,如果在上面的步骤都是正确的话,这时候手机会弹出下方右边图,记得允许就可以了。

3、识别到手机设备后,记得一定要在手机端打开谷歌浏览器APP浏览你要调试的网站,才能在【Remote Target】下面有相应的浏览的记录,这时候就可以对网站进行调试分析了,一般的点击【inspect】,不过好像是因为我的版本的问题,我需要点击【inspect fallback】才能进行调试。

总结

之前使用的调试方法都是用F12的审查元素,来模式手机端调试的,但是实际在真机上效果不显示或者有一定的差异性,而用该方法调试就可以避免这种问题。这里还有个小提醒,如果想在UC浏览器上调试的话,就要下载对应的UC浏览器开发版。

本文地址:http://www.yerenwz.com/1848.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论

  1. 有朝壹日网赚
    有朝壹日网赚 【农民】 @回复

    支持原创! 技术人才啊!