How to import and export Script Snippets saved inside of Chrome DevTools (plus bonus: retrieve Console command history!)

instructions.md

Snippets - CLI

This is a Mac-Specific set of instructions abridged from my Stack Overflow answer of the same question. I'm a Mac user, and this is a Gist for my own use, really, but if you're a Linux or a - gods help you - Windows user, you can find similar commands there, too, as well.

How Snippets are Stored

Snippets are stored in a sort of "metastorage" internal preferences within Chrome. They are stored, separately, for each Chrome profile present on the system. These are accessible from the file system (and can be copied directly to your pasteboard - on a Mac, specifically) with the following command:

echo "Available Chrome profiles:" && readarray -t profiles < <(find "$HOME/Library/Application Support/Google/Chrome/" -path '*/Profile */Preferences' | sort); PS3='Choose Chrome profile to copy snippets from: '; select PROFILE in "${profiles[@]}"; do cat "$PROFILE" | jq -r '.devtools.preferences."script-snippets"' | pbcopy && echo "Snippets copied from $PROFILE."; break; done

(NOTE: I'm not certain if systems with only a single profile still have the [...]/Google/Chrome/Profile #/Preferences path structure. It's wholly possible Chrome uses a [...]/Google/Chrome/Profile/Preferences (or even a [...]/Google/Chrome/Preferences) path when only a single profile exists on the machine, and the command below would need to be altered. If you happen to run this and this IS the case, please provide a comment, below, and, should you need, I'll provide a one-liner to facilitate copying in THAT scenario, too).

Snippets - Browser

Mechanism

To access the browser's metastroage, you need to open a Devtools-on-Devtools window:

1. Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
2. Make sure that the developer tools are undocked into a new window (Command+Shift+d, typically, on a Mac). You can also manually undock it via the menu by clicking:

3. Focus the now-detached Devtools window.
4. Press Command+Option+i again on this new window.

That will open the DevTools on the DevTools.

How to export Snippets saved inside of Chrome

1. Open a DETACHED instance of Dev Tools (⌘⌥+I, ⌘⇧ + D)
2. Focus that window.
3. Execute the following code:

InspectorFrontendHost.getPreferences(_=>console.log(JSON.parse(_['script-snippets']).sort((a,b)=>a.name.toUpperCase() <= b.name.toUpperCase() ? -1 : 1)))

4. This will yield an Array of Objects, something similar to this:

5. Right-click the Array output, and click Copy Object

6. Paste into safe storage of your choice.

How to re-import them into a new instance of Chrome

1. To import them back in, really all you need is a strigified Array of Objects in that same format.
2. Presupposing a variable containing an array of objects named mySnippets:

InspectorFrontendHost.setPreference("scriptSnippets", JSON.stringify(mySnippets))

BONUS: Retrieve/Set Console History

Reading last 300 Console entries

To view the last 300 console entries in the form of an Array of Strings (["Entry1", "Entry2"])

JSON.parse(localStorage.getItem('console-history'));

Setting the last 300 Console entries

Assuming an array of string named myEntries:

localStorage.setItem('console-history', JSON.stringify(myEntries));