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() Prints out to the console. 3. Interpolated console.log('Hello I am a %s string', ) Behaves like the printf() function of the C language. 4. Styled console.log('%c some text...', ) It lets us style the first argument using css with '%c' 5. Warning console.warn() Prints out to the console with a yellow exclamation icon before it. 6. Error console.error() Prints out to the console with a red X icon before it. 7. Testing console.assert(, ) If is false, will be output to the console. 8. Clearing console.clear(); Clears the console. 9. Viewing DOM elements (1) console.log() Prints out the to the console along with its attributes and content. 10. Viewing DOM elements (2) console.dir() Prints out a drop-down list of properties and methods in . 11. Groups console.group() console.groupEnd() Prints out a drop-down which groups a set of console.logs together. must be the same to start and end the drop-down list. console.groupCollapsed() 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() Appends the number of times has been printed out. 13. Timing console.time() console.timeEnd() Prints out how much time passed between time and timeEnd. must be the same. 14. Table console.table() Prints out a table of the objects' properties and values.
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 :)
I came to learn that remembering stuff as such is useless and energy consuming, I'd rather try to remember that these exist, and if I decide I might need them, I would look in docs. By using them more often, I'll automatically remember it and will no longer need docs as reference. This is actually general approach towards all things, and then learning becomes faster, and we will eventually forget stuff like this, but reference stays in our heads, and we know these exist, just need to remind ourselves after long time without using it.
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?
I would love to know how you are getting your colors to be highlighted, for example the red on line 27 at 3:04. I am using atom and can get this to work '#BADA55'; on line 16 with a package, but not 'red' on line 27.
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()
Prints out to the console.
3. Interpolated
console.log('Hello I am a %s string', )
Behaves like the printf() function of the C language.
4. Styled
console.log('%c some text...', )
It lets us style the first argument using css with '%c'
5. Warning
console.warn()
Prints out to the console with a yellow exclamation icon before it.
6. Error
console.error()
Prints out to the console with a red X icon before it.
7. Testing
console.assert(, )
If is false, will be output to the console.
8. Clearing
console.clear();
Clears the console.
9. Viewing DOM elements (1)
console.log()
Prints out the to the console along with its attributes and content.
10. Viewing DOM elements (2)
console.dir()
Prints out a drop-down list of properties and methods in .
11. Groups
console.group()
console.groupEnd()
Prints out a drop-down which groups a set of console.logs together. must be the same to start and end the drop-down list.
console.groupCollapsed()
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()
Appends the number of times has been printed out.
13. Timing
console.time()
console.timeEnd()
Prints out how much time passed between time and timeEnd. must be the same.
14. Table
console.table()
Prints out a table of the objects' properties and values.
Thanks!
Thanks man
Odin Project sent me here
me at 2021
@@MehammedTeshome im with you bra
Lets do it guys i'm doing it too!
@@MehammedTeshome Let's go Bro
Odin Project helped me to find this useful video, too!
I found out about your channel on The Odin Project. This is awesome and really funny! Thanks :D
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 :)
I came to learn that remembering stuff as such is useless and energy consuming, I'd rather try to remember that these exist, and if I decide I might need them, I would look in docs. By using them more often, I'll automatically remember it and will no longer need docs as reference. This is actually general approach towards all things, and then learning becomes faster, and we will eventually forget stuff like this, but reference stays in our heads, and we know these exist, just need to remind ourselves after long time without using it.
Finally a JavaScript video with good intro music!! :)
Great video!! First thing i did after watching this video "open console -> console.log(console);"
#TheOdinProject
Idk why I need to style a console log but okay... the rest is good. Thanks for the vid, gave it a thumbs up
same reason you might put console.clear in your script =)
Oh God how did I live without these...
Great, now I know how facebook put his 'Stop' message in console.
Wow !!!!!!! The green color is so Badass
Thanks man, 2023 and still useful
console.table()
I already love JS, but you just made it infinitely more fun :-)
The grouping one is really slick😎
Woah. This is awesome.
Great video! Keep it up!
the console.error('shit') came rally handy.
That was a really good video, subbed.
I'm just here to say I love your IDE fonts
Awesome, never seen these ticks elsewehere !
NICE Video! So useful for me
Awesome! Lot of neat tricks here thanks!
Thanks a lot for these helpful tips!!
very nice and rare tutorial
I like how the hexcode of the color green is #badass 😁
Attribute Modifications
a lot to learn, my head hurts now
Pretty awesome video!!! Thanks for sharing that with us!
Thanks!
Wow, dude what is the name of the font in your js code ? It looks cool
similar to console.dir(p) , is posible to see all property css in a specific element ?, for example ?
Really useful, thanks!
Great info.. Thanks Wes.
beautiful! thanks a lot!
good stuff here!
That intro song sounded like It's Dangerous Business by Underoath
Awesome Man..
Hi Wes, how did you write es6 in browser? I mean in script tag above closing body tag.
Hey Wes!
Very nice tricks.
A little question...how did you let your cursor pointer yellow?
Thank you!
Gracias por estos tips :D
What font is that?
Operator Mono
Please do video about chrome dev tools! About debugging with network with react
loved it
Cool!
Pretty informative and nice. Anyone has a cheatsheet of what is shown in the video? Or a write-up.
Thanks. keep Making more 😂
what was the intro music? hehe
is it really 'must know'? hahaha. really really cool regardless.
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?
Whats thd point of using console? Its not like its gonna be printed in the document
from the odin project in May,2024.
how did you get your "Ls" to look like that?
#BADA55 😂!
Dog was not defined .How it woprked?
I would love to know how you are getting your colors to be highlighted, for example the red on line 27 at 3:04.
I am using atom and can get this to work '#BADA55'; on line 16 with a package, but not 'red' on line 27.
Paul Rail BaDaA55
Paul Rail @Metalo @attlassistcre 17พ.ค 2016 metal On lee
Hmu if you wanna smoke buds sometime
How can I download developer loops f12? Please tell me
how remove new tab
using console.clear at the bottom is evil
The most emo intro on RUclips
i need this file, plz attach it , SAP
I don't understand the operator mono hype xD
Mr Semmler, join us!
nooo >_< I don't have the coin :D
What is the name of the font you have used in the code ?
Sorry already answered ... :-)
Operator Mono is my new goto font now
W0w
all you should know about `console` (shorter and better)
developers.google.com/web/tools/chrome-devtools/console/console-reference
Test
console.clear() => LOL
thats stupid it not developer tools
zephanj666 it's what so? Pancake? 🥞
Rip to the little 'i' in Chrome's console.info()