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

【问题标题】：How to debug JavaScript embedded in HTML response in Firefox Debugger如何在 Firefox 调试器中调试嵌入在 HTML 响应中的 JavaScript
【发布时间】：2020-08-31 17:19:27
【问题描述】：

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

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

【问题讨论】：

屏幕截图似乎显示了 HTML 响应正文，而不是包含 JavaScript 字符串的 JSON 结构。
它是一个 HTML 响应体，嵌入了 javascript。
您的 jQuery 代码中可能有错误，因为 $('option_panel_type_file') 选择了所有带有 标签名称 "option_panel_type_file" 的元素。虽然我猜那是元素的 ID。在这种情况下，您需要在名称前添加一个井号，即$('#option_panel_type_file')。
不是jquery，而是古老的prototype.js。代码是 Magento 1.x 框架的核心。没有添加自定义代码。 javascript 在客户端中正确执行。

标签： firefox firefox-developer-tools firefox-developer-edition

【解决方案1】：

要在调试器中查看 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() 函数绕过了 its documentation 中的限制警告。

【讨论】：