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 .

But I cann't find a file that snippets data saved in under this path.

Does anyone knows ? Plz tell me . Thanks very much!

Answer 1

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.

Answer 2

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/.

Answer 3

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

Answer 4

Mac

/Users/yourUserName/Library/Application Support/Google/Chrome/Default/Preferences

Chrome save your snippets in Preferences.

Answer 5

EDIT:This answer is Out of date, snippets are no longer saved in localstorage.

Please see paulirish's answer.

For older versions of chrome this might work. its stored here C:\Users\Webdev\AppData\Local\Google\Chrome\User Data\Default\Local Storage\chrome-devtools_devtools_0.localstorage. but I don't think you can view it from the file path,

you can view it by doing the following. open up the devtools and then head to chrome://inspect, under the "OTHER" heading you should see the devtools panels url you just opened, the url starts with chrome-devtools://dev. inspect it by clicking the inspect link. a new devtools window should open, under the resources tab, go to localstorage there is a key called scriptSnippets, that's where its saved. just copy and paste it or use the console panel to modify the output beforehand.

Hope this helps