乐闻
Chrome 浏览器的缓存机制有哪些？## 浏览器缓存机制
Chrome 浏览器使用多种缓存机制来提高页面加载速度和减少网络请求。
### 缓存类型
1. **强缓存**
- 通过 HTTP 头控制：Cache-Control 和 Expires
- Cache-Control: max-age=3600 表示缓存 1 小时
- 优先级高于协商缓存
2. **协商缓存**
- 通过 HTTP 头控制：ETag 和 Last-Modified
- ETag：资源内容的唯一标识
- Last-Modified：资源最后修改时间
- 需要向服务器验证资源是否变化
3. **Ser...
前端 · 2月20日 13:28
如何开发 whistle 插件，插件的基本结构是什么？## 答案
Whistle 支持插件系统，可以通过开发插件来扩展其功能，实现自定义的网络请求处理逻辑。
### 插件开发基础
#### 1. 创建插件项目
```bash
mkdir whistle-plugin-demo
cd whistle-plugin-demo
npm init -y
```
#### 2. 创建插件入口文件
创建 `index.js` 文件：
```javascript
module.exports = function(server, options) {
// 插件初始化逻辑
console.log('Whistle plugin de...
前端 · 2月19日 16:31
whistle 支持哪些协议，如何处理不同协议的代理？## 答案
Whistle 支持多种协议的代理，包括 HTTP、HTTPS、WebSocket、HTTP/2 等，可以满足不同场景的调试需求。
### 支持的协议
#### 1. HTTP 协议
**基本代理：**
```
www.example.com host 127.0.0.1:8080
```
**转发代理：**
```
www.example.com forward http://127.0.0.1:8080
```
**修改请求：**
```
www.example.com reqHeaders://{custom-headers.json}
```
#### ...
前端 · 2月19日 16:38
whistle 如何与其他开发工具集成，有哪些集成方案？## 答案
Whistle 支持与其他开发工具集成，可以构建完整的开发和调试工作流。
### 与浏览器集成
#### 1. Chrome DevTools 集成
**使用 Chrome DevTools 调试：**
1. 配置浏览器代理指向 whistle
2. 打开 Chrome DevTools
3. 查看 Network 标签
4. whistle 捕获的请求会显示在 DevTools 中
**优势：**
- 结合 Chrome DevTools 的强大功能
- 查看详细的请求和响应信息
- 使用 Chrome 的性能分析工具
#### 2. Firefox Devel...
前端 · 2月19日 16:39
whistle 如何实现数据模拟，有哪些常用的模拟方法？## 答案
Whistle 提供了强大的数据模拟功能，可以在前端开发中模拟接口返回数据，提高开发效率。
### 数据模拟方法
#### 1. 使用 resBody 操作符
直接指定模拟数据：
```
www.example.com/api/user resBody://{"code":0,"data":{"name":"张三","age":25}}
```
#### 2. 使用 Values 文件
创建 Values 文件存储模拟数据：
**创建文件：`mock-user.json`**
```json
{
"code": 0,
"data": {
"id...
前端 · 2月19日 16:31
whistle 的 Values 功能是什么，如何使用和管理 Values？## 答案
Whistle 提供了强大的 Values 功能，可以存储和管理各种配置数据，在规则中灵活使用。
### Values 基础
#### 1. 什么是 Values
Values 是 whistle 提供的一种数据存储机制，可以存储：
- 配置数据
- 模拟数据
- 常量值
- 环境变量
#### 2. Values 文件格式
Values 文件支持多种格式：
- **JSON 格式**：`values.json`
- **Properties 格式**：`values.properties`
- **INI 格式**：`values.ini`
- **YAML...
前端 · 2月19日 16:37
whistle 如何管理配置规则，如何进行团队协作？## 答案
Whistle 提供了多种方式来管理配置规则，包括通过 Web 界面、命令行和配置文件进行管理，支持团队协作和版本控制。
### 配置规则管理方式
#### 1. Web 界面管理
**访问管理界面：**
```
http://127.0.0.1:8899/
```
**操作步骤：**
1. 点击 "Rules" 标签
2. 在编辑器中添加或修改规则
3. 点击 "Save" 保存规则
4. 规则立即生效
**优点：**
- 可视化操作，直观易用
- 实时预览规则效果
- 适合快速调试
#### 2. 命令行管理
**启动 whistle：**
```bash...
前端 · 2月19日 16:33
whistle 如何捕获和查看网络请求，有哪些过滤和搜索技巧？## 答案
Whistle 提供了多种方式来捕获和查看网络请求，帮助开发者快速定位和解决问题。
### 请求捕获基础
#### 1. 启动 whistle 并配置代理
**启动 whistle：**
```bash
w2 start
```
**配置浏览器代理：**
- 访问 `http://127.0.0.1:8899/`
- 点击 "Proxy" 标签
- 按照提示配置浏览器代理
#### 2. 查看请求列表
在 whistle 管理界面：
1. 点击 "Network" 标签
2. 查看所有捕获的请求
3. 默认按时间顺序排列
### 请求过滤和搜索
#### ...
前端 · 2月19日 16:36
whistle 如何解决跨域问题，有哪些常见的跨域场景？## 答案
Whistle 提供了多种方式来处理跨域问题，可以在开发环境中快速解决 CORS 相关问题。
### 跨域问题基础
#### 1. 什么是跨域
跨域是指浏览器出于安全考虑，限制从一个域名的网页向另一个域名的资源发起请求。
**同源策略限制：**
- 协议不同（http vs https）
- 域名不同（example.com vs test.com）
- 端口不同（80 vs 8080）
#### 2. CORS 响应头
解决跨域需要服务器返回正确的 CORS 响应头：
- **Access-Control-Allow-Origin**：允许的源
- **Ac...
前端 · 2月19日 16:36
whistle 如何进行性能监控和分析，有哪些优化建议？## 答案
Whistle 提供了丰富的性能监控和分析功能，可以帮助开发者优化网络请求性能，提升用户体验。
### 性能监控指标
#### 1. 请求时间分析
Whistle 会记录每个请求的详细时间信息：
- **DNS 解析时间**：域名解析到 IP 地址的时间
- **TCP 连接时间**：建立 TCP 连接的时间
- **SSL/TLS 握手时间**：HTTPS 连接建立的时间
- **请求发送时间**：发送请求数据的时间
- **等待时间（TTFB）**：服务器响应前的等待时间
- **内容下载时间**：接收响应数据的时间
- **总请求时间**：从开始到结束的总时间...
前端 · 2月19日 16:32