这是我参与「第五届青训营 」笔记创作活动的第10天。

前言

本节课程主要分为四个方面：

1. Web 应用使用 Chrome devTools 调试
2. 移动端 H5 调试
3. NodeJs 应用调试
4. 常用代理工具的使用

课前

• 安装 Chrome 浏览器

• 【可选】 安装代理工具

• 安装 Charles

Chrome 开发者工具

对于web前端而言，我们每天都在使用开发调试工具进行查看dom结构、js断点和查看分析登录请求等操作，最熟悉的开发调试工具 应该莫过于Chrome的Devtools和Firefox的FireBug了。

Chrome 开发者工具其实是一个用 HTML，JavaScript 和 CSS 写的 Web 应用程序，被集成在浏览器中。其基于远程调试协议，与浏览器架构关系如下：

由图可知：

• 远程调试协议基于 WebSocket，利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道
• 浏览器拥有多个 Tab，并为每个 Tab 单独提供 Websocket 的 Endpoint URI
• 每个 DevTool 实例只能检视一个 Tab，即只能与一个 Tab 保持通讯

事实上，Chrome开发者工具不仅只是可以在当前的浏览器页面直接打开，它作为一个客户端（开源），也可以用来调试任何支持远程调试协议的浏览器。

使用文档：developers.google.com/web/tools/c…

github仓库：github.com/ChromeDevTo…

Charles简介

Charles 是在 PC 端常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。

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

Charles 是收费软件，可以免费试用 30 天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过 30 分钟，并且启动时将会有 10 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。只是当你需要长时间进行封包调试时，会因为 Charles 强制关闭而遇到影响。

Charles 主要的功能包括：

• 截取 Http 和 Https 网络封包。

• 支持重发网络请求，方便后端调试。

• 支持修改网络请求参数。

• 支持网络请求的截获并动态修改。

• 支持模拟慢速网络。

课后

调试技巧实践

• Chrome devtools 各 tab 的运用实践
• 常用代理工具的实践