console.snapshot

687474703a2f2f692e696d6775722e636f6d2f6531455575684d2e706e67

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 outputs the canvas context call stack and state changes to the console.

console.snapshot →

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 be used quite often over here!

The Application Cache is no longer a Douchebag

8721853228_965bc62923_b

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 longer a Douchebag →

Note: here’s the original Application Cache is a Douchebag article.

Sublime Web Inspector — Debug JavaScript in SublimeText

  • Set and remove breakpoints right in SublimeText
  • See all console messages with level
  • See object properties
  • See a stack and all variables (local, global, closure)
  • Evaluate selection on current call frame
  • Live reload

Sublime Web Inspector →

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 page isn’t being reloaded but the changes are being transferred via the Dev Tools Protocol to Firefox which updates the CSS as if you’d change it via Firebug/the Dev Tools themselves.

FldgNq0

Firefox CSS live editing, and a truckload of other new features — such a built-in jsfiddle/jsbin — are being planned for the next iteration of the Firefox Dev Tools.

Coding in the browser & controlling the browser from editors/IDEs →