如何调试异步加载页面里包含的js文件

调试异步加载页面里包含的JS文件是网站开发中一项非常重要的任务。在这里，我将为你提供一些调试异步加载JS的攻略和技巧。

使用Chrome DevTools调试异步加载的JS文件

Chrome DevTools 是一个非常强大的调试工具，它提供了一些重要特性来调试异步加载的 JS 文件。以下是一些示例：

1.通过Sources面板调试异步加载的JS文件

1. 在Chrome浏览器中打开待调试的网站，并打开DevTools（F12)。
2. 进入 "Sources" 标签页，查找包含要调试的 JS 文件的资源。
3. 如果资源没有被加载，则在 "Network" 标签中查找该资源，并请求该资源。
4. 设置断点： 当找到 JS 文件时，可以单击左侧的行号来在JS代码中添加断点。接下来，从页面中触发JS代码时将会终止执行并跳转到该断点处。

2.通过控制台调试异步加载的JS文件

1. 在Chrome浏览器中打开待调试的网站，并打开DevTools。
2. 进入 "Console" 标签页。
3. 通过手动执行JS命令来加载所需的JS文件，例如：使用 fetch 或 XMLHttpRequest 来获取文件和执行代码。
4. 执行代码的同时，通过console.log()语句对代码进行调试。

使用Firefox DevTools调试异步加载的JS文件

Firefox DevTools是Firefox浏览器的一整套开发人员工具。下面是一些Firefox DevTools的示例：

1.通过Debugger面板调试异步加载的JS文件

1. 在Firefox浏览器中打开待调试的网站，然后在 "Developer tools" 中选择 "Debugger"。
2. 在 "Debugger" 面板中启用 "Async" 和 "Events"。
3. 打开窗口，导航到目标页面并单击“暂停”键以中断正在进行的JS脚本。
4. 查找要调试的 JS 文件，如果该文件没有加载，请刷新页面。
5. 在代码中设置断点：在 "Debugger" 面板中找到相关的JS文件，逐步单击代码行号来设置断点。
6. 执行代码进行调试：重新开始脚本执行，断点将会被暂停。

2. 通过控制台调试异步加载的JS文件

1. 在Firefox浏览器中打开待调试的网站，并打开DevTools。
2. 进入 "Web Console" 标签页，通过控制台（Console）加载所需的JS脚本。
3. 执行代码进行调试：在已加载的JS脚本中完成设置的断点，然后使用 "Step over" 或 "Step In" 等命令逐行执行代码进行调试。

总之，调试异步加载的 JavaScript 文件是一项需要仔细执行的任务。幸运的是，现有的浏览器开发人员工具提供了有效的功能以支持这项工作。以上是我提供给你的示例和技巧，希望对你有所帮助。