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.
Navigate to the Sources tab.
You can expand the navigation menu to the left by clicking here:
At the top of the Sources navigator, click the sideways arrows for more options and select Snippets.
Open a new Snippet or utilize an existing one.
Type your code and hit the play at the bottom to run your code.
Console.logs are helpful to see your code results in the console.
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:
Gleb Bahmutov has a great blog post listing some features of Code Snippets which ive included here (https://glebbahmutov.com/blog/chrome-dev-tools-code-snippets/). To summarize a few, snippets can also be used to debug code from a larger application or program. You can use debugging tools like breakpoints on snippets just like you can with other Javascript code. Libraries available to the current page are also available in snippets. He lists some limitations as well including that you “cannot pass any arguments to a code snippet”, so the code may need to be modified to be useful. However, Snippets are an upgrade from tools like bookmarklets which allow developers to “quickly perform common web page tasks” according to the support.mozilla.org. Snippets have a similar functionality and are easier and more user friendly.
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!
Sources:
devTools Documentation:
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Other Sources:
https://briangrinstead.com/blog/devtools-snippets/
https://bgrins.github.io/devtools-snippets/
https://www.telerik.com/blogs/6-snippets-to-keep-in-your-chrome-devtools
https://glebbahmutov.com/blog/chrome-dev-tools-code-snippets/
Top comments (0)