Firefox 开发者工具 JS 编辑器（类似 Firebug）？

Question

有没有办法在Firefox开发者工具中显示一个类似于firebug的JavaScript代码编辑器？我发现在处理大型、复杂的代码时，这种方式更加方便，可以在右侧看到代码，在左侧看到结果。请参考以下链接：

- vsync

Answer 1

Firefox开发者工具有一个名为Scratchpad的东西，类似于Firebug的代码编辑器。

它是一个独立的窗口，但也有一种方法可以将其作为DevTools内部面板使用。

此外，它支持保存/打开脚本，基于tern的自动完成，漂亮的打印，甚至可以让您在浏览器上下文中执行代码（如果您曾经在Firefox前端上工作过，这可能会很有用）。

- pbrosset

---

谢谢。它只是弱化版的万能Firebug，而且没有办法将面板放在DevTools内部。我有一种感觉你从未亲自尝试过，对吗？它只会在开发者工具包中放置一个小按钮，当点击时可以打开一个新的scratchpad窗口。 - vsync

pbrosset 是 Firefox DevTools 团队的一员，所以他知道自己在说什么。请注意，您需要在“默认开发者工具”下检查选项“Scratchpad”，而不是“可用工具箱按钮”下的选项。 - Sebastian Zartner

Answer 2

前往 工具箱选项 (按 F12，然后单击 齿轮 图标)，在 默认开发者工具 下勾选 Scratchpad (这将添加一个名为Scratchpad的新选项卡到开发者工具中，就像 Console & ... 一样)，单击 Scratchpad 以激活它。

如 @pbrosset 所说，在 Scratchpad 中，您可以编写 JS 代码 (非常棒)，使用 Ctrl+R (您需要选择要运行的代码) 或使用 Run 按钮，您可以运行代码。结果将显示在 Console 选项卡中，如果您想查看 Console & Scratchpad 而不必移动到它们的选项卡上，请简单地按下 Esc 或单击 切换分割控制台 图标。

希望这有所帮助。

更新

也许您应该尝试这个附加组件 Console Sidebar

- Mehdi Dehghani

---

你的回答有什么不同于他的吗？它是一样的。 - vsync

@vsync我想详细说明用户如何激活和使用这个工具。因为内容太长了，我决定将其作为答案而不是评论。 - Mehdi Dehghani

非常感谢。不过，这个工具太糟糕了 :/ 它的用户体验远远落后于 Firebug。 - vsync

@vsync 不客气，正如你所知，不幸的是Firebug已经不再适用于Firefox了_你可以通过禁用e10s来使用它，但是你知道_我认为那个工具并不是真的很糟糕，当然Firefox Dev Tools中有一些Firebug所拥有的遗漏功能，但是没有其他选择。让我们期待Firefox团队能够添加更多酷炫的功能。 - Mehdi Dehghani

@vsync e10s 是 Electrolysis 的简称，它是 Mozilla 为将 Firefox 拆分成多个进程以提高响应速度、稳定性和安全性而进行的项目名称，请查看我的回答这里和提到的链接。 - Mehdi Dehghani