本文介绍在浏览器开发者工具中调试动态加载JavaScript脚本的两种有效方法。第一种通过在脚本中添加//# sourceURL指令，使动态脚本在Sources面板中可见并支持正常断点调试；第二种利用console.log输出特定日志，通过点击Console面板中的链接直接跳转到动态脚本（通常命名为vmXXX）进行调试。
动态JS调试难题
在开发过程中，有时会遇到动态引入的JavaScript脚本无法在浏览器开发者工具的Sources面板中直接列出的情况。由于脚本是动态加载的，这导致无法直接进行断点调试，仅依靠打印日志效率极低。经过搜索和实验，发现有两种方式可以解决这一调试难题。
方法一：使用sourceURL指令
第一种方法是在动态脚本内部添加//# sourceURL=xxxxxxxxx.js指令，其中文件名可自定义，例如直接使用实际文件名。具体操作如截图所示：
添加该指令后，刷新包含此JS的网页，即可在开发者工具的Sources面板中看到该脚本。此时，可以像调试普通静态JS文件一样，正常设置断点并进行调试。
方法二：利用Console日志跳转
第二种方法是通过console.log("让我调试吧！")在控制台输出特定日志。当在浏览器Console面板看到该输出后，点击日志右侧的链接，即可直接跳转到动态脚本。该脚本在Sources面板中通常以vmXXX命名，具体效果如截图所示：
总结
以上介绍了两种在浏览器中调试动态加载JavaScript脚本的方法，希望能帮助开发者解决调试难题。如有任何疑问，欢迎留言交流。感谢对本站的支持！