🔧 修改 URL 的多种方式
- 浏览器开发者工具修改
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
📡 缓存调试技巧
- 不同刷新方式的影响
操作 快捷键 缓存行为 状态码
正常访问 点击链接/Enter 正常缓存流程 200/304
普通刷新 F5/Ctrl+R 协商缓存验证 304 常见
强制刷新 Ctrl+F5/Cmd+Shift+R 忽略所有缓存 200
清空缓存硬刷新 Ctrl+Shift+R (DevTools开启) 清除缓存并刷新 200 - 开发者工具缓存控制
Network 面板设置：
Disable cache：禁用所有缓存（灰色按钮）
Preserve log：保留日志（跨页面导航）
Offline：模拟离线状态
3. 浏览器扩展推荐
ModHeader：修改请求/响应头
Cache Killer：禁用缓存
Redirect Path：查看重定向链
Requestly：URL 重写、请求拦截