As a web developer, your browserās DevTools are surely the most important working tool, right beside your IDE/code editor.
But like all things, itās not perfect. Itās generally fine - with a lot of features and no real alternatives, itās the best it gets (though it varies between browsers). However, it all falls apart pretty quickly in simple console-focused scenarios, when you donāt need the power of all the metric tools. Let me show you what I mean.
Compromised view
When working on a small (laptop) screen, your viewport becomes a limited real estate. Whether youāll dock your console left, right, or to the bottom, or into an entirely separate window, either your website preview or console viewing experience will get crippled. Thereās no way around it.
Compromised editing
If youāre a long-time JavaScript fanboy like me, then youāve most likely used your console to play around with some code. Sure, you can always go to a playground like CodePen, but you first have to go there; it needs to load, and in general, itās much more of a hassle than just clicking a single button or a single key and being ready to go. Also, if you want to play around with a website, or preview-tweak something in your project, then thereās no other way than through the DevTools console.
However, the editing experience in the console is heavily crippled. One-liners are fine, but anything longer is a pain to write. Multi-line mode in Firefox or Snippets in Chrome make it a bit easier, but theyāre still a far cry from what you get in a modern IDE/code editor. Things like advanced code autocompletion, suggestions, code collapsing, formatting and more, are what weāre used to when it comes to multi-line editing.
Compromised language support
Lastly, this might be a bit far-fetched, but I think many TypeScript lovers out there will relate.
It would be handy if TypeScript, or other JavaScript supersets, were supported in the console. Not necessarily natively, but through compilation. It would be great to just drop a TypeScript snippet into the console and have it execute, just like that - no workarounds needed.
And while weāre talking about language support, why not through some CSS or even SCSS in there? Having a proper editor for writing and injecting whole temporary stylesheets would be nice.
So, essentially what Iāve described here is a coding playground - just one that you can open with a click of a button and on any website. One could argue - a perfect combination of DevTools console and standard coding playground. But is this even possible?
Introducing BetterConsole
As you might have guessed, if I present you a problem, I also have a solution. And youāre right.
BetterConsole is a project Iāve been working for a while now is essentially what Iāve described before - a combination of a coding playground and DevTools console.

The idea and architecture behind BetterConsole are relatively simple. Itās a browser extension for Firefox and Chromium-based browsers, meant to solve all the mentioned issues.
Starting from the placement and limited viewport argument, BetterConsole plugs right into your website, fixed
-positioned, so it doesn't affect the viewportās dimensions - itās part of it! Also, itās a bubble you can drag all around the window and resize the view to your needs - ultimate customizability. Check it out:
A browser console you can resize, drag, and drop, without interrupting your window?
— BetterConsole (@BetterConsole) May 11, 2021
How about that? š#webdev #webdevelopment #javascript #typescript pic.twitter.com/T9NTUM5XnI
Next up, multi-line editing. Here, the dealās even simpler - Iāve just dropped in VS Code to do the work. Thatās right - Monaco editor - the one extracted from VS Code - is what powers BetterConsole. With it comes all the intellisense, code suggestions, code folding, and most of the stuff you love from VS Code. Additionally, Iāve added in Prettier integration for quick formatting - youāre welcome!
As for the language support - of course, TypeScript is supported, I couldnāt help myself. Thereās SCSS too! Standard JavaScript, CSS, and HTML are naturally also supported. Dedicated editing tabs for CSS and HTML means that you can append full-blown stylesheets and DOM elements right from the āconsoleā!
Join the beta!
So, you can see, Iām going pretty bonkers here. And the best part is - Iām not over yet!
BetterConsole is still in development - finishing and refining the MVP features. Iāve already started sharing some details over on Twitter, which means that the beta will launch really soon! And I want you to come to the party!
Beta tests will be conducted over on the BetterConsole Discord server. The official beta announcement will also appear when the time comes. However, the server is already opened, and Iām welcoming early visitors to share their ideas and be among the first few to use BetterConsole!
Every beta-tester will get full access to all BetterConsole functionality for the duration of testing and a discount of up to 100% (depending on your engagement in the beta tests) on the final product. Yes, itāll end up being a paid extension, but with no subscription - just a one-time payment to cover the costs and development and 1 year of guaranteed support.
However, if youāll join the Discord server today and become a beta-tester soon, thereās a high chance youāll enjoy all the benefits of BetterConsole completely free - for life!
So, I guess all thatās left to say is join the Discord server, follow BetterConsole on Twitter for continuous updates, and also consider following me for more web dev products and content on Twitter, Facebook, or my newsletter. Thanks for reading, and again, join the BetterConsole beta!