🔗 URL 操作与缓存调试指南

🔧 修改 URL 的多种方式

1. 浏览器开发者工具修改
   javascript
   // 在 Console 中修改当前页面 URL
   // 方法1：location 对象
   location.href = "https://example.com/new-path";
   location.replace("https://example.com"); // 不保存到历史记录
   location.assign("https://example.com"); // 保存到历史记录

// 方法2：history API
history.pushState({}, "", "/new-path"); // 添加历史记录
history.replaceState({}, "", "/new-path");// 替换当前历史记录

// 方法3：直接修改参数
// 添加/修改查询参数
const url = new URL(location.href);
url.searchParams.set("key", "value");
url.searchParams.append("another", "param");
location.search = url.searchParams.toString();
2. Network 面板断点调试 (bpu)
使用 Charles/Fiddler 等代理工具：

bash

设置断点规则

bpu example.com/api # 拦截所有 example.com/api 的请求
bpu /login # 拦截所有包含 /login 的请求
bpu # 显示当前断点
bpu - # 清除所有断点
Charles 断点功能：

设置断点：

Proxy → Breakpoint Settings

添加 URL 匹配规则（通配符 * 可用）

修改请求：

拦截后修改 URL、Headers、Body

可以重定向到其他端点

自动重写规则：

text

Charles Rewrite 规则示例

Location: https://api.example.com/*
Match: ^https://api.example.com/(.*)
Replace: https://api.staging.example.com/$1
3. 浏览器地址栏技巧
bash

快速修改 URL 参数

原始：https://example.com/page?param=value

修改后：https://example.com/page?param=newValue

快速测试不同子域名

chrome://flags/#omnibox-context-menu-show-full-urls # 显示完整URL
📡 缓存调试技巧

1. 不同刷新方式的影响
   操作 快捷键 缓存行为 状态码
   正常访问 点击链接/Enter 正常缓存流程 200/304
   普通刷新 F5/Ctrl+R 协商缓存验证 304 常见
   强制刷新 Ctrl+F5/Cmd+Shift+R 忽略所有缓存 200
   清空缓存硬刷新 Ctrl+Shift+R (DevTools开启) 清除缓存并刷新 200
2. 开发者工具缓存控制
   Network 面板设置：

Disable cache：禁用所有缓存（灰色按钮）

Preserve log：保留日志（跨页面导航）

Offline：模拟离线状态
3. 浏览器扩展推荐
ModHeader：修改请求/响应头

Cache Killer：禁用缓存

Redirect Path：查看重定向链

Requestly：URL 重写、请求拦截