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!

Might

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.

Utopian

The github thread explains this, but you need a devtools-on-devtools setup to get this to work. (Launch devtools undocked, then press Cmd+Opt+I or Ctrl+Shift+I) from with devtools focused to open a new devtools that inspects the original one. – Zicarelli

how do i restore the snippets from chromes profile folder? i had to reset windows and im only left with the profile folder – Earwax

Newbie question: I executed this and it seemed to work - outputting an array of Objects, one for each snippet. How do I save this into .js files on my harddisk? – Vivyanne

@Vivyanne I'll leave that mostly to you, but the [download] attribute is key: ourcodeworld.com/articles/read/189/… – Utopian

RoccoB's technique didn't just point to them but actually opened up all of the snippets that went missing when things got reset – Gibeon

Answer 2

Working solution on latest chromium (124):

In ubuntu, chromium snippets are saved inside the Preferences .json file.

Possible locations:

• ~/.config/chromium/Default/Preferences
• ~/snap/chromium/common/chromium/Default/Preferences (snap)

To find the exact location of Preferences you can check the property Profile Path in the chrome://version/ page and then append /Preferences to it.

The snippets are saved as a serialized json under the .json path:

.devtools.preferences.scriptSnippets

The value needs to be parsed as json, then you get an array of {name,content} pairs which correspond to the snippets.

Note: I am using jq-1.6 for the commands below

To backup all snippets 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 (one per-snippet)

# 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
# encoding/decoding helps in passing to xargs

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

Thibaud

You should mention at least what jq is and where to get it since it's a 3rd party tool. Also, my Preferences file doesn't contain any occurrence of the string snippets at all (I'm using Chrome 76.0). – Combine

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

Wittenberg

Answer 4

Mac

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

Chrome save your snippets in Preferences.

Slain

Found there as kind of JSON values – Humpage

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

Rim

Both answers no longer work. I just posted the working answer below. – Utopian