一、Charles 工具简介

Charles 是一款功能强大的 HTTP/HTTPS 抓包工具，它能够帮助开发者拦截和修改网络请求，从而实现替换 JS 文件的操作。通过 Charles，开发者可以实时查看设备与服务器之间的网络请求和响应信息，这对于网络调试和开发非常有帮助。

在手机上连接到与电脑同一局域网的网络上设置 HTTP 代理。端口号就是刚刚在 Charles 上设置的那个。然后在手机上打开一个网址，Charles 会弹出一个框让你确认是否代理，点击 Allow 即可。接着，你会在 Charles 上发现手机上的请求。通过设置断点，可以观察或修改请求或返回的内容，但要注意请求的超时时间问题。

在众多的网络请求中，找到需要替换的 JS 文件对应的请求，可以通过查看请求 URL、方法、请求头等信息来快速定位，JS 文件的请求 URL 会包含“.js” 名。

开始抓包，在修改响应内容时，要注意不要破坏原有的 JS 代码结构和语法规则，以免导致页面出现错误或异常行为。

确保设备的网络连接正常，并且正确设置了代理服务器，否则 Charles 可能无法正常捕获网络流量。

开启停用缓存。在 Charles 中，可以通过 Tools- Map Local Settings 进行设置。

右键点击目标 JS 请求，选择“修改响应”选项，在弹出的对话框中，可以对响应内容进行编辑，将原本的 JS 代码删除或替换为你自定义的 JS 代码，编辑完成后，点击“执行”按钮保存修改。

问题：Charles 没有抓到目标 JS 请求怎么办？

答： 检查设备的网络代理设置是否正确，确保设备的流量确实经过 Charles 代理服务器，确认浏览器是否缓存了该 JS 文件，如果是缓存问题，可以尝试清除浏览器缓存后重新加载页面， 查看 Charles 是否能够捕获到请求，也有可能是网络请求的路径或参数发生了变化，需要仔细检查请求的相关信息，以便准确定位目标请求。

通过 Charles 替换 JS 文件是一种非常有效的网络调试和开发技巧，能够帮助开发人员快速验证想法、测试新功能以及对网页进行定制化的调试，在使用过程中一定要小心谨慎，充分了解其原理和操作方法，避免因误操作带来不必要的麻烦，希望本文能够帮助大家更好地掌握 Charles 替换 JS 的技巧，提升网络开发和调试的效率。

答：当替换 JS 后页面出现错误时， 打开浏览器的开发者工具，查看控制台输出的错误信息，这些错误信息通常会提示出错的位置和原因，例如语法错误、变量未定义、函数调用错误等，根据错误提示，检查替换后的 JS 代码中相应的部分，修复代码中的错误，也要检查是否因为替换 JS 导致与其他脚本或页面元素的交互出现问题，逐步排查和修复，直到页面恢复正常。

Charles 是一款强大的工具，可以帮助开发者进行网络调试和开发。通过 Charles 替换 JS 文件，可以实现对网页的定制化调试，提高开发效率。在实际操作中，需要注意设置代理、清除缓存、验证替换效果等细节，以确保替换 JS 的操作顺利进行。

欢迎用实际体验验证观点。