What is the Snippets Tool?
Snippets is part of the Google Chrome DevTools included on the Sources tab. It allows a developer to code, save, debug, and store pieces of code for repeated use. You can write your own snippets or find useful code snippets published online. Let’s look at how to access our snippets tool.
To access Snippets:
Open a Google Chrome tab and open the Chrome DevTools. You can do this by right clicking and selecting Inspect in the drop down menu, or use shortcut Command + Option + J on Mac or Ctrl + Shift + J on Windows.
Use Cases for Snippets:
Great, we have this tool to use! So when might we actually utilize snippets? One use for snippets is when you want to save one or more bits of code that you might run in the console repeatedly during development. Rather than typing right into the console you can use snippets to store code snippets and run them multiple times.
Another advantage to using snippets, as Christian Nwamba says in his blog post 6 Snippets to Keep in Your Chrome DevTools, “when you run a snippet, it executes from the context of the currently open page”. (https://www.telerik.com/blogs/6-snippets-to-keep-in-your-chrome-devtools) So you can run a specific snippet that will give you information back about the current web page you are visiting or working on. Brian Grimstead is a developer that maintains a list of some helpful snippets which can be found here (https://bgrins.github.io/devtools-snippets/). Try some that may be useful for you and add them to your own library of snippets! One example of this is the allcolors.js. It returns all of the colors used on the page in a nice organized list in the console. Below you can see the list for twitter!
Other Characteristics of Snippets:
In conclusion, the snippets feature in Chrome DevTools is a great way to reuse bits of code to make your development life easier. Explore the possibilities and use your tools!