Which file does Snippets of Chrome Dev Tool saved at?

Question

As I know , personal data always be saved at profile path which can be find at chrome://version.

I added many snippets in my Chrome Dev Tool, and want to backup them

Answer 1

EDIT (Jan 2016) WARNING: I can only assume from recent downvotes that this doesn't work anymore. I'll update when I have a chance.

TL;DR

• Snippets are stored as sqlite files.
• You can extract them as an array of [{id: n, name: 'foo.js', content: "The script"}]
• Instructions for OS X are below

On OS X, assuming you have a sqlite command line client installed (I had one already and I don't recall installing one explicitly), you'll find it this way:

# If you don't know what Chrome Profiles are, you probably use Profile 1, so: cd ~/Library/Application\ Support/Google/Chrome/Profile\ 1/Local\ Storage

In this directory you should have a file called chrome-devtools_devtools_0.localstorage, if so, you should be able to do:

sqlite3 chrome-devtools_devtools_0.localstorage

...and you should be in the sqlite shell, which starts out like this:

SQLite version 3.7.13 2012-07-17 17:46:21
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

You can do .tables to see the tables in this file:

sqlite> .tables
ItemTable

And then you can do this to see the column names in that table:

PRAGMA table_info(ItemTable);

Since localStorage is just a key/value store, this table is pretty simple:

0|key|TEXT|0||0
1|value|BLOB|1||0

What would be much more illuminating would be to see the key names:

select key from ItemTable;

And you should see something like this:

fileSystemMapping
showAdvancedHeapSnapshotProperties
lastDockState
resourcesLargeRows
networkResourceTypeFilters
pauseOnCaughtException
showInheritedComputedStyleProperties
elementsPanelSplitViewState
filterBar-networkPanel-toggled
networkLogColumnsVisibility
networkPanelSplitViewState
sourcesPanelDebuggerSidebarSplitViewState
pauseOnExceptionEnabled
watchExpressions
breakpoints
consoleHistory
domBreakpoints
Inspector.drawerSplitViewState
InspectorView.splitViewState
WebInspector.Drawer.lastSelectedView
currentDockState
editorInDrawerSplitViewState
experiments
inspectorVersion
lastActivePanel
sourcesPanelSplitViewState
sourcesPanelNavigatorSplitViewState
scriptSnippets_lastIdentifier
previouslyViewedFiles
revision-history
revision-history|Script snippet #1|20267.2|1410876616909
scriptSnippets

The snippets are in scriptsSnippets. I had no snippets when I started to do this, and so I didn't see this key. Upon creating my first snippet, the key appeared. So next I did:

select * from ItemTable where key = 'scriptSnippets';

Et voila!

scriptSnippets|[{"id":"1","name":"SnipFoo.js","content":"/**\n * @license\n * Lo-Dash 2.4.1 (Custom Build) \n * Build: `lodash modern -o ./dist/lodash.js`\n * Copyright 2012-2013 The Dojo Foundation \n * Based on Underscore.js 1.5.2 \n * Copyright 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n * Available under MIT license \n */\n;(function() {\n\n  /** Used as a safe reference for `undefined` in pre ES5 environments */\n  var undefined;\n\n  /** Used to pool arrays and objects used internally */\n  var arrayPool = [],\n      objectPool = [];\n\n  /** Used to generate unique IDs */\n  var idCounter = 0;\n\n  /** Used to prefix keys to avoid issues with `__proto__` and properties on `Object.prototype` */\n  var keyPrefix = +new Date + '';\n\n  /** Used as the size when optimizations are enabled for large arrays */\n  var largeArraySize = 75;\n\n  /** Used as the max size of the `arrayPool` and `objectPool` */\n  var maxPoolSize = 40;\n\n  /** Used to detect and test whitespace */\n  var whitespace = (\n    // whitespace\n    ' \\t\\x0B\\f\\xA0\\ufeff' +\n\n    // line terminators\n    '\\n\\r\\u2028\\u2029' +\n\n    // unicode category \"Zs\" space separators\n    '\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\

...and so on. Note that you'll see more than one version of your snippet. I just pasted lodash.js in that new snippet I mentioned above, and already I have it twice.

So, how to actually get the script out of this? Well, once you get the value field, that's just a JSON array, where you have a snippet id, name and content. So create a SQL script to pass to sqlite3, from the command line, like this:

echo "select value from ItemTable where key = 'scriptSnippets';" > showSnippets.txt

And then feed that script like this:

sqlite3 chrome-devtools_devtools_0.localstorage < showSnippets.txt

It's slightly prettier to look at if you do this:

sqlite3 chrome-devtools_devtools_0.localstorage < showSnippets.txt | python -m json.tool