If you’re like me and are in the middle of learning Javascript, you’ll know there’s nothing more important than being able to test your code. But there’s no super obvious way to test that code to make sure you’re, y’know, learning. Well, here are a few easy ways, and one way that’s a little less easy but an awful lot more convenient.

Onward!

Online Code Editors

These can be great places to host example pieces of code for you to share, but the fact that they don’t tend to include their own consoles, so all logs go to your actual browser window—which invariably breaks the layouts of the site—make me think there must be other options out there. Which there are. But here are a few resources:

• Jsfiddle – https://jsfiddle.net/
• Codepen – http://codepen.io/
• CSSDeck – http://cssdeck.com/labs

In Your Browser

Using the console of any browser, you can inject javascript right into the page and it’ll run. This is fine if you don’t need to save the script, or if you’re just testing a few lines you can write right in, but as you know, Javascript can be very picky about syntax, and consoles tend to be a little picky about writing things like multiple lines. In any of these, you can either right-click and hit ‘inspect element’ to open the inspector window, then navigate to the console, or hit the following menu items:

• Chrome – Hit ‘View > Developer > Javascript Console’
• Firefox – Hit Tools > Web Developer > Console
• Safari – Develop > Show Web Inspector

Right In Your Text Editor

This is my favourite. If I’m in Sublimetext 3, working on a javascript file, I can just hit Cmd + B and Sublime’s console will show up and compile my code, let me know if there are any errors, etc, right there in the window. This functionality—at least, for javascript—isn’t included in sublime, but it’s easy enough to set up. We’ll assume you’re already using Sublime for the purposes of this tutorial. I picked this up from Wikihow, but it’s easy enough you could figure it out without too much trouble, and more than that, it’s customizable! Wikihow link here: http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text

1. Install Node.js – go to https://nodejs.org/en/ and download the most up to date version of the Node software. Set it up and get it working, then…
2. Go into your terminal and type which node
3. That will give you the directory Node’s been downloaded to, which you’ll need for the next step.
4. In Sublime, navigate to Tools > Build System and hit New Build System
5. Replace the code with the code from the Wikihow page. (Method 2, bullet # 3. It’s down there, but it’s definitely there.)
6. Save the Build System as ‘Node’ and check that it’s shown up in the Tools > Build Systems menu. Make sure it’s checked off, then launch your Js file!
7. Whenever you have some javascript to run, just hit Cmd + B. If you want to hide the console that shows up, just hit Esc, then Cmd + B to rerun the code. It’s easy, it’s fast, and it’s (for me) by far the most convenient way to test my javascript as I’m writing it!

Here’s the sublime documentation if you want to read up more on Build Systems. 

Anyway, if you have any tweaks to this, let me know, and happy javascripting!

Update!!! (3/21/2016)

Wellity, wellity, wellity, look who’s coming back to update his old posts. It’s me. I knew I’d be back.

Just wanted to add another super convenient way to test your JavaScript. All you need is Node.js installed on your computer and your terminal.

1. Write your JS as normal and save it as normal.
2. Open your terminal, navigate to the directory containing your JS.
3. Type Node <filename.js>
4. Sit back, relax.

If there’s one thing I’ve learned in the last few months working with JavaScript, it’s that none of these methods are always going to be the best, but they’re all good options, and it’s always a good idea to have a good way to test your code. Don’t use your live site to do that. Please.

Well, that’s it for me! Go! Be free! Test your code!