I have been working on a small collection of snippets that are handy to reuse inside of browser devtools. These can be used in any devtools. You can jump straight to the devtools snippets project page and readme if you want to see some screenshots and details about each individual snippet.
The actual snippets can be seen here: https://github.com/bgrins/devtools-snippets/tree/master/snippets
Why would you use snippets
Another use would be saving console commands that you use during development. For example, if you wrote something to help export information from a page, or print out some debugging data for your application, you can use the multiline snippet editing interface rather than typing in the console. Plus you can save it when you are done in case you need it later.
Firefox has multiline support using the scratchpad editor, and Chrome has a new ‘snippets’ feature.
Currently, in Chrome you have to enable snippets support in chrome://flags and inside of devtools settings (see full instructions and screenshots). They are enabled by default in Canary, so this feature set will soon be widely available. Read more about snippets on the Chrome developer tools documentation.
Firefox Scratchpad is really cool for experimenting with code. In addition to being able to run an entire snippet, you can select just a portion of the code and execute it. Read more about scratchpad on the Firefox developer tools documentation. One thing I would like to see is better management of snippets (‘scratches’?). For example, see the UI for snippet editing in Chrome:
Things that would be awesome to add:
- Firefox: Better management of snippets. As seen in the screenshot above, it can be really handy to have a UI for storing, editing, and saving changes to the snippets. To be fair, right now you can save scratchpad contents to a file and then ‘open’ or ‘open recent’ later. Maybe if this was pulled more prominently into the UI without needing to open up a file explorer that be enough. It is cool that it actually saves the files to a known place on your disk.
- Chrome: Keyboard shortcut to run a snippet (or part of a snippet). Scratchpad uses Cmd+R/Ctrl+R, which makes sense but may be reserved for reloading the page. Also, storing the snippets in a known place on the disk is really handy, as they could be backed up, copied directly into a project, etc.
- All devtools: Import / export snippets. You can then sync your snippets across computers or share them with others. Maybe some sort of zip or JSON file containing the contents of all the snippets. Or a maybe a URL importer that loads the response into a new snippet, named the path of the request by default. For example, pasting https://raw.github.com/bgrins/devtools-snippets/master/snippets/performance.js would create a new snippet called performance.js with the contents of that request. Then you could just load up the importer with a list of URLs:
https://raw.github.com/bgrins/devtools-snippets/master/snippets/performance.js https://raw.github.com/bgrins/devtools-snippets/master/snippets/log.js https://raw.github.com/bgrins/devtools-snippets/master/snippets/base64.js ...
Snippets inside of devtools are big timesavers and are going to be really helpful for a lot of developers. You should check them out if you haven’t yet. Going forward, I’m hoping there will be an easy way to use, manage, and discover new snippets that work across browsers.