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.

Comments

  1. Sigma Says:

    I wonder if the saved snippets can be synced for signed in user of Chrome.

  2. Brian Says:

    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.

  3. Stephane Says:

    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.

  4. Brian Says:

    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.

  5. Chrome DevTools Features You May Have Missed | Your Web App Says:

    […] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]

  6. Chrome DevTools Features You May Have Missed | Tech Tips Says:

    […] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]

  7. Chrome DevTools Features You May Have Missed | Get Like and Followers Says:

    […] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]

  8. Chrome DevTools Features You May Have Missed - InfoLogs Says:

    […] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]

  9. Anaran Says:

    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.

  10. Chrome DevTools Features You May Have Missed - IWCN Official Blog | Indoreators Web Creations Network P. Ltd. Says:

    […] Brian Grinstead shares his DevTools Snippets on GitHub along with a blog post. […]

  11. Performance: Optimizing existing content | stoumann Says:

    […] *) I used a snippet for counting the DOM-nodes. If you haven’t used snippets before, read this article. […]

  12. Gleb Bahmutov Says:

    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.

  13. Performance Calendar » Performance measurements using Chrome DevTools code snippets Says:

    […] Intro to DevTools snippets – a blog post by Brian Grinstead. […]

  14. Elijah Lynn Says:

    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

Comments are closed. Please contact me instead.