如何在线替换并调试网页上的 JS 代码

调试代码

当我们需要调试网页上的 JS 代码时,可以使用 Chrome 游览器上的开发者工具的 Sources 项进行断点调试。
Sources 调试界面
在代码数目栏处点击,即可加上断点,根据加入的断点进行判断,该断点若是事件触发的可不用刷新界面,代码会被调用时进入调试状态。若是初始化类的代码需要刷新页面进入调试状态。

这种方式在自己开发中,可以很好的调试代码,但如果要调试某个网站的代码时,代码很乱就可能会无法掌控,比如:
举例代码

使用代理替换代码

在上面的这种情况下,我们就无法正常的进行调试。那有没有什么解决方法了?肯定有的!

我们想一下,游览器的工作原理,游览器向服务器请求数据,服务器再响应请求,发送响应数据给游览器。游览器是需要一个运行环境的,就是我们的终端,在这里就是电脑。意思就是服务器响应的数据是先到我们电脑然后再加载到游览器中。

那么我们可以在数据从电脑加载到游览器这一个过程中,做点小事。

我们可以使用 Charles 截取服务器返回的数据,Charles 是网络代理抓包工具,可通过代理实现抓取 HTTP 和 HTTPS 协议的数据。在这里就不介绍安装和基础使用了。

使用方法如下:

先找到你需要替换的 JS 代码,在这里以网易云音乐为例子,打开开发者工具选择 Sources 可看到 core.js 为:
core.js代码
core.js 中的代码不止混淆了,而且每一个模块都弄成一行,这样很难进行调试,我们可以将该 JS 代码下载下来,然后格式化代码,在该代码中加入一些代码,如打印一些信息(console.log),也可以在代码中加入 debugger 直接实现断点调试,通过这些来判断代码执行的逻辑和数据。
格式化后的 core.js 代码
就这样,可以按照我们的想法,在 core.js 中加入代码,此时我们自己的 core.js 已经弄好了。

接下来就是如何替换从服务器返回给游览器的数据,Mac步骤如下,其他操作系统也差不多一样:

  1. 先把电脑上的代理软件关掉,再打开 Charles,在菜单栏选择 Proxy 打开 macos Proxy。
  2. 打开 Chrome 上的开发者工具,选择 Network 把禁止缓存勾上(Disable cache)。
  3. 刷新页面,在 Charles 上选中需要替换的 JS 代码,右键选择 Map Local…,然后在点击 Choose 按键,选择需要替换的 JS 代码。
    Charles 操作

现在已经替换了 core.js,如下是我设置的打印信息,这样我们就可以分析代码,或者黑箱操作(不用管他做了什么,只管输入什么输出什么)找到我们需要的信息。
替换后的 core.js

在线调试

这样就可以在开发者工具的 Sources 项进行断点调试,或者还可以继续在替换代码中,加入自己的分析代码。

总结

想要做什么的时候,应该找到最根本的本质,然后利用搜索引擎或者询问他人,到达目的,也就是从最根本点到目标点。

猜你喜欢

转载自blog.csdn.net/zwt520123/article/details/80374952