likes
comments
collection
share

尽可能详细的移动端调试方案汇总

作者站长头像
站长
· 阅读数 22

在调试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，就能看到以下页面 尽可能详细的移动端调试方案汇总

界面左边是拦截到的请求，点击请求，可以在界面右边看到请求的详细信息

如果出现页面空白的情况，比如下面这种

尽可能详细的移动端调试方案汇总

可以检查下

  1. 当前电脑是否联网
  2. charles是否开启代理 选项 Proxy -> macOS Proxy
  3. 当前网络是否存在其他代理，如下图，把三个勾选全部去掉。然后重新启动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调试

  1. iPhone手机上，设置 -> Safari -> 高级 -> 打开网页侦测器
  2. Mac上，Safari偏好设置 -> 高级 -> 在菜单栏中显示开发菜单
  3. 连接手机，在手机Safari上打开网页，然后添加到主屏幕（无法远程调试Sarafi直接打开的网页，只能测试添加到主屏幕的），从主屏幕上的快捷图标打开网页
  4. Mac上Safari的开发菜单栏，下拉可以看到连接的设备，悬停可以看到打开的网页，点击打开Web检查器

3.模拟型

mac 上可以下载 Xcode，其中自带simulator，可以从中选择下载各种iphone的机型和各种IOS系统。打开后可以直接使用。

如果有其他好用的调试方法，欢迎大家一起讨论哈～

参考资料