JS 逆向入门：用 DevTools 追踪请求参数生成链，附可运行本地实验

原创已于 2026-09-14 16:07:55 修改 · 171 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-09-06 17:40:46 首次发布

做网页采集时，复制 Network 中的一条请求通常只能解释“这一次发出了什么”。要复现请求，还要知道参数来自输入框、页面状态、配置，还是运行时计算。JS 逆向分析可以先从这条数据链入手：原始输入 → 归一化 → 序列化 → 发起请求。

本文使用自建本地页面，不依赖真实站点。示例故意包含空格、加号和时间戳，用来观察字符串在哪一步变化。已通过本地浏览器验证正常请求与空输入分支；断点操作方法依据 Chrome 官方文档，未把它表述成第三方站点的测试结果。

一、准备两个文件

在同一个目录建立 index.html 和 result.json。index.html 内容如下：

<!doctype html>
<meta charset="utf-8">
<title>请求参数追踪实验</title>
<label>SKU <input id="sku" value=" A B+01 "></label>
<button id="query">查询商品</button>
<pre id="output">等待点击</pre>
<script>
const input = document.querySelector('#sku');
const output = document.querySelector('#output');
function normalize(raw) {
  return raw.trim();
}
function buildQuery(sku, now) {
  return new URLSearchParams({sku, region: 'CN', ts: String(now)}).toString();
}
async function requestProduct() {
  const raw = input.value;
  const sku = normalize(raw);
  if (!sku) { output.textContent = 'SKU 不能为空'; return; }
  const query = buildQuery(sku, Date.now());
  const url = '/result.json?' + query;
  try {
    const response = await fetch(url, {cache: 'no-store'});
    if (!response.ok) throw new Error('HTTP ' + response.status);
    const data = await response.json();
    output.textContent = JSON.stringify({raw, sku, url, data}, null, 2);
  } catch (error) {
    output.textContent = String(error);
  }
}
document.querySelector('#query').addEventListener('click', requestProduct);
</script>

result.json 内容：

{"ok": true, "note": "静态演示响应，不是商品接口"}

在该目录运行：

python3 -m http.server 8768 --bind 127.0.0.1

浏览器打开 http://127.0.0.1:8768/ ，点击“查询商品”。请通过这个本地 HTTP 地址访问；直接双击文件会改变请求上下文。静态服务器忽略查询参数来读取 result.json，因此响应只用于验证链路，没有实现商品查询，也没有验证时间戳。

二、先记录一次正常样本

默认输入在两端带空格，中间包含一个空格与一个字面加号。页面输出的 raw 保留原输入，sku 为 A B+01，URL 中对应片段为：

sku=A+B%2B01&region=CN&ts=运行时毫秒时间戳

这里发生了两件不同的事：trim 去除了首尾空白；URLSearchParams 把中间空格序列化为 +，把字面加号序列化为 %2B。它是 URL 查询参数编码，不是加密。MDN 的 URLSearchParams 文档说明了此类编码行为。

这也是为什么不应先把 SKU 手动编码，再交给 URLSearchParams：百分号可能被再次编码，最终发送值与业务值不同。先确定你比较的是原始字符串、解码后的参数，还是 URL 字节表示。

三、从请求出口向上追

打开 DevTools 的 Network，找到 result.json 请求，核对查询参数和响应。请求详情中的 Initiator 可以帮助定位发起代码。随后在 Sources 的 XHR/fetch Breakpoints 中添加 result.json，再次点击按钮。相关能力见 Chrome 的断点文档。

暂停后先看当前请求相关的 url、query、sku；在调用栈中切换到业务函数，分清哪层负责准备参数，哪层仅仅包装 fetch。异步边界可能使调用栈不完整，此时结合 Initiator 和明确的行断点定位。

有个很容易踩的坑：停在 fetch 时，normalize 和 buildQuery 已经执行完了。调试器不会因为你继续单步就回到过去。要看参数生成过程，应在 requestProduct 中读取输入前或 buildQuery 调用前设置行断点，然后重新触发一次操作。

第二轮依次观察 raw、sku、query、url，每经过一个函数就记录输入与返回值。这样得到的是可验证的数据流，而不是根据压缩函数名猜用途。