本文主要是介绍charles抓包工具之---添加vConsole，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Charles Rewrite重写(详解！必懂系列)-CSDN博客
chales 重写/断点/映射/手机代理/其他主机代理_charles 批量映射-CSDN博客
在 Charles 上添加 rewrite 规则，以便在响应的 `<head>` 部分添加 `vConsole`，可以按照以下步骤操作：
1. 打开 Charles 并启用 Rewrite
1. 启动 Charles。
2. 点击菜单栏的 `Tools` > `Rewrite`，打开 Rewrite 配置窗口。
3. 勾选 `Enable Rewrite` 以启用 Rewrite 功能。
2. 添加 Rewrite 规则集
1. 在 Rewrite 配置窗口中，点击左侧的 `Add` 按钮添加一个新的规则集。
2. 为规则集命名，例如 `Add vConsole`。
3. 添加具体的 Rewrite 规则
1. 选择你刚创建的规则集，然后在右侧区域点击 `Add` 按钮添加新的规则。
2. 在 `Rule` 部分配置匹配条件：
- `Type` 选择 `Response`。
- `Match` 设置为 `URL`，并输入你希望匹配的 URL 或使用正则表达式，例如 `.*` 代表匹配所有 URL。
3. 在 `Action` 部分配置重写操作：
- `Type` 选择 `Body`。
- `Match` 设置为 `Text`。
- 在 `Match` 文本框中输入 `</head>`，这表示找到响应体中的 `</head>` 标签。
- 在 `Replace` 文本框中输入如下代码，以便在 `</head>` 前插入 `vConsole` 的引入脚本：
```html
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
```
4. 保存并应用规则
1. 配置完成后，点击右下角的 `OK` 按钮保存规则。
2. 确保 Rewrite 功能已启用，并且新创建的规则集处于启用状态。
5. 验证 Rewrite 规则
1. 打开你希望测试的网页。
2. 使用 Charles 进行抓包，并确保 Rewrite 规则集已经生效。
3. 查看网页源码，确认 `vConsole` 的引入脚本已经正确地被添加到 `<head>` 部分。
通过这些步骤，你就可以在 Charles 上使用 Rewrite 功能为网页的 `<head>` 部分添加 `vConsole`。这将帮助你在移动端或其他环境中调试 JavaScript 代码。
这篇关于charles抓包工具之---添加vConsole的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
