时间戳

首页 > 解决方案 > 如何在 Firefox 调试器中调试嵌入在 HTML 响应中的 JavaScript

firefox - 如何在 Firefox 调试器中调试嵌入在 HTML 响应中的 JavaScript

问题描述

我无法弄清楚如何调试放置在<script>与 HTML 响应有效负载一起加载的元素中的 JavaScript。我可以查看有效载荷：

嵌入在 HTML 响应负载中的 JavaScript

是否可以添加断点并单步执行该 JavaScript 代码？

标签： firefoxfirefox-developer-toolsfirefox-developer-edition

解决方案

要在调试器中查看 JavaScript 并能够对其进行调试，您需要//# sourceURL在脚本末尾添加注释为其命名，请参阅https://stackoverflow.com/a/14131320/432681和描述https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources。

在您的情况下，这看起来像这样：

...
if ($('option_panel_type_file')) {
  $('option_panel_type_file').remove();
}
//# sourceURL=option-panel
</script>
...

这使得调试器以“选项面板”的名称显示您的脚本。

话虽如此，请注意，出于安全原因，当您动态添加 HTML 时，不会执行嵌入在 HTML 中的 JavaScript 代码，例如通过innerHTML，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element /innerHTML#security_considerations了解更多信息。

因此，为了执行代码，您需要将它与 HTML 分开加载并嵌入它，例如通过添加一个<script>元素。

尽管您显然在使用 jQuery，但请注意，它的功能绕过了其文档html()中有关此限制的警告。

推荐阅读