Tag Archives: devtools

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson: JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). The … Continue reading

Elsewhere , , , , Leave a comment

Beyond Console Debugging Tricks

Most developers out there know about console.log() and debugger;. console.table() might also be a known command, but most of the time it stops right after there. There are more methods and tricks one can use to debugging webapps. Beyond Console … Continue reading

Elsewhere , , , , Leave a comment

Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained … Continue reading

Elsewhere , , , Leave a comment

DevTools Timeline Viewer

DevTools Timeline Viewer lets you share and view DevTools Timeline traces online, in the browser. Handy if you want to share a Timeline trace with someone to help you debugging. DevTools Timeline Viewer → DevTools Timeline Viewer Example →

Elsewhere , , , Leave a comment

Debugging Node with Chrome DevTools

Available in the nightly build of Node.js (not the release version, yet). Here’s a video of it in action (skip forward to 42:51): Paul Irish has got you covered on how to set this up:Debugging Node.js Nightlies with Chrome DevTools … Continue reading

Elsewhere , , , Leave a comment

Redux DevTools Chrome Extension

A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change … Continue reading

Elsewhere , , , Leave a comment

Chrome DevTools Custom Object Formatters

Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what? Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger. Say you’d like to visualize … Continue reading

Elsewhere , , , Leave a comment

ng-inspector – The AngularJS inspector pane for your browser

ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you develop, debug and understand your AngularJS applications. Handy tool to see how exactly the scopes are nested and such. ng-inspector →

Elsewhere , , , Leave a comment

Chrome’s new web animation controls

Elsewhere , , , Leave a comment

Debugging CSS Animations

A few nice additions to working with CSS Animations have been added to the recent releases of the Firefox Developer Edition: Editing curves already was possible, yet a few default ones have been added: Chrome will also sport likewise features … Continue reading

Elsewhere , , , Leave a comment