# 2.接口代理及调试
接口代理工具：Charles-Mac平台，Fiddler-Windows平台
下载地址：
- Charles: https://www.charlesproxy.com/
- Fiddler: https://www.telerik.com/fiddler
# Charles
下载Charles后，打开运行，得到如下页面：
点击顶部右侧的设置菜单：
打开两个常用的设置项，第一个Proxy Settings通常我们的Charles会运行Proxy在8888端口：
而另外一个常用的设置项为Access Control Settings:
用来配置有哪些客户端可以连接过来。
下面当手机连接到运行Charles服务的宿主机上的8888端口时，即可以开始调试了。注意：
- 手机与宿主机（运行Charles服务）的设备在同一个网段
- 手机设置wifi中的代理，成为宿主机IP +
8888端口 - 打开Charles的录制功能，使用filter进行筛选代理的请求
# Fiddler
Fiddler与Charles类似
# 真机调试技巧
# iOS配合Safari进行真机调试
手机端的设置：
- 设置 --> safari --> 高级 --> 网页检查器 --> 打开
- 然后，Safari访问待测试的页面
Mac端的设置：
- 在safari的设置项中打开“开发”菜单
使用有线让设备与宿主机电脑相连
选择调试
# Android配合Chrome进行真机调试
手机端的设置：
- 开发调试模式（PS: 这里各大Android手机打开调试模式方式不一样，比如小米是连续点击版本号打开，华为也是在系统信息中连续点击版本号后打开）
- 使用webkit内核的浏览器访问宿主机上待测试的页面
电脑侧的设置：
- 打开Chrome，输入chrome://inspect/#devices
- 在下面的Target部分可以看到设备访问的页面，点击
inspect
出来了熟悉的调试窗口：
# 使用vConsole第三方插件进行调试
vConsole官方地址：
https://github.com/Tencent/vConsole/blob/dev/README_CN.md
快速上手
下载 vConsole 的最新版本 (opens new window)。（不要直接下载 dev 分支下的 dist/vconsole.min.js），使用方法请参阅使用教程 (opens new window)。
或者使用 npm 安装：
npm install vconsole
引入 dist/vconsole.min.js 到项目中：
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
2
3
4
5
6
对于 TypeScript，可引入 d.ts 文件：
import 'path/to/vconsole.min.d.ts';
1.下载模块
下载 vConsole 的最新版本 (opens new window)。
或者使用 npm 安装：
npm install vconsole
然后复制 dist/vconsole.min.js 到自己的项目中。
2.引入模块
(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 `` 中引入：
<head>
<script src="path/to/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
2
3
4
5
6
(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 require() 引入模块：
var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();
2
请注意，VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中。
vConsole截图：
