To be a decent web developer you have to know developer tool. If you want to be a better JavaScript developer, you have to master in the console tab of dev tool. there is no exception. no hanky panky...

first draft published: December 8, 2013

If you have hard time to follow this video, you can see the content below. Things you will learn-

1. $

When you dont have access to jQuery. You can pass any css selector to $. like $('a'), this will return the first elment of match. $ is an alias of document.querySelector

 > $('a');
  = <a class=​"navbar-brand" href=​"../​../​index.html">​That Js Dude​</a>​
 > $('a') === document.querySelector('a')
  = true
$$ of chrome returns all the match for a css selector. This is equivalent to document.querySelectorAll. You will get an array of all the matched selectors.
 > $$('a');
 = [
    <a class=​"navbar-brand" href=​"../​../​index.html">​That Js Dude​</a>​
    <a href=​"#" class=​"btn btn-success  navbar-right" id=​"loginText">​ sign in ​</a>​
    <a href=​"#" class=​"btn btn-success  navbar-right hide" id=​"logoutText">​log out ​</a>​
    <a href=​"#" class=​"navbar-brand navbar-right" id=​"uName">​Welcome​</a>​
    <a href=​"https:​/​/​gist.github.com/​cavneb/​7873485">​github gist​</a>​

 > $$('a').length;
 = 4

 > document.querySelectorAll('a').length;
 = 4

2. Preserve Log

if you relaod the page, anything in the console get cleared. somtimes you want to compare values before after and want to preserve the log upon page load or navigate to a different site. This could easily be done.
  right cick on the console tab and select "preserve log upon navigation"

3. contentEditable

Just edit anything as if browser is a text editor. This is very helpful when you want to take a quick screenshot.

  //edit texts in browser like a text editor
  > document.body.contentEditable = true;
    = true
  //now you can edit anything on the page like a text editor  

4. Log Object

String concatenation with an object makes it teriible when you want to log object. you cant expand properties. Some developers tries to use JSON.stringify to log it but that becomes very tough to read and expand. use of comman instead of "+" sign will solve this problem.
  >console.log('window: '+ window)
   = window: [object Window] 

   //this is not useful at all. i want to get the object
   //and would like to expand properties. to solve this problem, use comma

   > console.log('window: ', window)
    = window: Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

   > console.log('window: ', window, 'body: ', document.body);
    = widnow: Window{...}
      body: ...     

5. getEventListeners

getEventListeners is very helpful when you want to know what are the events a dom is listening. Get all the event binded to input with Id 'myInput'
 > getEventListeners($('#myInput'))
  = Object {click: Array[1], keyup: Array[1], focus: Array[1]}

  //there are three events (click, keyup and focus) binded to the input with id myInput

  //to view the binded code/listener
  //expand click, then Object, then lisenter
It depends on how events are binded to the DOM. if you use any library like JQuery, you will not see your code attached to the listener. Rather, you will see, JQuery library code/ wrapper function that bind your code (callback fucntion) to the dom. By using vanila JS like this one bellow. if you see getEventListeners result and you expand click then first object and then listener you will get the function you have written.

  > $('#myInput').addEventListener('click', function (){ 
  > getEventListensers($('#myInput'));
    =Object {click:Array[1]}
  > getEventListeners($('#myInput')).click[0].listener 
    =function (){console.log('clicked');}  

6. monitorEvents

monitorEvents log the event fired by the element you passed to the fucntion. if you dont pass any parameter, it will log all events fired and your console will be flooded. to monitor a particular event of your interest, just pass the name of the event. if you want to monitor muliple events just pass an array of name of the events to the function.
  > monitorEvents($('#myInput'));
    //this will monitor every single event happening to the input with ID myInput

  > monitorEvents($('myInput'), 'click');
    //will log only when click event is fired from input with ID myInput

  > monitorEvents($('#myInput'), ['click', 'keyup', 'focus']);
    //will log all click, keyup and focus events fired   


unmonitorEvents will stop logging events for the element you started monitoring. just pass the element to the fucntion. if you dont do this, browser will keep logging and this can become annoying.

  > unmonitorEvents($('#myInput'));
    //no more logging of events

7. console.time

console.time helps you to see how long a block of code tooks to execute.

  > console.time('myLoop');
    for(var i=0; i<100000; i++){

  = myLoop: 86.000ms 

8. console.group

when you have too many things to log, the console get flooded. you can simply log console generating from one place. or all the palces. if you dont write console.groupEnd(), all the consequent console will be grouped. this could be useful.

  > console.groupCollapsed('my Error Group');
    for(var i=50; i--;){
  == my Error Group
  //if you expand "my Error Group" you will see all erros
  //remember you have to use console.groupEnd()
  //otherwise, all the consequence log would be grouped inside it 

9. console.table


10. $_

$_ holds the value of the last result. this is very useful, you dont have to assign result to a variable explicity and use it in the next expression. However, $_ is not persistent. Its always the value of the last result.

  > 2+365+8/2*25
   = 467
  > $_
   = 467
  > $_*$_
   = 218089
  > $_
   = 218089 //$_ is always the last result.
  > Math.sqrt($_);
   = 467

11. clear

For windows you can press Ctrl + L for mac Cmd + K to clear your console. it is an alias of console.clear that will clean your garbases in console

  > clear();
    //will remove everything from your console.

12. console.trace

  > console.trace('myTrace');
   =  myTrace
   //you will get the call stack

13. console.count

count helps you to find number of hit. Everytime you hit the foo function, it will increase the count. You dont have to have a global variable to remember the count.

  > function foo(){
  > foo();
   = fooed: 1
  > foo();
   = fooed: 2
  > foo();
   = fooed: 3
  > foo();
   = fooed: 4  

14. profile

you can start profiling from console tab. After finishing profiling (profileEnd), go to the profile tab of dev tool. you will see 'myProfile' and do the digging you want to do.

  > profile('myProfile');
   = Profile 'myProfile' started;

  //do whaterver you want to profile 

  > porfileEnd('myProfile');
   = Profile 'myProfile' finished.

15. dir

to get the all the propertis of an object/DOM element
  > dir($('#myInput'));
   = input#myInput
   //you can expand it to see all the properties

16. inspect

inspect a dom element from console tab

  > inpsect($('#myInput'));
   // will switch you to the element tab to inspect #myInput
  > inspect($$('a')[3]);
    //this iwll start inspecting 4th anchor you have in a page 

17. $0-$4

get the previously accessed dom

  > $0
    //last element you have insepected
  > $1
    //second to the last item you have inspected
  > $2
    //you can use $0-$4 to get the last inspected elements