Comments (8)
Thanks! I will add screenshots for the snippets. I had a few ideas for other bookmarklet type of features off the top of my head (just putting here for reference, may add others later too):
- Allow drawing of simple shapes (like arrows or circles using SVG) on top of current page. Could be handy for taking screenshots and trying to draw attention to a particular element or for pointing to an element in a presentation.
- Click on any element to log out the closest URL + anchor. Sometimes you want to share a link to a particular element on the page, but don't know what the most relevant one would be. By clicking on an element you might get a URL like: #3 (comment).
- Lint / validate HTML, CSS, or JS.
from devtools-snippets.
Went ahead and added some screenshots for setting up / using snippets in Chrome and Firefox Scratchpad in the README: https://github.com/bgrins/devtools-snippets.
@addyosmani do you have any idea on the timeline for enabling snippets as a non-experimental feature? It is awesome! I do wish there was an easy way to import / export snippets to share across different computers or developers.
from devtools-snippets.
Snippets came out of experiments in Canary a while ago so its just a matter of time before it's available in stable. We don't currently have a way to export snippets that easily but you can Save them to disk and share that way. I personally use GistBox to manage the snippets I use across systems. Makes it easy to label and keep track of them.
from devtools-snippets.
Perhaps this is tangential to the original issue, but since @addyosmani is here and you're talking snippets, I'll throw this out there. I would absolutely love to see snippets rolled into Chrome sync and/or to have a way to quick upload them to a gist for sharing with coworkers for one off updates. The more I use snippets, the more I am paranoid about loosing them in the event of problem with my system.
from devtools-snippets.
@jcumminsr1 I agree completely! I think snippets will become pretty widely used as developers start to see them, and it should be easy to import/export/sync changes. I just wrote a post about snippets, and under the heading "More Functionality" I talk about some options for import/export: http://www.briangrinstead.com/blog/devtools-snippets.
I'd like to see an import from URL feature, because those could be shared even across browsers (if FF and Chrome both implemented it). Then you could paste in a list of links like:
https://raw.github.com/bgrins/devtools-snippets/master/snippets/performance.js
https://raw.github.com/bgrins/devtools-snippets/master/snippets/log.js
https://raw.github.com/bgrins/devtools-snippets/master/snippets/base64.js
and it would create new snippets called performance.js
, log.js
, base64.js
. That doesn't really handle the syncing of changes, but it would be pretty easy for sharing snippets across systems.
from devtools-snippets.
@bgrins Great post. I like the idea of being able to capture the client side JS in order to make large scale persistent changes that could be used across pages / domains. When I get some time I'd love to dig into exactly how the snippets are stored in Chrome (plaintext / compressed / in a db). Do you know off the top of your head?
from devtools-snippets.
@jcumminsr1 the best I can tell, it is inside of SnippetStorage.js, which seems to store them using a WebInspector.Settings.createSetting. I'm really not sure how those are being persisted, but it seems like it may be the same way that it stores your selections from the settings page in devtools (like Disable Cache
and whatnot) - so definitely local to the browser instance. I'm not sure if these are persisted to a file somewhere or not though, but it certainly won't be stored as individual js files.
from devtools-snippets.
Thanks for all the pointers. I have expanded the snippets collection, taken a bunch of screenshots, and updated the documentation site. I recently updated the project site here: http://bgrins.github.io/devtools-snippets/ with some styling, and so that it doesn't use http://gist-it.appspot.com
(document.writes to embed) anymore and instead directly embeds the highlighted code snippets using the pygments
command on build.
from devtools-snippets.
Related Issues (18)
- Add prominent link to repository and improve styling on http://bgrins.github.io/devtools-snippets/ HOT 1
- jquerify - Bump jquery CDN link to 2.0.3 HOT 2
- Mention Firefox Scratchpad as well HOT 5
- Is that possible to store snippets in files and load into Chrome? HOT 12
- Reorganize project layout HOT 2
- Export to XML HOT 9
- Update README to reflect that snippets are now in stable releases HOT 1
- Automate run of snippet HOT 2
- Update 'all on one page' snippets HOT 6
- Keyboard Shortcuts? HOT 5
- Enhanced formcontrols.js HOT 2
- console.save in android HOT 1
- Export/import window not popping up upon running the snippet HOT 2
- After console.save, the HTML element disappears from the console
- Code is under Copyright - license information missing
- Code Snippets Sync
- List all undefined CSS classes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from devtools-snippets.