Table of Contents
- Creating a code snippet
- Running a code snippet
- Debugging code snippets
- Quick access to snippets
- Snippet use-cases
Sources view in Chrome Developer Tools has a code snippets feature, kind of like a built-in text editor, that allows to write, debug, save and re-use code snippets.
Creating a code snippet
To get to code snippets:
- Open the Developer Tools
- Navigate to Sources at the top menu
- Select Snippets in the left menu (see the image above).
- Click on “New Snippet” button
Running a code snippet
Snippet can be run in two ways:
- By hitting the small play button to the bottom right of the snippet
- By hitting
"Command + Enter"on Mac or
"Control + Enter"on Windows
Debugging code snippets
Quick access to snippets
Existing snippet can be opened through the source tab or by hitting a
"Command + P" shortcut on Mac or
"Control + P" on windows. This will open a fuzzy selector in which a snippet name can be entered.
"Command + Enter" on Mac or
"Control + Enter" on Windows will execute the snippet.
Snippets are great for ad-hoc prototyping and debugging.
In addition snippets can be used to save common debugging helper functions for quick re-use. There are libraries of snippets out there. One such library is code-snippets which, among other things, has a detailed page timing snippet and css layout snippet that draws boundary around every DOM element.
How to run snippets of JS on any page from DevTools: https://t.co/6K7VdM0a3M
— Chrome DevTools (@ChromeDevTools) January 2, 2018
Do you have any snippets that you like to use? Please share in the comment area bellow.