JavaScript 逆向调试常用技巧

1. 断点调试

接下来介绍一个非常重要的功能 —— 断点调试。在调试代码的时候，我们可以在需要的位置上打断点，当对应事件触发时，浏览器就会自动停在断点的位置等待调试，此时我们可以选择单步调试，在面板中观察调用栈、变量值，以更好地追踪对应位置的执行逻辑。

那么断点怎么打呢？我们接着以上面的例子来说。首先单击如图所示的代码行号。

这时候行号处就出现了一个蓝色的箭头，这就证明断点已经添加好了，同时在右侧的 Breakpoints 选项卡下会出现我们添加的断点的列表。

由于我们知道这个断点是用来处理翻页按钮的点击事件的，所以可以在网页里面点击按钮试一下，比如点击第 2 页的按钮，这时候就会发现断点被触发了，如图所示。

这时候我们可以看到页面中显示了一个叫作 Paused in debugger 的提示，这说明浏览器执行到刚才我们设置断点的位置处就不再继续执行了，等待我们发号施令执行调试。

此时代码停在了第 4446 行，回调参数 e 就是对应的点击事件 MouseEvent 。在右侧的 Scope 面板处，可以观察到各个变量的值，比如在 Local 域下有当前方法的局部变量，我们可以在这里看到 MouseEvent 的各个属性，如图所示。

另外我们关注到有一个方法 o，它在 Jr 方法下面，所以切换到 Closure(Jr) 域可以查看它的定义及其接收的参数，如图所示。

我们可以看到，FunctionLocation 又指向了方法 o ，点击之后便又可以跳到指定位置，用同样的方式进行断点调试即可。

在 Scope 面板还有多个域，这里就不再展开介绍了。总之，通过 Scope 面板，我们可以看到当前执行环境下的变量的值和方法的定义，知道当前代码究竟执行了怎样的逻辑。

接下来切换到 Watch 面板，在这里可以自行添加想要查看的变量和方法，点击右上角的 + 号按钮，我们可以任意添加想要监听的对象，如图所示。

比如这里我们比较关注 o.apply 是一个怎样的方法，于是点击添加 o.apply，这里就会把对应的方法定义呈现出来，展开之后可以再点击 FunctionLocation 定位其源码位置。

我们还可以切换到 Console 面板，输入任意的 JavaScript 代码，便会执行、输出对应的结果，如图所示。

如果我们想看看变量 arguments 的第一个元素是什么，那么可以直接敲入 arguments[0]，便会输出对应的结果 MouseEvent，只要在当前上下文能访问到的变量都可以直接引用并输出。

此时我们还可以选择单步调试，这里有 3 个重要的按钮，如图所示。

这 3 个按钮都可以做单步调试，但功能不同。

• Step Over Next Function Call：逐语句执行
• Step Into Next Function Call：进入方法内部执行
• Step Out of Current Function：跳出当前方法

用得较多的是第一个，相当于逐行调试，比如点击 Step Over Next Function Call 这个按钮，就运行到了 4447 行，高亮的位置就变成了这一行，如图所示。

1. 观察调用栈

在调试的过程中，我们可能会跳到一个新的位置，比如点击上述 Step Over Next Function Call 几下，可能会跳到一个叫作 ct 的方法中，这时候我们也不知道发生了什么，如图所示。

那究竟是怎么跳过来的呢？我们可以观察一下右侧的 Call Stack 面板，就可以看到全部的调用过程了。比如它的上一步是 ot 方法，再上一步是 pt 方法，点击对应的位置也可以跳转到对应的代码位置，如图所示。

有时候调用栈是非常有用的，利用它我们可以回溯某个逻辑的执行流程，从而快速找到突破口。

3. Ajax 断点

上面我们介绍了一些 DOM 节点的 Listener，通过 Listener 我们可以手动设置断点并进行调试。但其实针对这个例子，通过翻页的点击事件 Listener 是不太容易找到突破口的。

接下来我们再介绍一个方法 —— Ajax 断点，它可以在发生 Ajax 请求的时候触发断点。对于这个例子，我们的目标其实就是找到 Ajax 请求的那一部分逻辑，找出加密参数是怎么构造的。可以想到，通过 Ajax 断点，使页面在获取数据的时候停下来，我们就可以顺着找到构造 Ajax 请求的逻辑了。

怎么设置呢？

我们把之前的断点全部取消，切换到 Sources 面板下，然后展开 XHR/fetch Breakpoints，这里就可以设置 Ajax 断点，如图所示。

要设置断点，就要先观察 Ajax 请求。和之前一样，我们点击翻页按钮 2，在 Network 面板里面观察 Ajax 请求是怎样的，请求的 URL 如图所示。

可以看到 URL 里面包含 /api/movie 这样的内容，所以我们可以在刚才的 XHR/fetch Breakpoints 面板中添加拦截规则。点击 + 号，可以看到一行 Break when URL contains: 的提示，意思是当 Ajax 请求的 URL 包含填写的内容时，会进入断点停止，这里可以填写 /api/movie，如图所示。

这时候我们再点击翻页按钮 3，触发第 3 页的 Ajax 请求。会发现点击之后页面走到断点停下来了，如图所示。

格式化代码看一下，发现它停到了 Ajax 最后发送的那个时候，即底层的 XMLHttpRequest 的 send 方法，可是似乎还是找不到 Ajax 请求是怎么构造的。前面我们讲过调用栈 Call Stack，通过调用栈是可以顺着找到前序调用逻辑的，所以顺着调用栈一层层找，也可以找到构造 Ajax 请求的逻辑，最后会找到一个叫作 onFetchData 的方法，如图所示。

接下来切换到 onFetchData 方法并将代码格式化，可以看到如图所示的调用方法。

可以发现，可能使用了 axios 库发起了一个 Ajax 请求，还有 limit、offset、token 这 3 个参数，基本就能确定了，顺利找到了突破口！我们就不在此展开分析了。

因此在某些情况下，我们可以在比较容易地通过 Ajax 断点找到分析的突破口，这是一个常见的寻找 JavaScript 逆向突破口的方法。

要取消断点也很简单，只需要在 XHR/fetch Breakpoints 面板取消勾选即可，如图所示。

4. 改写 JavaScript 文件

其实浏览器的开发者工具已经原生支持这个功能了，即浏览器的 Overrides 功能，它在 Sources 面板左侧，如图所示。

我们可以在 Overrides 面板上选定一个本地的文件夹，用于保存需要更改的 JavaScript 文件，我们来实际操作一下。

首先，根据上文设置 Ajax 断点的方法，找到对应的构造 Ajax 请求的位置，根据一些网页开发知识，我们可以大体判断出 then 后面的回调方法接收的参数 a 中就包含了 Ajax 请求的结果，如图所示。

我们打算在 Ajax 请求成功获得 Response 的时候，在控制台输出 Response 的结果，也就是通过 console.log 输出变量 a。

再切回 Overrides 面板，点击 + 按钮，这时候浏览器会提示我们选择一个本地文件夹，用于存储要替换的 JavaScript 文件。这里我选定了一个我任意新建的文件夹 ChromeOverrides，注意，这时候可能会遇到如图所示的提示，如果没有问题，直接点击 “允许” 即可。

这时，在 Overrides 面板下就多了一个 ChromeOverrides 文件夹，用于存储所有我们想要更改的 JavaScript 文件，如图所示。

我们可以看到，现在所在的 JavaScript 选项卡是 chunk-19c920f8.012555a2.js:formatted，代码已经被格式化了。因为格式化后的代码是无法直接在浏览器中修改的，所以为了方便，我们可以将格式化后的文件复制到文本编辑器中，然后添加一行代码，修改如下：

...
}).then((function(a) {
  console.log('response', a) // 添加一行代码
  var e = a.data
  	, s = e.results
  	, n = e.count;
  t.loading = !1,
...
1
2
3
4
5
6
7
8

接着把修改后的内容替换到原来的 JavaScript 文件中。这里要注意，切换到 chunk-19c920f8.012555a2.js 文件才能修改，直接替换 JavaScript 文件的所有内容即可，如图所示。

替换完毕之后保存，这时候再切换回 Overrides 面板，就可以发现成功生成了新的 JavaScript 文件，它用于替换原有的 JavaScript 文件，如图所示。

好，此时我们取消所有断点，然后刷新页面，就可以在控制台看到输出的 Reponse 结果了，如图所示。

正如我们所料，我们成功将变量 a 输出，其中的 data 字段就是 Ajax 的 Response 结果，证明改写 JavaScript 成功！而且刷新页面也不会丢失了。

我们还可以增加一些 JavaScript 逻辑，比如直接将变量 a 的结果通过 API 发送到远程服务器，并通过服务器将数据保存下来，也就完成了直接拦截 Ajax 请求并保存数据的过程了。