I recently found this useful page for devtools snippets

I never really used snippets before (I do have a ton of bookmarklets though), and I wanted to incorporate all the snippets on that page. There really isn’t any built in way to do that, but since practically everything in Chrome is exposed we can hack a way into it.

First off let’s see what we have already. Open dev-tools and take a look at the snippets.

If it doesn’t open in a new window then click the circled icon to open dev-tools in a new window.

Now you should have something that looks like this:

Now comes the cool part, we’re going to open devtools on the devtools window. With the active window the dev-tools window click Ctrl + Shift + J and you should see this:

Now go to the Resources tab and Local Storage, there may be more then one but it should be easy to figure out which one you need, then go to the scriptSnippets object:

Hopefully you can see where this is going. Let’s open up a dev-tools window on the second one by clicking Ctrl + Shift + J on the second window, I resized a bit to make it more manageable:

Now let’s head over to http://bgrins.github.io/devtools-snippets/ and scrape the snippets. Open up the console on that page and paste:

> var snippetsWrappers = document.getElementsByClassName('snippet-wrapper');
  var snippets = [];
  for (var i = 0; i < snippetsWrappers.length; i++) {
      snippets.push({
          name: snippetsWrappers[i].id,
          content: '//' + snippetsWrappers[i].childNodes[0].innerText.replace('\n', '\n//') +
              '\n' + snippetsWrappers[i].childNodes[1].innerText
      });
  }
  copy(JSON.stringify(snippets));

We now have a stringified version of the snippets in the system clipboard using the magic of copy on the console

Now that we have that in the clipboard we can now close that window. Now we need to merge in what we have in the clipboard with the current snippets, one way to do that is with this (in the right hand side window):

> var snippetsToAdd = JSON.parse(prompt('Hit ctrl + v and enter'));
  var currentSnippets = JSON.parse(localStorage.scriptSnippets);
  var nextId = Math.max.apply(Math, currentSnippets.map(function(obj) { return obj.id })) + 1;
  for (var i = 0; i < snippetsToAdd.length; i++) {
      currentSnippets.push({
          name: snippetsToAdd[i].name,
          content: snippetsToAdd[i].content,
          id: nextId++
      });
  }
  localStorage.scriptSnippets = JSON.stringify(currentSnippets);

You’ll get a prompt and you need to paste in the contents of the clipboard. This was the easiest way I could think of to share data between windows

If all went as planned then put focus on the bottom left window, hit F5 and you should now see:

You can see that the snippets are there in the top left window.

Play around while you’re in there, hopefully you’ll learn about the internals of how dev-tools work