🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄
Tags: javascript, productivity, chrome, tutorial
Published: 2020-07-22 14:12:28

Hello guys! 👋 

Sometimes you may write the same code in your console over and over again. Why not save this piece of code directly in your web browser? Use the __Snippets__!

Snippets have access to the JavaScript context of the page, which means that you can interact with `document` or `window` of any web page. It can become very effective during your work.

> Note: Next week, I will show you the __5 best snippets__ so be sure to [follow me](https://dev.to/viclafouch) 😉

![Create Snippets of JavaScript](https://dev-to-uploads.s3.amazonaws.com/i/e5nj8dykuq0h12o9q3gu.gif)

## Create a snippet

To create a snippet, nothing could be simpler: Open the developer console, go to the "Sources" tab and in the panels, click on "Snippets".

On the left of this panel are all your snippets. You can __create__, __modify__, __delete__ and __run__ a snippet in all tabs/pages.

![Sources > Snippets](https://dev-to-uploads.s3.amazonaws.com/i/yfuic4rnc3rmxyot0iq7.png)
<figcaption>Sources > Snippets</figcaption>

> You can also go to the snippets panel by using the shortcut **Control+Shift+P** or **Command+Shift+P** (Mac) to open the Command Menu.

![Shortcut snippet](https://dev-to-uploads.s3.amazonaws.com/i/db7lpglcu57tp1kttcj3.png)
<figcaption>Control+Shift+P or Command+Shift+P</figcaption>

## Run a snippet

1. Open the Snippets panel.
2. Click the name of the Snippet that you want to run.
3. Click `Run Snippet`, or press __Control+Enter__ or __Command+Enter__ (Mac).

or

1. Press __Control+o__ or __Command+o__ (Mac) to open the Command Menu.
2. Type the `!NameOfTheSnippet`

![Run a snippet](https://dev-to-uploads.s3.amazonaws.com/i/lpcceio6rn4fi91iy96k.png)
<figcaption>Control+o or Command+o</figcaption>

#### Rename a Snippet
Right-click on the snippet name and select `Rename`.

#### Delete a Snippet
Right-click on the snippet name and select `Remove`.

## An example of snippets

[Design Mode](https://gist.github.com/viclafouch/c6445aa2f0cf23f990587ad3061fd380) is a tiny snippet which puts Chrome into edit mode, allowing you to edit entire pages as though you were in an HTML editor.

This is very useful when you want to debug your website.

![DesignMode snippet](https://dev-to-uploads.s3.amazonaws.com/i/1spko7uz4jnj4sdomo81.png)

![DesignMode snippet](https://dev-to-uploads.s3.amazonaws.com/i/w00snd20sb1bb3hzvuwh.gif)

You can find the source code of the snippet in [this gist](https://gist.github.com/viclafouch/c6445aa2f0cf23f990587ad3061fd380).

## Another example

In the snippet bellow, I get all images and display their  informations (`height`, `width`, `alt`, `lazy-loading`, etc...). Very useful!

![Snippet example chrome](https://dev-to-uploads.s3.amazonaws.com/i/l8z3bqqkk1qssn56xrp4.png)

Voilaaaaa 👏👏

Next week, I will show you __5 very nice snippets__ to improve your productivity! 

Cheers 🍻 🍻 🍻 

{% link https://dev.to/viclafouch/5-best-places-to-find-free-svg-css-icons-for-your-websites-41c5 %}

{% link https://dev.to/viclafouch/7-amazing-css-tips-and-tricks-for-linting-your-html-o5n %}