DEV Community

loading...
Cover image for ๐Ÿšœ Improve your productivity with Snippets of JavaScript on the Chrome DevTools ๐Ÿ„

๐Ÿšœ Improve your productivity with Snippets of JavaScript on the Chrome DevTools ๐Ÿ„

viclafouch profile image Victor de la Fouchardiรจre ใƒป2 min read

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 ๐Ÿ˜‰

Create Snippets of JavaScript

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

Sources > Snippets

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

Control+Shift+P or Command+Shift+P

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

Control+o or Command+o

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

DesignMode snippet

You can find the source code of the snippet in this gist.

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

Voilaaaaa ๐Ÿ‘๐Ÿ‘

Next week, I will show you 5 very nice snippets to improve your productivity!

Cheers ๐Ÿป ๐Ÿป ๐Ÿป

Discussion (1)

pic
Editor guide
Collapse
akanshgulati profile image
Akansh

I guess next week never came :P