JavaScript Consoles

The one bane of JavaScript development is that it’s not as easy to run  code as instantly as a compiled language such as C# or Java. Even when using a fully featured IDE, the results are limited to attaching it to a browser port via HTML to see the results. There are some options however. Some require internet access, others once set up, such as Node.js, allow you to execute the code with nothing more than the CLI.

Browser Console

The ever present and common tool that most web development enthusiasts would be accustomed to is the built in console that most modern browsers have. This is usually a part of a comprehensive set of developer tools that most browsers come bundled with. It’s a simple as opening up the console and typing in JavaScript commands. Each browser has it’s own implementation but the base level items should be quite similar to someone familiar with one.

Firefox browser console

Firefox browser console running JavaScript

CodePen

CodePen has been a stomping ground for front end wizardry or as a platform for experimenting and seeking feedback. So with this new JS console, not only can HTML/CSS/JavaScript and various extensions thereof be shared, but also the code output. Read the official update on Codepen.io blog.

Codepen

Codepen.io

JSbin

Another similar code sharing site is JSbin, in fact the JavaScript console  for Codepen is an almost complete port of the one used in JSbin. JavaScript entered in the JavaScript section can be seen either in the output section by virtue of it’s effects or the results directly seen in the console by logging items to it. Find out more about JSbin here.

JSbin

JSbin

Node.js

Enter server side JavaScript. Apart from that Node.js opens up JavaScript on the development machine itself, allowing access to native file system, create utility scripts etcetera. One of the cool thing is the ability to run a Node.js command prompt which allows the running of snippets of code typed directly into the prompt or running script files.

Node.js

Node.js

Brackets

Now this is a interesting concept from Adobe. It’s a lightweight code editor with JSLint baked in and one very invaluable feature is the ability to attach to a running browser process and see updates made to either the HTML/CSS/JavaScript in the browser’s viewport instantly. At the moment the only supported browser is chrome and is expected to expand to others.

Brackets.io text editor

Brackets text editor