移动前端调试方法汇总

Chrome为PC端调试提供了很方便的调试功能，控制台功能的强大使Chrome浏览器博得了众多前端开发者的喜爱，然而随着移动端H5的流行和广泛的应用，H5的调试越来越变得重要而不可或缺，这里汇兑了一些目前较为实用移动端H5的调试方法供大家参考学习，方便做微信、webview、手机浏览器调试及错位定位。

Chrome调试面板

常见用法

• 查看或编辑DOM元素、查看或编辑CSS样式、元素的事件绑定、盒模型
• 模拟移动设备、横竖屏、网速、DPR
• Console控制台 log/warn/error/dir/info
• 查看源码、格式化源码、断点、堆栈
• 查看源文件，Sinppets代码片段
• 查看网络请求、模拟网速、禁止缓存、查看资源加载时间及状态、过滤查看资源文件
• Timeline 可以显示JS执行时间、页面元素渲染时间
• Profiles 可以查看CPU执行时间与内存占用
• Resources 查看站点所有资源，如图片、Cookies、Local Storage、Session Storage、IndexDB 等等
• Security 查看网站安全性，HTTPS证书
• Audits 帮助分析网站性能，给出建议报告

Sources 下几个实用的快捷键

• cmd(ctrl) + o 查找文件
• cmd(ctrl) + shift + o 查找函数定义
• ctrl + g 跳到指定行
• ctrl + l 清空console日志
• Esc 切换 console 的显示隐藏

几个实用的API

• console.table()
• console.count()
• console.dir()
• console.time() & console.timeEnd()
• $、keys、values

更多API查看 Console API

console.table

将数组内容以表格的形式将数据展示出来，方便查看数组内容

console.count

记录方法执行的次数

console.time & console.timeEnd

记录代码执行的时间

keys & values

获取对象的 keys 和 values

vConsole 调试插件

vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作

在PC上调试，有很方便Chrome调试工具，在移动端调试可以使用 vConsole 代替调试面板，查看基本调试信息

功能：可以查看console日志、网络请求、设备信息、执行js代码

设置标识 xxxxxxx，线上启用调试

// 添加线上调试配置
if(/xxxxxx/ig.test(location.href)){
  document.writeln('<script type="text/javascript" src="//coding.net/u/coderlt/p/CDN/git/raw/master/vconsole.min.js"'+'>'+'<'+'/'+'script>');
}

Charles抓包工具

Charles Mac 下常用的网络封包截取工具，通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

Windows 用户可使用 Fildder 来替代 Charles

功能

• 截取 Http 和 Https 网络封包
• 支持重发网络请求，方便后端调试
• 支持修改网络请求参数
• 支持网络请求的截获并动态修改
• 支持模拟慢速网络
• 断点 + 修改返回内容
• 映射本地资源

界面介绍

• Structure 视图将网络请求按访问的域名分类
• Sequence 视图将网络请求按访问的时间排序

设置为系统代理服务器

选择菜单中的 Proxy -> Mac OS X Proxy 来将 Charles 设置成系统代理

截取 http 网络封包

1. charles 上设置
   设置代理端口号 Proxy -> Proxy Settings
   

2. 手机网络设置代理
   到本地IP与在 charles 上设置的端口号
   

获取本地IP
Help -> Local IP Address

3. 确认连接
   设置成功后，charles上会弹出提示，确认连接
   

截取 Https 网络封包

1. 安装证书

2. 设置代理
   选择 Proxy -> SSL proxy

3. 手机上安装证书
   在 iOS 或 Android 机器上截取 Https 协议的通讯内容，还需要在手机上安装相应的证书

   Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser，然后就可以看到 Charles 弹出的简单的安装教程

手机浏览器打开 http://charlesproxy.com/getssl 下载并安装证书即可

修改请求内容

Charles 提供了类似 postman 的功能，可以修改请求内容测试接口

网络请求上点击右键，选择 “Edit”，即可创建一个可编辑的网络请求

修改响应内容

有些时候我们想让服务器返回一些指定的内容，方便我们调试一些特殊情况。例如列表页面为空的情况，数据异常的情况，部分耗时的网络请求超时的情况等。如果没有 Charles，要服务器配合构造相应的数据显得会比较麻烦。这个时候，使用 Charles 相关的功能就可以满足我们的需求。

根据具体的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，都可以达到修改服务器返回内容的目的。这三者在功能上的差异是：

• Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
• Rewrite 功能适合对网络请求进行一些正则替换。
• Breakpoints 功能适合做一些临时性的修改。

Map功能

Charles 的 Map 功能分 Map Remote 和 Map Local 两种，顾名思义，Map Remote 是将指定的网络请求重定向到另一个网址请求地址，Map Local 是将指定的网络请求重定向到本地文件。

在 Charles 的菜单中，选择 Tools->Map Remote 或 Map Local 即可进入到相应功能的设置页面。

对于 Map Remote 功能，我们需要分别填写网络重定向的源地址和目的地址，对于不需要限制的条件，可以留空。下图是一个示例，我将所有 ytk1.yuanku.ws（测试服务器）的请求重定向到了 www.yuantiku.com（线上服务器）。

对于 Map Local 功能，我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果，我们可以先使用 Charles 提供的 Save Response…功能，将请求结果保存到本地（如下图所示），然后稍加修改，成为我们的目标映射文件。

下图是一个示例，我将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中。

Map Local 在使用的时候，有一个潜在的问题，就是其返回的 Http Response Header 与正常的请求并不一样。这个时候如果客户端校验了 Http Response Header 中的部分内容，就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能，将相关的 Http 头 Rewrite 成我们希望的内容。

Rewrite 功能

Rewrite 功能功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的。

例如，我们的客户端有一个 API 请求是获得用户昵称，而我当前的昵称是 “tangqiaoboy”，如下所示：

我们想试着直接修改网络返回值，将 tangqiaoboy 换成成 iosboy。于是我们启用 Rewrite 功能，然后设置如下的规则：

完成设置之后，我们就可以从 Charles 中看到，之后的 API 获得的昵称被自动 Rewrite 成了 iosboy，如下图所示：

Breakpoints 功能

上面提供的 Rewrite 功能最适合做批量和长期的替换，但是很多时候，我们只是想临时修改一次网络请求结果，这个时候，使用 Rewrite 功能虽然也可以达到目的，但是过于麻烦，对于临时性的修改，我们最好使用 Breakpoints 功能。

Breakpoints 功能类似我们在 Xcode 中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求，这个时候，我们可以在 Charles 中临时修改网络请求的返回内容。

下图是我们临时修改获取用户信息的 API，将用户的昵称进行了更改，修改完成后点击 Execute 则可以让网络请求继续进行。

需要注意的是，使用 Breakpoints 功能将网络请求截获并修改过程中，整个网络请求的计时并不会暂停，所以长时间的暂停可能导致客户端的请求超时。

给服务器做压力测试

使用 Charles 的 Repeat 功能来简单地测试服务器的并发处理能力

使用模拟器 + 浏览器 + Charles

有时候我们身边并没有足够多的真机来调试，或者使用手机不方便调试，那么我们就可以在电脑上安装模拟器以模拟手机环境，并在电脑上打开调试面板调试模拟器中的页面，以达到最真实的线上环境。

• iOS系统：使用 iOS Simulator 模拟器，模拟iOS系统的各产品下的显示，使用 Safari 的调试面板进行调试
• Android系统：使用 Genymotion 模拟器，模拟安卓各品牌各型号的手机，使用 Chrome 的调试面板进行调试

在模拟器中打开页面
在PC上打开 Safari 浏览器 ，菜单中选择 开发->simulator->http://ww.xxx.com/xxx， 打开调试面板

使用 spy-debugger

基于 weinre 的调试工具 spy-debugger

微信调试，各种WebView样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具，支持：HTTP/HTTPS，无需USB连接设备。

特性

1、页面调试＋抓包
2、操作简单，无需USB连接设备
3、支持HTTPS。
4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6、可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

页面编辑模式

weinre 调试界面

抓包界面

阅读参考：

• 各种 真机远程调试 方法 汇总
• spy-debugger
• 怎么在移动端调试web前端?
• 移动端前端开发调试
• 打造最舒适的webview调试环境
• Charles 从入门到精通