https://github.com/dgp1130/snippets

Some random Chrome DevTools snippets I've written.
https://github.com/dgp1130/snippets

Last synced: about 2 months ago
JSON representation

Some random Chrome DevTools snippets I've written.

• Host: GitHub
• URL: https://github.com/dgp1130/snippets
• Owner: dgp1130
• Created: 2019-11-20T18:50:28.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-06T20:06:45.000Z (over 3 years ago)
• Last Synced: 2024-10-05T07:40:59.864Z (4 months ago)
• Language: TypeScript
• Size: 20.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Snippets

Set of "snippets" loaded in Chrome DevTools. Some do useful things which can be

run on demand, others and just random pieces of code while I was

prototyping/debugging something. Some are written in TypeScript and can't be

executed directly in the browser snippets windows. You need to run these in the

[TypeScript playground](http://www.typescriptlang.org/play/).

## Dependencies

* [Node](https://nodejs.org/)

* [Node Package Manager](https://npmjs.com/)

Just run:

```shell

npm install

```

## Import/Export

See [this Stack Overflow answer](https://stackoverflow.com/a/35002464).

TL;DR: Open a DevTools-on-DevTools window by opening DevTools _undocked_, and

then press `Ctrl+Shift+I` to inspect it with a second DevTools window. The

console in this second window should have access to the `InspectorFrontendHost`

API.

### Import

To import snippets from Chrome DevTools to this Git repository, you must first

export the data from Chrome. Execute in the DevTools-on-DevTools console:

```javascript

InspectorFrontendHost.getPreferences((prefs) => console.log(JSON.stringify(JSON.parse(prefs.scriptSnippets), null /* replacer */, 4 /* tabSize */)));

```

Then copy paste the output to a JSON file and run:

```shell

npm start import 

```

This will update the `snippets/` directory with all the content. You can then

commit and push the snippets.

### Export

WARNING: This will overwrite any existing snippets with the same names of the

exported snippets. Any unrelated snippets with unique names are left alone.

To export from this repository to Chrome DevTools, run:

```shell

# Don't use `npm start`, because it includes extra output you don't want.

node_modules/.bin/ts-node index.ts export

# Consider piping this into the relevant copy script to put stdout on the clipboard.

```

Then copy the output and then paste it in the DevTools-on-DevTools console.

Close and reopen the DevTools windows to see the imported snippets.