为您的开发者工具带来更佳的控制台体验！

妥协的观点

剪辑受损

语言支持受损

隆重推出 BetterConsole

加入测试版！

作为一名网页开发者，浏览器开发者工具无疑是最重要的工作工具之一，其重要性仅次于集成开发环境/代码编辑器。

但就像所有事物一样，它并不完美。总体来说还不错——功能丰富且没有真正的替代方案，它已经是目前最好的选择了（尽管不同浏览器的表现有所不同）。然而，在简单的控制台操作场景下，当你不需要所有指标工具的强大功能时，它的表现就会迅速下滑。让我来解释一下。

妥协的观点

在小屏幕（笔记本电脑）上工作时，你的可视区域会变得非常有限。无论你将游戏主机停靠在左侧、右侧、底部，还是放在一个完全单独的窗口中，你的网站预览或游戏主机查看体验都会受到严重影响。这是无法避免的。

剪辑受损

如果你像我一样是 JavaScript 的忠实粉丝，那么你很可能用控制台来摆弄过一些代码。当然，你也可以去CodePen之类的 Playground ，但你得先打开它；它需要加载，而且通常来说，这比点击一个按钮或一个键就能开始编写代码要麻烦得多。此外，如果你想尝试修改网站，或者预览和调整项目中的某些内容，那么除了使用开发者工具的控制台之外，别无他法。

然而，控制台的编辑体验非常糟糕。单行代码尚可接受，但任何较长的代码都难以编写。Firefox的多行模式或 Chrome 的代码片段功能略有改善，但与现代 IDE/代码编辑器相比仍然相去甚远。我们通常习惯的多行编辑功能包括高级代码自动补全、代码建议、代码折叠、格式化等等。

语言支持受损

最后，这可能有点牵强，但我认为很多 TypeScript 爱好者都会感同身受。

如果控制台能够支持TypeScript或其他 JavaScript 超集就太好了。不一定非得是原生支持，而是通过编译实现。理想情况下，只需将 TypeScript 代码片段拖放到控制台就能立即执行，无需任何变通方法。

既然我们在讨论语言支持，为什么不加入一些 CSS 甚至SCSS呢？如果能有一个合适的编辑器来编写和注入整个临时样式表就太好了。

所以，我在这里描述的本质上是一个代码游乐场——只需点击一个按钮，即可在任何网站上打开。有人可能会说，这是开发者工具控制台和标准代码游乐场的完美结合。但这真的可能吗？

隆重推出 BetterConsole

你可能已经猜到了，如果我向你提出一个问题，我也会给出解决方案。你说得对。

BetterConsole是我一直在开发的一个项目，它本质上就是我之前描述的那样——一个编码游乐场和 DevTools 控制台的结合体。

BetterConsole 的设计理念和架构相对简单。它是一款适用于 Firefox 和基于 Chromium 内核的浏览器的扩展程序，旨在解决上述所有问题。

从布局和有限的视口角度来看，BetterConsole 可以直接集成到您的网站中，并且fixed是内置的，因此不会影响视口的尺寸——它本身就是网站的一部分！此外，它是一个可以拖动到窗口任何位置并根据需要调整视图大小的气泡——极致的自定义性。快来体验一下吧：

接下来是多行编辑。这部分就更简单了——我直接用VS Code来实现。没错， BetterConsole 就是用从 VS Code 中提取出来的Monaco 编辑器驱动的。它包含了所有智能感知、代码建议、代码折叠以及 VS Code 中你喜欢的大部分功能。此外，我还集成了Prettier，方便快速格式化——不用谢！

至于语言支持——当然，TypeScript是支持的，我忍不住要提一下。SCSS 也支持！标准的 JavaScript、CSS 和 HTML 自然也都支持。CSS 和 HTML 都有独立的编辑标签页，这意味着你可以直接从“控制台”添加完整的样式表和 DOM 元素！

加入测试版！

所以，你看，我快疯了。最棒的是——我还没完呢！

BetterConsole仍在开发中——我们正在完善和优化MVP（最小可行产品）功能。我已经开始在Twitter上分享一些细节，这意味着beta版很快就会发布！我希望你们都能来体验！

Beta 测试将在BetterConsole 的 Discord 服务器上进行。官方 Beta 测试公告也会在适当的时候发布。不过，服务器已经开放，欢迎各位早期访客分享想法，并成为首批体验 BetterConsole 的用户！

所有参与 Beta 测试的用户在测试期间都将获得 BetterConsole 的所有功能，并在最终产品购买时享受最高 100%的折扣（具体折扣取决于您参与 Beta 测试的程度）。是的，最终它会是一款付费扩展程序，但无需订阅——只需一次性支付开发成本和费用，即可获得一年的技术支持。

但是，如果您今天加入Discord 服务器并尽快成为 beta 测试员，您很有可能终身免费享受 BetterConsole 的所有好处！

所以，我想剩下的就是加入Discord 服务器，在Twitter上关注 BetterConsole以获取持续更新，也欢迎在Twitter、Facebook或我的邮件列表中关注我，获取更多 Web 开发产品和内容。感谢阅读，再次提醒，欢迎加入 BetterConsole 测试版！