Devtools Snippets
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
A common usage for snippets is to replace developer bookmarklet type of functionality. The problem with bookmarklets is that they are a pain to create and share, and even using them can be difficult. You may need to show a bookmarks bar in the UI, run it, and open up devtools to see if it worked. Then you would need to make changes to a giant single line of JavaScript inside of a bookmark manager, or use a generator to convert a .js file into a bookmarklet. Snippets are a much better way to handle this workflow. Examples of this type of snippet would be adding jQuery to a page without it or printing the HTTP headers from the current page.
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.
Browser Support
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:
Future Functionality
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.
September 11th, 2013 at 12:59 am
I wonder if the saved snippets can be synced for signed in user of Chrome.
September 11th, 2013 at 6:32 pm
I would like to see an easy way to import / export these snippets. I believe it is being discussed, but I don’t think there is any way to do it right now. I’ll post an update here or at the devtools snippets project page with updates.
November 26th, 2013 at 9:50 pm
Indeed would be really great to be able synced snippets in chrome on different machine and/or have a specific folder on disk where snippets are stored so it would be easy to update sources through git.
Great article Thanks.
November 27th, 2013 at 6:43 am
Have a look at this issue – we are working on a way to import and export snippets: https://github.com/bgrins/devtools-snippets/pull/35. We are planning on using a format like https://github.com/bgrins/devtools-snippets/blob/master/snippets.json and having a tool to import and export these with different browsers.
April 25th, 2014 at 10:02 pm
[…] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]
April 26th, 2014 at 1:43 am
[…] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]
April 26th, 2014 at 3:47 am
[…] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]
April 26th, 2014 at 2:01 pm
[…] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]
May 4th, 2014 at 11:39 am
Google Chrome has had the shortcuts requested under
Future Functionality
for a while:
Toggle console and evaluate code selected in Sources panel Ctrl + Shift + E Cmd + Shift + E
Run snippet Ctrl + Enter Cmd + Enter
See
https://developers.google.com/chrome-developer-tools/docs/shortcuts#sources-panel
Soon after I wrote
https://github.com/bgrins/devtools-snippets/tree/master/import-export/chrome
I left Chrome for Firefox.
I find it a great advantage of Firefox not having to import/export source snippets like Chrome does.
Also, Firefox’s Addon SDK supports Firefox for Android as well and has JavaScript module support, ala CommonJS.
Google Chrome has no Android support for extensions and no code modules for extensions.
May 12th, 2014 at 1:34 am
[…] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]
August 3rd, 2014 at 4:47 am
[…] *) I used a snippet for counting the DOM-nodes. If you haven’t used snippets before, read this article. […]
December 13th, 2014 at 10:41 pm
Hi,
I have my own collection of code snippets, including auto download feature in bahmutov/code-snippets.
There is an intro blog post here if anyone is interested.
December 15th, 2014 at 10:17 pm
[…] Intro to DevTools snippets – a blog post by Brian Grinstead. […]
February 12th, 2015 at 9:16 am
Thanks Brian,
These links need to be updated, ” adding jQuery to a page without it or printing the HTTP headers from the current page”, I believe they are actually supposed to be:
https://github.com/bgrins/devtools-snippets/blob/master/snippets/jquerify/jquerify.js
https://github.com/bgrins/devtools-snippets/blob/master/snippets/showheaders/showheaders.js