如何在线替换并调试⽹页上的JS代码
调试代码
当我们需要调试⽹页上的 JS 代码时，可以使⽤ Chrome 游览器上的开发者⼯具的 Sources 项进⾏断点调试。
在代码数⽬栏处点击，即可加上断点，根据加⼊的断点进⾏判断，该断点若是事件触发的可不⽤刷新界⾯，代码会被调⽤时进⼊调试状态。若是初始化类的代码需要刷新页⾯进⼊调试状态。
这种⽅式在⾃⼰开发中，可以很好的调试代码，但如果要调试某个⽹站的代码时，代码很乱就可能会⽆法掌控，⽐如：
使⽤代理替换代码
在上⾯的这种情况下，我们就⽆法正常的进⾏调试。那有没有什么解决⽅法了？肯定有的！
我们想⼀下，游览器的⼯作原理，游览器向服务器请求数据，服务器再响应请求，发送响应数据给游览器。游览器是需要⼀个运⾏环境的，就是我们的终端，在这⾥就是电脑。意思就是服务器响应的数据是先到我们电脑然后再加载到游览器中。
那么我们可以在数据从电脑加载到游览器这⼀个过程中，做点⼩事。
我们可以使⽤ 截取服务器返回的数据，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 项进⾏断点调试，或者还可以继续在替换代码中，加⼊⾃⼰的分析代码。
总结
想要做什么的时候，应该到最根本的本质，然后利⽤搜索引擎或者询问他⼈，到达⽬的，也就是从最根本点到⽬标点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。