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
> $('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
right cick on the console tab and select "preserve log upon navigation"
//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
>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: ...
> 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 (){
console.log('clicked');
});
> getEventListensers($('#myInput'));
=Object {click:Array[1]}
> getEventListeners($('#myInput')).click[0].listener
=function (){console.log('clicked');}
> 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($('#myInput'));
//no more logging of events
> console.time('myLoop');
for(var i=0; i<100000; i++){
2+2*3;
}
console.timeEnd('myLoop');
= myLoop: 86.000ms
> console.groupCollapsed('my Error Group');
for(var i=50; i--;){
console.error(i);
}
console.groupEnd()
== 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
//console.table
> 2+365+8/2*25
= 467
> $_
= 467
> $_*$_
= 218089
> $_
= 218089 //$_ is always the last result.
> Math.sqrt($_);
= 467
> clear();
//will remove everything from your console.
> console.trace('myTrace');
= myTrace
//you will get the call stack
> function foo(){
console.count('fooed');
}
> foo();
= fooed: 1
> foo();
= fooed: 2
> foo();
= fooed: 3
> foo();
= fooed: 4
> profile('myProfile');
= Profile 'myProfile' started;
//do whaterver you want to profile
> porfileEnd('myProfile');
= Profile 'myProfile' finished.
> dir($('#myInput'));
= input#myInput
//you can expand it to see all the properties
> inspect($('#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
> $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