前端调试工具

如何调试

调试工具

前端调试工具推荐 Chrome，下载地址：Google Chrome 网络浏览器

安装后可使用 F12 打开控制台

关于 Chrome 的调试方法，内外网已经有很多精彩的文章进行讲解，这里不再赘述。

如何代理

代理工具

1. 从 Chrome 应用商店下载 XSwitch 插件

地址：https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg

本地联调

1. 配置代理

配置内容如下：

{
  "proxy": [
    [
   "https://assets-daily.cainiao-inc.com/{group}/{project}/\\d\\.\\d\\.(\\d+)/",
    "http://localhost:{port}/"
    ],
  ]
}

截图如下：

1. 代理开启表示已经将在使用本地环境资源

2. 愉快联调

如何抓包

 whistle

文档：地址

Charles

Charles是一款Http代理服务器和Http监视器，当移动端在无线网连接中按要求设置好代理服务器，使所有对网络的请求都经过Charles客户端来转发时，Charles可以监控这个客户端各个程序所有连接互联网的Http通信。

1. 下载 Charles，地址

2. 安装证书（Mac 端）

   1. 获取 HTTPS相关信息需要安装 Charles 的 CA 证书，安装路径：菜单栏 -> Help -> SSL Proxying -> Install Charles Root Certificate

   2. 在 Mac 钥匙串访问 程序中找到 Charles 证书，右击打开“显示简介”：

1. 手动设置为始终信任：

1. 浏览器抓包：打开 菜单栏 -> Proxy -> macOS Proxy。