JavaScript Snippets In The Browser

NGS Harsha — Sat, 31 Jul 2021 09:15:48 +0000

The Problem

Sometimes, when building web applications, I want to test a piece of JavaScript code before actually writing it in the application and without switching between the editor and the browser. For example, checking the response of an API call using fetch or filtering out an array or converting the response JSON into the required format.

We can use the console tab in the browser's dev tools to write JavaScript, just type a line and hit enter. If we want to write multi-line expressions, we can use shift + enter to break into a new line, and hit enter at the end to execute all those lines. We don't have to use shift + enter always, sometimes the browser will automatically break into a new line after hitting enter if the expression is a multi-line expression (e.g., loops, function declarations etc.).

But, when we want to view and edit a piece of code we executed before, we have to use the up arrow key ↑ (just like cycling through terminal history). When we do that, we can't expect the browser to break into a new line when you hit enter inside a loop or a function while editing it.

The Trick

Chrome and Firefox have a feature (I don't know about Safari) where you can write JavaScript snippets just like you do in your text editor (with limited IntelliSense, and autocompletion of course).

For Chrome

In Chrome, open dev tools by pressing F12 and navigate to the Sources tab. Under that tab, on the left side, you will see a tab called Snippets, click on that. If you don't see it, click on the double angled brackets button (circled in red below) to expand the menu.

Now, click on the New snippet button to create a new snippet. You can name it whatever you want or leave it as it is. The browser will open the new snippet on the right side. There you can write your JavaScript code and run it.

After writing the code, click on the run/play button on the bottom right corner (highlighted in green) or press ctrl + enter, to run it. You can format the code using the button on the bottom left corner (circled in red above). You can view the output in the Console tab.

For Firefox

In Firefox, open dev tools by pressing F12 and navigate to the Console tab. on the top right corner of that tab, you will see a button (circled in red below). Clicking that will open a multi-line editor to the left. There you can write your JavaScript code and run it.

After writing the code, click on the run button or hit ctrl + enter to run it. You can format the code using the button with curly brackets (circled in red below). The output will be displayed on the right.

Note

We can run the code multiple times in Chrome without any errors. But Firefox gives redeclaration error if we try to run the code multiple times.

To avoid this error, wrap the code in a function and call it or write an IIFE (Immediately Invoked Function Expression)😉

Read Further

Read more about Chrome's snippets feature here, and about Firefox's multi-line editor mode here.

This article is available on my blog as well, check it out here