调试代码

当我们需要调试网页上的 JS 代码时，可以使用 Chrome 游览器上的开发者工具的 Sources 项进行断点调试。

在代码数目栏处点击，即可加上断点，根据加入的断点进行判断，该断点若是事件触发的可不用刷新界面，代码会被调用时进入调试状态。若是初始化类的代码需要刷新页面进入调试状态。

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

使用代理替换代码

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

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

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

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

使用方法如下：

先找到你需要替换的 JS 代码，在这里以网易云音乐为例子，打开开发者工具选择 Sources 可看到 core.js 为:

core.js 中的代码不止混淆了，而且每一个模块都弄成一行，这样很难进行调试，我们可以将该 JS 代码下载下来，然后格式化代码，在该代码中加入一些代码，如打印一些信息(console.log)，也可以在代码中加入 debugger 直接实现断点调试，通过这些来判断代码执行的逻辑和数据。

就这样，可以按照我们的想法，在 core.js 中加入代码，此时我们自己的 core.js 已经弄好了。

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

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

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

在线调试

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

总结

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