如何在没有 Firebug 的情况下在 Firefox 上调试 JavaScript？答案

【问题标题】：How to debug JavaScript on Firefox without Firebug?如何在没有 Firebug 的情况下在 Firefox 上调试 JavaScript？
【发布时间】：2022-03-10 18:00:26
【问题描述】：

如何在没有 Firebug 的情况下在 Firefox 上调试 JavaScript？我发现并非所有最初加载的 JavaScript 源文件都显示在调试工具的左侧面板上。我有机会把它们挖出来吗？

更多背景：我们必须在客户的机器上进行远程调试，而这台机器除了我们的远程连接外，所有东西都被阻塞了。此外，客户也被拒绝安装 Firebug。

【问题讨论】：

如果你不能安装插件，我认为内置的开发者工具是你最好的选择。
当谈到“调试工具的左侧面板”时，您是指 Firebug 的 Script 面板中的 Script Location Menu 吗？

标签： javascript debugging firefox firebug

【解决方案1】：

Firefox有built-in devtools，未安装Firebug时可以通过F12打开，Ctrl+Shift+I 或通过 Firefox 菜单 > 开发人员 > 切换工具：

他们的Debugger panel可以通过Ctrl+Shift+S打开。它的工作原理与 Firebug 中的类似。
请注意，为了能够debug dynamically evaluated scripts（例如通过eval() 执行的脚本），脚本需要包含//# sourceURL 注释。
注意：如果它们不包含该注释，它们将不会'不会显示在 Sources 侧面板中！

请参阅以下示例以获取此类 //# sourceURL 评论（取自链接的 MDN 网站）：

var button = document.getElementById("clickme");
button.addEventListener("click", evalFoo, false);

var script = "function foo() {" +
             "  console.log('called foo');" +
             "}" +
             "foo();//# sourceURL=my-foo.js";

function evalFoo() {
  eval(script);
}

Firefox DevTools 有一个名为'black boxing' 的功能来检测 JS 库并自动将它们排除在调试之外，因为人们通常只想调试他们的源而不是第三方源。这些脚本仍将列在 Sources 侧面板中，并且可以手动为它们关闭黑名单。

【讨论】：

谢谢塞巴斯蒂安。这是我一直在使用的内置开发工具，但与 Chrome 相比，并非所有 js 库都被提示进行调试。
您应该在问题中提到您还尝试了 Firefox DevTools。注意：Firebug != Firefox 开发工具。当您看不到脚本的来源时，我更新了我的答案以澄清情况。