First off, you may have everything you need right in front of you, within your current browser. However, each browser names their solution differently. For instance, Firefox uses the Scratchpad, while Google Chrome uses the Console. You’ll usually find the relevant feature under the ‘developer tools’ of your browser, and they sometimes need activating before use.
We like this approach because it requires the very bare minimum to begin. Much like tweaking the HTML and CSS elsewhere, you can write and test snippets to see those changes immediately, with no way of causing damage to the website in question.
Both Safari and Google Chrome use an error console, which you may have come across before:
However, it’s not always intuitive to use, mainly because you’re only really capable of running one-line scripts – after all, the console isn’t a virtual ‘skidpan’, it’s a debugger. In contrast, Firefox includes their own Scratchpad that’s almost like working within a dedicated text editor:
Here, you simply type your code into the open space, run the file, and see your changes live. Best of all, you don’t cause those changes to appear on the live site, meaning you can tinker away to your heart’s content!
2. Use an Online Shell
For many people, our next option is going to be more suitable than using a browser console window, although the concept is no less easy to grasp. In short, an online shell acts as an interface between you and the specific programming language in question. You usually work within your browser but can type directly into a text editor and run code almost as you would locally.
3. Collaborate With Others Using JSFiddle
Much like the shells we talked about in the previous section, you can also save your code for use elsewhere, so you’re not restricted to working within a ‘fiddle’. There are also a solid set of options to consider, including autosave functionality, and indent spacing;
However, the standout feature of JSFiddle is its collaboration tools. By toggling the option on, you can send a link to others, and have them join you in a group coding session using the same fiddle:
However, a full local install could bog down your learning, meaning you may need other solutions. This post outlined three options, so let’s recap them quickly:
- Write code snippets in your browser’s built-in debugger, console, or scratchpad.
- Use an online shell such as ES6 Console.
- Code within a sandbox such as JSFiddle, which also lets you share your snippets with others.
Featured image: skeeze.