JavaScript Snippets In The Browser
Tags: webdev, javascript
Published: 2021-07-31 09:15:48

## 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 <kbd>enter</kbd>. If we want to write multi-line expressions, we can use <kbd>shift</kbd> + <kbd>enter</kbd> to break into a new line, and hit <kbd>enter</kbd> at the end to execute all those lines. We don't have to use <kbd>shift</kbd> + <kbd>enter</kbd> always, sometimes the browser will automatically break into a new line after hitting <kbd>enter</kbd> 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 <kbd>&#8593;</kbd> (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 <kbd>enter</kbd> 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 <kbd>F12</kbd> 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.

![Chrome Dev Tools Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8vre03rm9hhj6adeg0b.jpg)

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.

![Chrome Dev Tools Snippets Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thr1x59p3pxn3qulzu5j.jpg)

After writing the code, click on the run/play button on the bottom right corner (highlighted in green) or press <kbd>ctrl</kbd> + <kbd>enter</kbd>, 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 <kbd>F12</kbd> 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.

![Firefox Dev Tools Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31txjkmo7jqvjp2bbpyn.jpg)

After writing the code, click on the run button or hit <kbd>ctrl</kbd> + <kbd>enter</kbd> 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.

![Firefox Dev Tools Snippets Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibsj7bksuppec3qz9dt0.jpg)

### 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.

![Firefox Redeclaration Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cjlq6l50xiyukke556w.jpg)

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](https://developer.chrome.com/docs/devtools/javascript/snippets/), and about Firefox's multi-line editor mode [here](https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#multi-line_mode).

This article is available on my blog as well, check it out [here](https://ngsharsha.netlify.app/blog/javascript-snippets-in-the-browser/)