bgrins / devtools-snippets Goto Github PK
View Code? Open in Web Editor NEWA collection of helpful snippets to use inside of browser devtools
Home Page: http://bgrins.github.io/devtools-snippets/
A collection of helpful snippets to use inside of browser devtools
Home Page: http://bgrins.github.io/devtools-snippets/
Hi, I've modified the formcontrols.js snippet to create an HTML report via a data URI. Helpful in my case where I needed to share form controls with a team. I also excluded hidden elements.
(function() {
var forms = document.querySelectorAll("form");
var sMU = "
sMU += "
console.group("HTMLForm \"" + forms[i].name + "\": " + forms[i].action);
console.log("Element:", forms[i], "\nName: "+forms[i].name+"\nMethod: "+forms[i].method.toUpperCase()+"\nAction: "+forms[i].action || "null");
["input", "textarea", "select"].forEach(function (control) {
[].forEach.call(forms[i].querySelectorAll(control), function (node) {
if (node.type != "hidden") {
sMU += "
});
});
console.table(tab);
console.groupEnd();
sMU += "
Id | HTML5 Type | Name | Value | Formatted |
" + node.id + " | " + node.type + " | " + node.name + " | " + node.value + " | " + (isNaN(node.value) || node.value === "" ? node.value : parseFloat(node.value)) + " |
window.location.href = "data:text/html;charset=UTF-8,"+sMU;
})();
I am using the chrome verison 54 when i run the snippet from separate dev tools window mode, it doesn't bring up any export/import dialog as mentioned in the documentation (last two steps).
Instead it just pops a dialog asking to be in the seperate window mode.
Dunno if this could be a thing... but it'd be great to be able to invoke snippets via keyboard shortcuts.
Burden for supporting that is agreeably not on this repo. If wiring keyboard shortcuts to snippets is possible, however, I'd love to see how to do it on the README
.
I use the heck out of hashlink.js
, but having to open up the dev tools panel is a bit cumbersome.
Is it possible to make run of snippet automated, so i don't have to run it manually every time when page reloads?
These totally work as Firefox Scratchpads as well. Tools > Web Developer > Scratchpad. Copy/paste and Cmd-R / Ctrl-R to run.
The goal is to make contributing easier (only one place to add documentation, a README.md file).
Structure should look like this:
/snippets
/jquerify
README.md
jquerify.js
jquerify.png
/hashlink
README.md
hashlink.js
hashlink.png
index.html (generated on build)
https://github.com/bgrins/devtools-snippets/tree/newlayout/
https://github.com/bgrins/devtools-snippets/blob/newlayout/Rakefile
With snippets saving in files, we may use Git, CoffeeScript, and any editor.
Is it possible to use it now?
I don't know Javscript syntax so please excuse any mistakes I might be typing.
There is one HTML element from a website I want to write to a text file so that I can read it in Python. I ran this code below intending to do that:
var el = document.getElementsByClassName("exc-param-dr-date hasDatepicker")[0];
el.appendChild(document.createTextNode("Test"));
var tmp = document.createElement("div");
tmp.appendChild(el);
var sh = console.log(tmp.innerHTML);
(function(console){
console.save = function(data, filename){
if(!data) {
console.error('Console.save: No data')
return;
}
if(!filename) filename = 'console.json'
if(typeof data === "object"){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
})(console)
console.save(tmp.innerHTML,['to-date.json'])
I was able to successfully write that element to a text file. However, that same element then disappeared from the html code afterwards. How can I avoid this?
how to download the created file into desktop instead of downloading to android?
Hi there,
Would be cool to be able to sync snippets with google account settings.
Thanks.
Hi
Thanks for a great project
Is there a plan for a tool that can export the snippets in the project to XML?
I'm on OS X Mavericks, running the latest release of chrome (31.0), not canary.
For me, the instructions in the README aren't correct, since snippets are no longer an experimental feature.
I use this snippet a lot, especially when I'm converting a site from bootstarp-3 to bootstarp-4
https://gist.github.com/kdzwinel/426a0f76f113643fa285
First of all i would like to thank you for your snippets, especially the performance.js
. Using it as a chrome snippet already helped me to better understand how to use the api.
According to https://choosealicense.com/no-license/ (a site operated by GitHub, Inc.) any repository that does not include a license defaults to exclusive copyright:
When you make a creative work (which includes code), the work is under exclusive copyright by default. Unless you include a license that specifies otherwise, nobody else can use, copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation.
And further down
If you find software that doesn’t have a license, that generally means you have no permission from the creators of the software to use, modify, or share the software.
Although you wrote that everyone can
Feel free to use, modify, or share any of these snippets.
I am uncertain if this is enough or if a missing license is still enough to prohibit everyone from using your code.
I am sorry that this is a kind of a hassle.
The querystrings.js on the github page differs slightly from the source on github, and returns an error when run whereas the source does not.
Might be worth an update!
Fantastic work on this once again!
Some ideas:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.