Which file does Snippets of Chrome Dev Tool saved at?
Working solution on latest chromium (90.0):
On my ubuntu18, chromium snippets are saved under:
~/.config/chromium/Default/Preferences
as a one-line json file.
The above and Bookmarks are the files I normally backup.
if you parse that Preferences json file you find the snippets at the following json path:
ROOT.devtools.preferences.scriptSnippets
that property's value need to be parsed again as json. then you get an array of {name,content} for all your snippets.
Note: I am using jq-1.6 for the commands below
To backup all snippetes into one json file:
jq .devtools.preferences.scriptSnippets ~/.config/chromium/Default/Preferences \
| jq '. | fromjson' > /tmp/backup.json
To backup all snippets into separate .js files
# Tested with jq-1.6
# The script converts json entries into lines of format
# `filename[TAB]content-in-base64` and then
# for each line creates the corresponding file
# with the content decoded.
# Better be in a safe directory!!
mkdir /tmp/snippets-backup
cd /tmp/snippets-backup
jq .devtools.preferences.scriptSnippets ~/.config/chromium/Default/Preferences \
| jq '. | fromjson | .[]| [ .name, @base64 "\(.content)" ] | @tsv' -r \
| xargs -I{} /bin/bash -c 'file=$(echo "{}"|cut -f1); fileContent=$(echo "{}"|cut -f2); echo "$fileContent" | base64 -d > "${file}.js"'
About jq
jq is a great command-line tool to query and process JSON files. You can get it from stedolan.github.io/jq/.
As of Chrome 47 (or so), snippets are no longer available via localStorage. Also, natchiketa's answer is dependent on localStorage and also doesn't work any longer.
Below is the current technique:
getting snippets
InspectorFrontendHost.getPreferences(_ => console.log(JSON.parse(_.scriptSnippets)))
setting snippets
InspectorFrontendHost.setPreference("scriptSnippets", JSON.stringify(yourSnippets))
This technique was extracted from a github thread discussing this change.
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) <http://lodash.com/>\n * Build: `lodash modern -o ./dist/lodash.js`\n * Copyright 2012-2013 The Dojo Foundation <http://dojofoundation.org/>\n * Based on Underscore.js 1.5.2 <http://underscorejs.org/LICENSE>\n * Copyright 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n * Available under MIT license <http://lodash.com/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