Output snapshots and screenshots of canvas elements directly in the console of the Chrome Dev Tools var canvas = document.createElement(“canvas”), ctx = canvas.getContext(“2d”); // … //draw // … console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size Resulting output is the image picture above. Also supports creating a snapshot which …
Tag Archives: devtools
Become a Javascript Console Power-User
Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown. We all know console.x, but there’s some more stuff to do in the console … sure that $0 shorthand will …
The Application Cache is no longer a Douchebag
A new command for the Firefox Command Line (part of the Developer Tools) named appcache to manipulate/inspect the appcache. As someone commented on the original post: Somebody has recently pointed out that the appcache is still a douchebag but at least Firefox now has a way to tell us why. The Application Cache is no …
Continue reading “The Application Cache is no longer a Douchebag”
Editing and Saving CSS/JS using the Chrome Dev Tools
Sublime Web Inspector — Debug JavaScript in SublimeText
Firefox CSS live editing via SublimeText
A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText. Note that the …