14 Must Know Chrome Dev Tools Tricks - #JavaScript30 9/30

[ドラゴンハートゼクモル]

Here's a summary of the 14 tips:

1. Find code which modifies an element
- Find the element you want to look the code for in the Elements tab on the DevTools (F12)
- Right-click and go to 'Break on...'
- Select 'attribute modifications'

2 Regular
console.log(<string>)
Prints out <string> to the console.

3. Interpolated
console.log('Hello I am a %s string', <string>)
Behaves like the printf() function of the C language.

4. Styled
console.log('%c some text...', <css-string>)
It lets us style the first argument using css with '%c'

5. Warning
console.warn(<string>)
Prints out <string> to the console with a yellow exclamation icon before it.

6. Error
console.error(<string>)
Prints out <string> to the console with a red X icon before it.

7. Testing
console.assert(<condition>, <string>)
If <condition> is false, <string> will be output to the console.

8. Clearing
console.clear();
Clears the console.

9. Viewing DOM elements (1)
console.log(<element>)
Prints out the <element> to the console along with its attributes and content.

10. Viewing DOM elements (2)
console.dir(<element>)
Prints out a drop-down list of properties and methods in <element>.

11. Groups
console.group(<string>)
console.groupEnd(<string>)
Prints out a drop-down which groups a set of console.logs together. <string> must be the same to start and end the drop-down list.


By default, the drop-down will be printed out uncollapsed, use the method above than console.group to change this behaviour.

12. Counting
console.count(<string>)
Appends the number of times <string> has been printed out.

13. Timing
console.time(<string>)
console.timeEnd(<string>)
Prints out how much time passed between time and timeEnd. <string> must be the same.

14. Table
console.table(<array of objects>)
Prints out a table of the objects' properties and values.

[katarinazzz]

I found out about your channel on The Odin Project. This is awesome and really funny! Thanks :D

[danbei]

Finally a JavaScript video with good intro music!! :)

[reuvenkarasik]

Awesome! I hope I'll remember all of those. I came to this video quite cynical thinking I'd already know most of it, but I learned many new things :)
A small note: maybe this video should've been called differently since you mostly revealed console tricks and not general dev tools tricks (like the first tip). Maybe the other tabs of the chrome dev tools deserve their own video :)

[vikramadityakokil]

Great video!! First thing i did after watching this video "open console -> console.log(console);"

[Mathspy]

Oh God how did I live without these...

[landtechjobs]

Idk why I need to style a console log but okay... the rest is good. Thanks for the vid, gave it a thumbs up

[gerardosimpson]

Great, now I know how facebook put his 'Stop' message in console.

[hari]

I already love JS, but you just made it infinitely more fun :-)

[bluemarks]

I like how the hexcode of the color green is #badass 😁

[boredhuman]

Hi Wes, how did you write es6 in browser? I mean in script tag above closing body tag.

[JorgeLuisCallalleTorres]

similar to console.dir(p), is posible to see all property css in a specific element ?, for example <p> ?

[BosEriko]

Woah. This is awesome.

Great video! Keep it up!

[KenzoArts]

Wow, dude what is the name of the font in your js code ? It looks cool

[skkitchenstore]

That was a really good video, subbed.

[scribl]

I'm just here to say I love your IDE fonts

[SheriffKoder]

Awesome, never seen these ticks elsewehere !

[logomoniclearning]

the console.error('shit') came rally handy.

[mackenkie]

Awesome! Lot of neat tricks here thanks!

[aluuusch]

Hmm, I honestly don't see the point in styling your console output. The only thing that matters is the index.html outcome, isn't it? Could some clarify for what it is still good?