Is that possible to store snippets in files and load into Chrome? about devtools-snippets HOT 12 CLOSED

basic instructions...

1. open devtools
2. undock devtools into its own window
3. cmd-opt-i (or whatever) again to open devtools again (inspecting the inspector)
4. open console
5. var stringifiedSnippets = localStorage.getItem('scriptSnippets');
6. copy(stringifiedSnippets); will copy to clipboard
7. open another chrome, repeat same actions
8. localStorage.setItem('scriptSnippets', <clipboard data from earlier>)

This doesnt merge snippets by duping against the name property but that'd be the next place to take it.

@anaran i'd love your help fleshing this out into a hackers guide if you could.

from devtools-snippets.

Would be good if snippets are also synced between devices as Chrome settings!

from devtools-snippets.

Portability of the snippets is a very important feature that isn't completely defined yet. I also think an import/export from a list of URLs could be a way to handle this, but direct access to a folder could be very good. I know Firefox scratchpad allows you to open from files. Maybe @paulirish has more information about support coming in Chrome?

from devtools-snippets.

See the note about localStorage in https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets-saving.

I was able to see localStorage entries corresponding to my Snippets in the Resources panel of the Developer Tools window opened from the undocked[1] Developer Tools window showing the snippets (using Ctrl+Shift+I).

[1] devtools need to run in their separate (undocked) window so that Ctrl+Shift+I will inspect devtools instead of closing devtools.

from devtools-snippets.

@anaran so are you able to see / modify the snippets successfully using the localStorage? And just to be clear, you are talking about opening devtools on itself to do this, or are you able to do it in the normal devtools window?

from devtools-snippets.

@bgrins yes, opening on itself.
If you do that you'll see entries the following.

The key has the format

"revision-history|%s|%s|%s",
 FILENAME, WebInspector.resourceTreeModel.mainFrame.loaderId, TIMESTAMP

The value is the file text content.

I have not tried modifying content via localStorage.setItem yet.

Adrian

localStorage.getItem('revision-history|Script snippet
#2|3096.14|1368717689495')
"var bad = true;"

On Sat, Oct 26, 2013 at 12:15 AM, Brian Grinstead
[email protected]:

@anaran https://github.com/anaran so are you able to see / modify the
snippets successfully using the localStorage? And just to be clear, you are
talking about opening devtools on itself to do this, or are you able to do
it in the normal devtools window?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-27130155
.

from devtools-snippets.

It's quite interesting, but since it requires opening devtools on itself and it isn't strongly documented (beyond being mentioned) I'm not sure if it is ready to put into the workflow yet. It would be quite neat if we had a script that could bootstrap all the snippets into the browser though. If you could come up with a proof of concept I would be interested in it :)

from devtools-snippets.

@anaran actually I think it's a bit easier:

from devtools-snippets.

cc @addyosmani

from devtools-snippets.

@paulirish At step 5 or 8 you have to use JSON.stringify(...).
Otherwise you store something like that to the localStorage: "[object Object],[object Object],[object Object],[object Object],[object Object]"

Thanks for that tip to transfer snippets from one chrome to another!

from devtools-snippets.

@paulirish Thanks Paul!
I already have pushed a snippet pretty far along, supporting snippet import in Chrome canary and Chrome stable (was a bit more tricky).

I will push to github within hours or days, depending on how my testing plays out.

from devtools-snippets.

Moving this discussion into Issue #35.

from devtools-snippets.