14 Must Know Chrome Dev Tools Tricks -

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

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.

[@nirau]

Thanks!

[@supraconstruct4209]

Thanks man

[@agastyakhati4541]

thanks dude

[@katarinazzz]

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

[@danbei2232]

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

[@reuvenkarasik1]

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 :)

[@krunoslavbanovac4356]

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.

[@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

[@bragiodinsen4604]

same reason you might put console.clear in your script =)

[@vikramadityakokil]

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

[@QuietQuest21]

#TheOdinProject

[@the_notorious_guy]

Wow !!!!!!! The green color is so Badass

[@LazyBearHQ]

Thanks man, 2023 and still useful

[@gerardosimpson30]

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

[@bluemarks9871]

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

[@maxstrootmann]

The grouping one is really slick😎

[@KenzoArts]

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

[@JorgeLuisCallalleTorres]

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

[@scribl1]

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

[@boredhuman23]

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

[@hari1983]

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

[@SheriffKoder9]

Awesome, never seen these ticks elsewehere !

[@LearnedJohn]

Here from The Odin Project

[@alex-bh9nl]

how did you get your "Ls" to look like that?

[@logomoniclearning6680]

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

[@gerontocrazia]

console.table()

[@skkitchenstore3085]

That was a really good video, subbed.

[@ThePolaris87]

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

[@user-xs3ic2hi9o]

NICE Video! So useful for me

[@UtkarshBhatt]

What font is that?

[@musiclab5816]

Operator Mono

[@BosEriko]

Woah. This is awesome. Great video! Keep it up!

[@matheusbarone9149]

Hey Wes! Very nice tricks. A little question...how did you let your cursor pointer yellow? Thank you!

[@ParsclickTV]

very nice and rare tutorial

[@midoriyaallmight]

what was the intro music? hehe

[@mackenkie]

Awesome! Lot of neat tricks here thanks!

[@sanjaytk]

Thanks a lot for these helpful tips!!

[@ChocolateTaiyaki]

Whats thd point of using console? Its not like its gonna be printed in the document

[@paulosilva-dm1qb]

Dog was not defined .How it woprked?

[@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?

[@byedwardleung]

a lot to learn, my head hurts now

[@professorkaos62]

That intro song sounded like It's Dangerous Business by Underoath

[@АлексейВоробьёв-щ8ф4ю]

Attribute Modifications

[@Bukosaure]

Pretty informative and nice. Anyone has a cheatsheet of what is shown in the video? Or a write-up.

[@edysegura]

Pretty awesome video!!! Thanks for sharing that with us!

[@VictoriaSH100]

Please do video about chrome dev tools! About debugging with network with react

[@pikarikawulf]

How can I download developer loops f12? Please tell me

[@gangadharkaranapu9062]

Awesome Man..

[@rexromae17]

good stuff here!

[@mubashar14941]

Great info.. Thanks Wes.

[@2c-bee]

Long live Odin!

[@ralves]

Really useful, thanks!

[@zohar10001000]

beautiful! thanks a lot!

[@gastonbuesas2081]

Thanks!

[@NilanjanSiromani88]

What is the name of the font you have used in the code ?

[@NilanjanSiromani88]

Sorry already answered ... :-) Operator Mono is my new goto font now

[@edobrca7585]

how remove new tab

[@karlyufer]

Gracias por estos tips :D

[@vigneshm5044]

Thanks. keep Making more 😂

[@r11sr]

loved it

[@MrAahmadsalah]

i need this file, plz attach it , SAP

[@noahschill1422]

is it really 'must know'? hahaha. really really cool regardless.

[@ymrmn]

Cool!

[@sessonid5082]

Hmu if you wanna smoke buds sometime

[@nobody20022]

from the odin project in May,2024.

[@haibaidzokwomandre1468]

TOP

[@tonkihonks3430]

#BADA55 😂!

[@davidallsopp4030]

using console.clear at the bottom is evil

[@sessonid5082]

The most emo intro on KZbin

[@emberchord]

I don't understand the operator mono hype xD

[@WesBos]

Mr Semmler, join us!

[@emberchord]

nooo >_< I don't have the coin :D

[@Klowdie000]

you are a sick person

[@sabertaz]

all you should know about `console` (shorter and better) developers.google.com/web/tools/chrome-devtools/console/console-reference

[@germanduterte7110]

W0w

[@borsaniasushant1]

console.clear() => LOL

[@sachidanandsingh9324]

Test

[@zephanj6665]

thats stupid it not developer tools

[@kissu_io]

zephanj666 it's what so? Pancake? 🥞

[@wingsonthebus]

Rip to the little 'i' in Chrome's console.info()

[@haibaidzokwomandre1468]

TOP