如何调试手机网页

摘要:
本文将会介绍如何在真机上调试移动端的页面,和之前的《如何在电脑上测试手机网站》的不同之处在于真机环境。本会介绍的方法如下:UC浏览器开发版Chrome 远程调试Firefox 远程调试Opera 远程调试WeinreUC浏览器开发版感谢UC造出这么好用的浏览器,同时注重开发者,远好于国内其他厂商,UC浏览器有一个开发版非常赞。UC浏览器开发版网址下载地址UC开发版的网站上介绍的很清楚,也有很详细的文档,这里就不再赘述,简单记录下WIFI的调试方法,保证pc和手机在同一个网段,在PC上打开Chro

本文将会介绍如何在真机上调试移动端的页面,和之前的《如何在电脑上测试手机网站》的不同之处在于真机环境。

本会介绍的方法如下:

  • UC浏览器开发版

  • Chrome 远程调试

  • Firefox 远程调试

  • Opera 远程调试

  • Weinre

UC浏览器开发版

感谢UC造出这么好用的浏览器,同时注重开发者,远好于国内其他厂商,UC浏览器有一个开发版非常赞。

UC开发版的网站上介绍的很清楚,也有很详细的文档,这里就不再赘述,简单记录下WIFI的调试方法,保证pc和手机在同一个网段,在PC上打开Chrome或Safari,在地址栏输入:手机IP + :9998,在手机端会弹出确认按钮,点击确认后,就可在pc上看到效果了,如此简单。

Chrome浏览器

要先使用Chrome浏览器的远程调试功能需要先FQ才可以,还需做如下准备:

  • PC Chrome最新版

  • 安卓 Chrome最新版

  • 数据线一根

插上数据线,打开手机里的浏览器,然后PC浏览器-菜单-更多工具-检查设备,就会看到如下界面:

如何调试手机网页第1张

点击inspect,稍等片刻即可打开调试界面:

如何调试手机网页第2张

功能和PC一样,异常强大。

更多信息请移步这里

Firefox浏览器

首先,需要如下几个准备工作:

  • PC Firefox 15+

  • Android Firefox 15+

  • 一根数据线

  • adb驱动

上面三个就不多解释了,adb驱动我们安装个手机管家什么的,都可以自动安装上,打开命令行中断,输入adb命令,如果看到长长的输出,那么恭喜你,你已经安装了adb驱动了。

输入如下命令可以查看链接的设备。

adb devices

如何调试手机网页第3张

接下来我们需要用adb在本地开一个接口来做代理接受数据:

adb forward tcp:6000 tcp:6000

接下来就是打开手机和电脑的远程调试开惯了,默认都是关闭的。

手机端Firefox点击菜单栏的”设置”->”开发者工具”,勾选”远程调试”。

如何调试手机网页第4张

PC端Firefox打开about:config,设置devtools.debugger.remote-enabled为True。或者打开开发者工具,找到设置面板,打开里面的远程调试。

如何调试手机网页第5张

接下来找到桌面端Firefox-菜单-工具-Web开发者-远程链接。保证端口号和上面开启的端口号一致就好了。

如何调试手机网页第6张

如果你没有其他特别的远程调试要求,只需要使用默认值。按“确定”。手机端会弹出一个确定按钮,点击确定就可以在电脑上调试手机上的网页了。

这里火狐的实现有一个不好的地方,就是在调试面板里选择dom是,手机页面里不会跟着变色,这点还需改进。

更多信息,请移步这里

Opera浏览器

请下载opera官方浏览器,而非中文版,中文版把这个功能阉割了(鄙视一下),在手机浏览器地址栏输入如下命令,会看到下图所示的信息。

opera:debug

如何调试手机网页第7张

勾上enable选项,然后在pc上命令行输入如下命令:

adb forward tcp:9222 localabstract:opera_devtools_remote

然后用基于chrominu的浏览器打开http://localhost:9222,已chrome为例,会看到如下界面:

如何调试手机网页第8张

点击相应页面即可进入调试界面,非常方便。

这里需要注意,可能会出现空白,因为opera的调试页面使用了不安全的链接被组织了,只需点一下右上角的安全提示按钮,选择允许即可,如下图所示。

如何调试手机网页第9张

其实在chrome浏览器的检索设备界面,也能看到opera的页面,但是点击inspect就会崩溃,无语啊。

更多信息,请移步这里

Weinre

网上关于winner的介绍大多是基于java,很繁琐,其实基于node+npm会简单很多,感谢node,感谢npm。

打开命令行输入如下命令安装npm

npm -g install weinre #win sudo npm -g install weinre # linux

安装成功了后,在命令行是输入

weinre --httpPort 8081 --boundHost -all-

会开到如下的提示,上面的httpPort是指定接口,省略的话会默认8080,boundHost指定为all,才能在远程设备访问(手机)上访问。

如何调试手机网页第10张

在浏览器打开 http://localhost:8080,会看到weinre的介绍信息如下:

如何调试手机网页第11张

点击上图中的1会进入相应的调试页面,现在还是空的,后面会有图,点击2会进入weinre的文档。

在需要调试的页面添加如下js,这个js是打开的weinre页面中的js代码,就可在在pc端调试手机端页面。

<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>

假设电脑ip是192.168.0.100,服务器的端口8080,需要将上面代码中的localhost替换为电脑ip,然后在手机上访问电脑的上的页面,就可以通过weinre调试了。

如何调试手机网页第12张

总结

还有一些其他方法还没有实验过,只是听说过,所以就不写出来了,先挖个坑吧,以后慢慢填。

网上的很多资料都陈旧了,浏览器已经改版了,还有些人根本自己都没有实验过,就敢写,上面的方法我都亲自实验过了。如果遇到什么问题,可以给我留言讨论。


免责声明:文章转载自《如何调试手机网页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇DeepFaceLab进阶(4):通过Colab免费使用Tesla K80 跑模型!推荐一些顶级的Android开发书籍(转)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

WPF知识点全攻略13- 绘图

行&lt;线条X1=“10”Y1=“100”X2=“260”Y2=“100“Stroke=“黑色”StrokeDashArray=“5”StrokeThickness=“2”&gt;线冲程&gt;矩形&lt;矩形边距=“5”笔划=“黑色”高度=“100”宽度=“100“&gt;&lt;&书信电报,...

PowerQuery清理非文件名字符(清除指定列表中的所有字符)

在左侧导航窗格的空白区域右击,依次找到空白查询项接下来的思路是:遍历列表SearchList中的所有项,依次清理Data表中所有想要处理的列。第三个参数是一个函数:它告诉List.Accumulate函数,在每一次使用SearchList中某一项操作Data表时,其操作的方式是如何的。...

flutter vscode+第三方安卓模拟器

1.首先打开夜曲模拟器2.Win+R,选择cmd,在第三方模拟器安装目录的bin目录下输入夜曲模拟器,然后运行命令:nox_Adb.execonnect127.0.0.1:620013。打开项目终端的vscode并建立连接:adbconnect127.00.1:62001(夜神模拟器的默认端口)4。查看连接:adbdevices或不使用第三方模拟器:1.打开...

webstorm关闭烦人的eslint语法检查

使用eslint语法检查后,我们发现JS代码中到处都是红线。通过右键菜单中的fixeslint problems选项,我们可以发现页面代码格式完全被eslint包装。只需关闭exlint语法检查。看不见,想不起来。反向关闭不会影响代码开发,但相反,它会影响代码开发。关闭eslint位置:文件--˃设置--˃语言和框架--˃CodeQualityTools--...

数据库软考易混淆知识之信息化基础、项目管理

2、 关键路径关键路径是活动图中最长的路径示例:图中显示了软件项目的活动图,其中固定点表示项目里程碑,连接顶点的边表示包含的活动,边上的数字表示活动持续时间的天数,则完成项目的最短时间为()天,活动EH和IJ的放松时间分别为()日。...

FoxMail 7.2的邮件存储目录修改

在FoxMail升级到7.x之后,邮件的存储路径和策略也发生了变化。许多朋友想更改FoxMail 7.2邮件的位置,因为他们担心重新安装系统时会占用磁盘C上的空间或丢失邮件。但是,FoxMail设置界面中没有提供相应的功能。我们该怎么办?同样,如果您想将邮件存储在磁盘D上,则需要执行以下操作:1.退出运行FoxMail,而不重新安装它。...