Console
Main function: Logging code executions.
How? Add console commands wherever wanted within the code, it will log out what's asked in console panel.
The console panel is also a handy place to try out codes snippets.
Access:
F12 and choose console tab.ctrl+Shift+j- Console in the drawer:
esc
This allows a console panel to stay open regardless which tab is chosen. Will come handy for debugging, to open source tab and console panel at the same time.
Handy Loggings
console.log(pets)
The regular console.log(), can log "comments", variables, or combinations (comma separated).
console.log({pets})
Object shorthand syntax
With curly brackets {} wrapping the object, it will log the : {objName: objValue}.
Examples:
- Array
{pets} into {pets: Array(3)}
- Primitive string
{myCat} into {myCat: "Kitten"}
console.table(pets)
console.table() log a table. Sorting based on the values is possible by clicking the table headers. In the case the variabe is a primitive, it's just displayed plainly like using console.log.
console.trace("Comment")
console.trace() outputs a stack trace to the console. Not sure what it means, read further.
Example 1: Array pets
<script>
let pets = [
{"name": "Spot", "color": "black", "type": "cat"},
{"name": "Spike", "color": "grey", "type": "cat"},
{"name": "Hamlet", "color": "brown", "type": "hamster"}
];
console.log("console.log(pets)");
console.log(pets);
console.log("console.log({pets})");
console.log({pets});
console.log("console.table(pets)");
console.table(pets);
console.trace("how is this?");
</script>
Console for pets:
console.log(pets)
► (3) [{…}, {…}, {…}]
console.log({pets})
► {pets: Array(3)}
console.table(pets)
(index) name color type
0 'Spot' 'black' 'cat'
1 'Spike' 'grey' 'cat'
2 'Hamlet' 'brown' 'hamster'
► Array(3)
▼ how is this?
(anonymous) @ devtools_intro.html:165
Example 2: String myCat
<script>
let myCat = "Kitten";
console.log("console.log(myCat)");
console.log(pets);
console.log("console.log({myCat})");
console.log({pets});
console.log("console.table(myCat)");
console.table(pets);
console.trace("how is this?");
</script>
Console for myCat:
console.log(myCat)
Kitten
console.log({myCat})
► {myCat: 'Kitten'}
console.table(myCat)
Kitten
▼ how is this?
(anonymous) @ devtools_intro.html:177