Google Chrome Developer Tools Crash Course

In this video we will be taking an intermediate look at the Google Developer Tools. You will learn how to do things such as...

Inspect & Examine HTML/CSS
Edit HTML/CSS
Enable/Disabled styles
Move & Delete Elements
Console Logs & Other Commands
Special Console Symbols
Examine Network & Resources
Use Snippets
Workspaces & Permanent Changes
View & Remove Browser Storage
Perform Audits

Thank you MailTag for sponsoring this video

MIZUXE THEME FILES:

GIST WITH SANDBOX CODE:

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

COURSES & MORE INFO:

FOLLOW TRAVERSY MEDIA:

[samdavepollard]

Many Thanks, Brad.
Top quality as always.

elements tab: 04:20
console tab: 17:00
sources tab: 30:02
network tab: 33:30
application tab: 40:52
audit tab: 45:45

[TraversyMedia]

The Bootstrap 4 theme files are in the description if you want them to follow along. Don't forget to check out the Udemy course if you are interested in creating it from scratch :) Enjoy the video guys

[TH]

Brad I've been diddling with Web design for years, read a couple of large books, spent hours on w3c site. Seems like the tools to help have fun at my level are appearing thanks to the talent an work of many. Now I found Traversy also to even make it better.
I am a 68 year old non service connected disabled Veteran and Brad I can't tell you how your material helps keep me busy.
Thanks.

[StepFamMdia]

This video is for the ones that "applied to a position I don't know nothing about but I got hired anyways" You're the best!

[marcpatersn]

I'm a total coding noob and this has really opened my eyes to the possibilities with nothing but the browser. Thanks.

[skillzorskillsson]

When you increment pixels in dev tools with up and down arrow you can also hold down Shift to increment by 10 pixels or you can hold ctrl to increment by 0.1 pixels. That is worth keeping in mind :)

[KJProductions]

Hey man - I just wanted to let you know that you do a great job of explaining things and whatever mic you use is dope!

[visualimpactmedia]

Most persons use Dev Tools to rip css styles. The entire video gives you tips on how to find styles but the focus on the css menuse starts at: 11:14 - for your convenience. More tutorials should include a list of anchor links in the description. Spread the news on other channel comments.

[aaronhughes]

Another awesome and informative video Brad! I just started learning about web development about a month ago and can't thank you enough for these in-depth crash courses on so many different topics!

[avigailomichael]

Gosh, you're awesome! What I've learned just 5 minutes in! Even a child would understand you easily. Staying glued to this channel right here.

[chunnaranong]

Am learning WordPress but a number of lessons show 'inspector'. I learnt so much from this video. Thank you.

[chiaramariadedominicis]

I just can't believe it. Now I completely understand what "just in time" means. Thanks A LOT

[pi]

This came a few days after I suggested exactly this tutorial. Wow! Totally made my day, thanks.

[ManontheBroadcast]

Great as always Brad ... thank you! ...

[kenvng]

Thank you. Looking for a good tutorial on this and this seem so legit. A bit old but hopefully not much changed. The website to work on looks the same. Great work sir. Most grateful for your contribution. God Blesses!

[ga]

Thank you so much, you have explained that bootstrap class "navbar-light" does not mean LIGHT COLOR, this misleading use of 'navbar-light' by bootstrap guys was driving me nuts, how to make the navbar background dark but the text white, and when ever I use navbar-light, the text can't be seen on a background navbar, so thank you so much, you are the man.

[sreejanchowdhury]

Part 3 - 17:00 (Console)
1) alert(1) - JS code - Pops up on the screen
2) $_ -> Shows the last returned value
3) Top left button to clear console
4) $0, $1 -> Last selected html (<h1> Devtools Sandbox </h1>

Files
console.log() - testing

[lemueljunior]

Thank you, sir, once again. It helps me a lot and so many other people to have your videos here to save our coding lives haha. Keep it up

[kevinquinn]

This was a great video. Brad is a great teacher. I'm glad I found it. I'm going to look for more of his videos.

[RageBasterd]

wow, i usually only use the inspector and the console. thanks for the tips.
you talk in the end about accessibility and ARIA properties, i would love to see a video about best practices for them.
most coding tutorials usually skip accessibility.