

Devtools Console, from Novice to Ninja - daker
http://daker.me/2013/12/devtools-console-from-novice-to-ninja.html

======
msoad
My two cents:

    
    
        ⌘ + K => clears console
        inspect(element)  => inspects element
        $(query) => equal to document.querySelector
        $$(query) => equal to document.querySelectorAll
        $_ => last output 
        clear() => clears the console. in your code your can `console.clear()`
        console.count(label) => counts with a label that you pass 
        console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
    

a lot more info here: [https://developers.google.com/chrome-developer-
tools/docs/co...](https://developers.google.com/chrome-developer-
tools/docs/console)

~~~
minikomi
Formatting log output - fantastic!

I really like to use:

    
    
        $0 -> $9 last hilighted elements in the inspector view
    

Especially when dealing with d3 generated svg .. can be tricky to get the
right element otherwise. Also, you can still use the debugger; command to stop
the context within a function (eg, callback from ajax request), from within
the console.

~~~
skeoh
Only $0-$4 is available (at least in Chrome 31.0.1650.63 and Firefox 26.0).

You can check what's available in the console command line in Chrome with

    
    
        Object.keys(console._commandLineAPI)

~~~
minikomi
oops... was going form memory on my phone thanks

------
izolate
Nice one, I learned a lot from this article. Looking forward to trying out
console.group() and console.assert() for tests.

~~~
skeoh
One consideration with console.assert() is that it does not interrupt
execution as you might expect it to.

