在调试PC网页时,我们可以查看控制台,元素DOM,网络,资源等等。但在移动端,一个小小的屏幕上,我们很难做这些操作,因此我们需要一些特殊的调试方法,去查看移动端页面的运行情况。
通常移动端的调试方法,或多或少需要侵入项目代码。我们可以根据侵入项目的程度,进行分类汇总。
调试分类
- 侵入型:指需要修改或者插入代码
- 非侵入型:完全不需要更改或者插入代码
- 模拟类:用来模拟各种设配,浏览器,环境。严格来说不能算调试,但也比较有用。
本文将会介绍
eruda
weinre
charles
chrome://inspect/#devices
调试安卓safari
调试IOS
simulator
模拟手机环境
相信看完一定有所收获,如果可以的话,帮忙点个赞吧
1.侵入型
(1).eruda
github地址:github.com/liriliri/er…
使用方法特别简单,在html
中插入以下代码即可
<script>
;(function () {
var src = 'https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js';
// if (!/debug=1/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>
中间注释的一行是判断是根据链接和localStorage来判断是否开启eruda。如果需要全局使用,可以注释掉,免得某些情况下没有开启eruda
当前页面就会出现一个浮标
点击浮标可以弹出控制台,类似 chrome
的调试面板
然后就可以查看网页的各种信息了
(2).weinre
官方地址:people.apache.org/~pmuellr/we…
Weinre的本意是Web Inspector Remote。是一种远程调试工具,帮助我们及时更改页面上的元素,样式(就像chrome 的 devtool),调试js(并不能像chrome
中进行断点调试,可以看到console
的信息,还可以在weinre
的console
中调试全局中的变量)。
weinre的安装
npm install -g weinre
weinre的启动
安装完成之后,我们就可以启动weinre
的监控服务来进行远程调试了.
// 不指定端口,默认端口是8080
weinre --boundHost -all-
// 指定端口
weinre --boundHost -all- --httpPort 8090
启动之后,我们就可以通过本机的ip(一般就是我们的局域网内的ip)来访问weinre
的服务了,如下图
页面加入监控script
我们还需要在我们的页面中引入一个脚本,并部署我们的页面到测试环境中才可以正式开始远程调试,这个脚本我们可以在weinre
启动后的页面的 Target Script
部分找到,使用示例如下:
// 其中url中的hash是需要我们来自定义的标识,
// 这个标识推荐 使用页面名称,这个名称在监控页面时使用。
<script src="http://172.18.181.169:8090/target/target-script-min.js#自定义的标识">
</script>
之后我们就可以在浏览器中输入http://172.18.181.169:8090/client/#自定义标识
来监控调试远程的页面了。
举例
调试名为courseDetail.html
的页面。
页面中加入的脚本如下:
<script src="http://172.18.181.169:8090/target/target-script-min.js#courseDetail"></script>
浏览器的访问地址如下
http://172.18.181.169:8090/client/#courseDetail
个人评价:
接入的流程比较复杂,但调试的功能会比eruda
,这种只能在移动端查看页面情况的好一点。weinre
不仅可以在电脑上查看页面的各种信息,还能进行一些调试和操作。
2.非侵入型
(1).charles
官方地址:www.charlesproxy.com/download/
Charles
是在PC
端常用的网络封包截取工具。在移动端调试上,我们主要用于拦截移动端页面的数据请求,甚至可以对这些请求进行修改。
安装
去官方网站直接下载即可
charles
是收费软件,可以免费试用30天
启动
安装完成后,启动 charles
,就能看到以下页面
界面左边是拦截到的请求,点击请求,可以在界面右边看到请求的详细信息
如果出现页面空白的情况,比如下面这种
可以检查下
- 当前电脑是否联网
- charles是否开启代理 选项 Proxy -> macOS Proxy
- 当前网络是否存在其他代理,如下图,把三个勾选全部去掉。然后重新启动
charles
如果发现 https
的请求还是拦截不到,可以检查 SSL Proxying
的设置
设置成
配置证书
图片中圈出两个下载证书的选项,第一个是电脑端证书,必须安装,否则电脑端无法查看https
的请求信息。
第二个是手机调试的时候下载。
手机需要和电脑链接的是同一网络,设置网络代理为打码的ip地址和端口号,就能在手机上看到 charles
的页面,同时需要在手机上下载charles
证书。
下载地址为:chls.pro/ssl
信任证书后,手机上刷新任意web
页面,电脑端charles
上即可拦截到各种请求
代理
成功用 charles
拦截到手机上的各种请求后,我们可以对请求进行代理,甚至修改。比如
我们可以将远程的地址,代理到本地,从而方便进行调试线上的情况。
注意将远程地址代理到本地时,需要手机和电脑连接同一网络,同时代理本地的地址需要设置成ip地址,其中 localhost 和 127.0.0.1 属于本地服务器,远程代理找不到,本地代理可以。
更细粒度的情况,我们可以直接修改一个请求。
比如访问一个网页的时候,会加载各种资源,比如html
,js
,css
,这些都是各式各样的请求,我们可以代理其中的js
请求,将请求的响应替换成其他的js
,这样就可以更细粒度的调试远程的页面了。
或者拦截发送后端的请求,修改请求体,或者响应值。
在charles
界面找到具体的请求,打断点
刷新web
页面,再次发送请求,此时请求就会被拦截。
如图所示可以选择去修改请求体,再执行请求,或者直接取消。
我们修改完请求体后,选择执行请求。
如图所示,我们就可以去选择修改响应体。
个人评价:
charles
调试无需侵入项目和业务代码,几乎适用于任何项目。配置比较繁琐,需要在电脑,手机上安装并信任证书。功能十分强大,可以将远程的网页地址,映射到本地,进行本地调试。也可以更加细粒度的代理到请求。
(2).chrome://inspect/#devices
- 手机需要打开USB调试模式。
- 用数据线将手机和电脑连接起来,检查手机是否成功连接上电脑。
举个例子,本人手机是Redmi K20,开启USB调试步骤是:
- 点击全部参数
- 多次点击红圈处的系统版本,直到出现弹框,您已处于开发者模式
- 退回到设置第一页,搜索开发者选项,进去
- 下拉开启USB调试
chrome浏览器访问 chrome://inspect/#devices
然后我们在浏览器上就可以看到我们的设备了
如果页面空白,可能需要尝试访问https://chrome-devtools-frontend.appspot.com/
原因据说是,需要加载这个页面的一些资源,但chrome
的地方访问不一定能访问到。
个人评价:
配置简单,功能强大,可以在PC上调试移动端的页面。就像调试PC的页面一样。
但缺点是,chrome://inspect/#devices
地址不一定能访问,成功访问了,也不是很稳定。
只能调试chrome
内核的浏览器,比如ios
就不行,不过ios
可以用以下的方式
(3).safari上ios调试
iPhone
手机上,设置 ->Safari
-> 高级 -> 打开网页侦测器Mac
上,Safari
偏好设置 -> 高级 -> 在菜单栏中显示开发菜单- 连接手机,在手机
Safari
上打开网页,然后添加到主屏幕(无法远程调试Sarafi
直接打开的网页,只能测试添加到主屏幕的),从主屏幕上的快捷图标打开网页 Mac
上Safari
的开发菜单栏,下拉可以看到连接的设备,悬停可以看到打开的网页,点击打开Web检查器
3.模拟型
mac 上可以下载 Xcode
,其中自带simulator
,可以从中选择下载各种iphone
的机型和各种IOS
系统。打开后可以直接使用。
如果有其他好用的调试方法,欢迎大家一起讨论哈~
参考资料
- weiner调试
- H5移动调试全攻略
- 在手机上调试H5页面
- chrome://inspect/#devices调试出现白屏问题
- iphone开发者选项翻译
- safari调试iphone
- Simulator调试H5
- chrome调试chrome://inspect/#devices