Chrome Dev Tools Tips

Here’s some cool things you can do with the Chrome Dev Tools which you may not have know about. I use Chrome religiously, but I still find new things frequently.

Watch events on the DOM #

You can watch browser events on any given DOM node when they happen.

monitorEvents( document.getElementById('#div') );

It’s great when you’re trying to see how events are triggering when handling multiple events on the same element.

You can then unmonitor events by doing the below.

unmonitorEvents( document.getElementById('#div') );

Debug a function by name #

If you know the function name that is going to be invoked and you want to debug it without having to manually locate it in the dev tools, you can use debug(functionName) to automatically cause a breakpoint.

You can remove the debug by running undebug(functionName).

Console placeholders #

You can add placeholders in your console. Use %s for strings, %d for numbers, and %o for objects.

console.log( 'String: %s, Number: %d, and Object: %o', 'string', 1, {cool: 'console'} );

Style your placeholders #

You can style you console by wrapping parameters with a %c placeholder.

console.log( 'Color me %c%s %c%s', 'color: red;', 'Red', 'color:green;', 'Green' );

Add in console.save #

I use this a lot when I want to see more clearly how a JS object is structured - without having to open up the tree in the console.

Copy and paste this command into the dev tools console: [1]

(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)

Then console.save any object like so.

var obj = { a: 1, b: 2, c: 3 };
console.save(obj, 'my-object.json');
# Will be saved as my-object.json

Stack Overflow ↩︎