Some suggestions

[addyosmani]

Fantastic work on this once again!

Some ideas:

• Include screenshots for your snippets in the readme file. This makes it super easy to see what a particular snippet does and also makes it easy for others to share it if they think it'd help others :)
• For more details on console.table, checkout https://plus.google.com/+AddyOsmani/posts/PmTC5wwJVEc We're going to have more official docs on this soon :)
• Snippets are also super-useful for storing bookmarklets. If there are particular developer bookmarklets that you think would be worth throwing in here, feel free to. They just need to work from the Snippets panel.

[bgrins]

Thanks! I will add screenshots for the snippets. I had a few ideas for other bookmarklet type of features off the top of my head (just putting here for reference, may add others later too):

• Allow drawing of simple shapes (like arrows or circles using SVG) on top of current page. Could be handy for taking screenshots and trying to draw attention to a particular element or for pointing to an element in a presentation.
• Click on any element to log out the closest URL + anchor. Sometimes you want to share a link to a particular element on the page, but don't know what the most relevant one would be. By clicking on an element you might get a URL like: https://github.com/bgrins/devtools-snippets/issues/3#issues_next.
• Lint / validate HTML, CSS, or JS.

[bgrins]

Went ahead and added some screenshots for setting up / using snippets in Chrome and Firefox Scratchpad in the README: https://github.com/bgrins/devtools-snippets.

@addyosmani do you have any idea on the timeline for enabling snippets as a non-experimental feature? It is awesome! I do wish there was an easy way to import / export snippets to share across different computers or developers.

[addyosmani]

Snippets came out of experiments in Canary a while ago so its just a matter of time before it's available in stable. We don't currently have a way to export snippets that easily but you can Save them to disk and share that way. I personally use GistBox to manage the snippets I use across systems. Makes it easy to label and keep track of them.

[jcumminsr1]

Perhaps this is tangential to the original issue, but since @addyosmani is here and you're talking snippets, I'll throw this out there. I would absolutely love to see snippets rolled into Chrome sync and/or to have a way to quick upload them to a gist for sharing with coworkers for one off updates. The more I use snippets, the more I am paranoid about loosing them in the event of problem with my system.

[bgrins]

@jcumminsr1 I agree completely! I think snippets will become pretty widely used as developers start to see them, and it should be easy to import/export/sync changes. I just wrote a post about snippets, and under the heading "More Functionality" I talk about some options for import/export: http://www.briangrinstead.com/blog/devtools-snippets.

I'd like to see an import from URL feature, because those could be shared even across browsers (if FF and Chrome both implemented it). Then you could paste in a list of links like:

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

and it would create new snippets called performance.js, log.js, base64.js. That doesn't really handle the syncing of changes, but it would be pretty easy for sharing snippets across systems.

[jcumminsr1]

@bgrins Great post. I like the idea of being able to capture the client side JS in order to make large scale persistent changes that could be used across pages / domains. When I get some time I'd love to dig into exactly how the snippets are stored in Chrome (plaintext / compressed / in a db). Do you know off the top of your head?

[bgrins]

@jcumminsr1 the best I can tell, it is inside of SnippetStorage.js, which seems to store them using a WebInspector.Settings.createSetting. I'm really not sure how those are being persisted, but it seems like it may be the same way that it stores your selections from the settings page in devtools (like Disable Cache and whatnot) - so definitely local to the browser instance. I'm not sure if these are persisted to a file somewhere or not though, but it certainly won't be stored as individual js files.

[bgrins]

Thanks for all the pointers. I have expanded the snippets collection, taken a bunch of screenshots, and updated the documentation site. I recently updated the project site here: http://bgrins.github.io/devtools-snippets/ with some styling, and so that it doesn't use http://gist-it.appspot.com (document.writes to embed) anymore and instead directly embeds the highlighted code snippets using the pygments command on build.