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

Question

我不知道如何调试放置在与 HTML 响应负载一起加载的 <script> 元素中的 JavaScript。我可以查看负载：

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

Answer 1

要在调试器中看到 JavaScript 并能够对其进行调试，您需要在脚本末尾添加 //# sourceURL 注释为其命名，参见 and the description at 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动态地，例如通过 innerHTML，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations 了解更多信息。

所以为了让代码执行，你需要从 HTML 中单独加载它并嵌入它，例如通过添加 <script> 元素。

虽然你显然在使用 jQuery，但请注意它的 html() 函数规避了 its documentation.

中的限制警告