A Beginner's Guide to Chrome Developer Tools | Elements | Console | Network | Performance

The DevTools is an essential tool for any web developer. In this video we check out together the Chrome Dev Tools and some of the things it can do that as a web developer you will use the most. Manipulating DOM elements on the fly, prototyping CSS styles, debugging JavaScript and checking a website's performance are some of things you can do with this amazing tool!

Oh, you want to buy me a coffee? How sweet! ❤️ ☕
Ko-fi supporters get access to exclusive content and are the first to know what's coming! ❤️

Timestamps:
00:00 - Intro
01:10 - Open / Shortcuts
01:45 - Select element on hover
03:15 - Responsive - devices / orientation check
05:00 - DOM manipulation / CSS prototyping
16:00 - The Console
19:20 - Sources Panel - JavaScript debug (Breakpoints)
20:55 - Lighthouse Panel - Performance check
22:45 - The Network Tab - XML Http Requests

Leave your comment and suggestions for next videos!

SUBSCRIBE - Help to spread the love! ❤️️

NOW ON RUMBLE 😎

FOLLOW ME

CHECK IT OUT

[cusematt]

Great vid. Struck a perfect balance between brevity and touching on all the important things you can do. Would say completely ideal for the beginner-intermediate programmer that has had a few exposures to devtools but hasn't seen the full suite of what they can do.

[kamote]

Thank you Bella for this!! You sound so kind and cute at the same time. Keep it up.

[chel-lalasveganmania]

Better than the bootcamp video I had. Thank you

[sumahtrix]

I can just say that IT WAS SUPERB video! <3

[strycinek]

It helped to understand INSPECT panel more. Thx

[SanjuKumar-yexz]

I subscribed your channel. I don't know why. While I have already having some experience in chrome dev tools.😁😁😁😁😁😁

[jeanpierreguittard]

Very helpful. Thank you for taking the time to make the video.

[Davidka]

You are a natural teacher! thank you for this excellent tutorial 🙏
One feedback for you - There was a point when an add (or something like that) poped by mistake and you called yourself - Stupid... this is really not nesessarry at all. No need for that.

[thriver]

Thanks Bella, keep making more videos
I am your subscriber now 😄

[rachamallidorasrivignesh]

Tq bella ur so beatiful and way of explaining is very good interesting, tq.

[renatoaraujo]

Gotta watch all your videos! Very nice!

[verjiniashi]

Great help and cute video!! Thank you!

[ighsight]

Thank you for making this video, it's exactly what I needed. I've learned a bit about the basics of the Chrome Dev Tools, now I want to go deeper into the Network, Memory, and Applications tabs. Can you make a video that does a deep dive into those? And good look on reaching your subscriber goals, I subscribed to get you one step closer to 500.

[FreakAliens]

thank you very much! you're so smart and sweet

[swathimani]

Can you make a video of how to debug deeply and good clarification for it

[youssefel-h]

Thank you for the useful video, I am learning Javascript and I want to learn how to debug my code with Chrome Debugger. Any good tutorial? thanks

[nicksouljah]

You should get yourself a microphone 🎙 !
Great work 👊😊

[riganpatel]

thank you so much this video was very helpful, also can you point out how to find network error http ? i belive its under network tab

[hemasaitej]

How can I get the water fall details in network tab using python programming ?

[yomajo]

Let me get this straight. Your website has ads, that you yourself block?