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
Add MailTag to your browser (it's free) ➜ goo.gl/qZf5Pj
Thank you MailTag for sponsoring this video
MIZUXE THEME FILES:
www.traversymedia.com/download...
GIST WITH SANDBOX CODE:
gist.github.com/bradtraversy/...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
COURSES & MORE INFO:
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia

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

[@matthewburson2908]

Thank you so much.

[@cole7638]

Thanks for the list

[@randomuser6789]

mvp

[@somaiyaa.8533]

Thanks.. but i noticed that the "Resources" tab is not shown here... is there a way to Show/Hide this tab?

[@kenvng]

Thanks Sam, this help much as well.

[@aaronhughes1759]

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!

[@TH4445]

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.

[@angrynerd4178]

How do you space rows when editing text trying that right now

[@7867meet]

Hey Tom great work. What you are doing is really inspirational. Would love to connect with you some day

[@qtom1160]

@@angrynerd4178 probably too late but it's shift + enter

[@john-r-edge]

Kudos Tom. I normally win the "oldest person in the room" contest - but you are some two years ahead of me. I am fortunate to have a son in his early thirties who works in Tech, so I can always ask him for help.

[@KJProductions34]

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!

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

[@tokomeno9533]

Traversy Media thanks for your videos. Can u make crush course about owl carousel? Thanks again

[@kingsofart1505]

Please look into making Bootstrap 4 + Wordpress Theme Development. I will happily pay for that course and I am sure most of your subscribers would too. Thank you for the brilliant videos.

[@ezeamaka]

please make a sequelize crash course tutorial

[@kevinquinn1918]

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.

[@marcpaters0n]

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

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

[@sivakalyan3121]

Awesome I was expecting for this from a long time from you Brad love you ...getting ready to watch it

[@AlexSheviakov]

Very much appreciated - crystal clear and concise, as always!

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

[@Yodad0110]

Great video Brad, i find your videos are the best on web development topic. Keep it up. I just hit the subscribe button.

[@ericschmidt6129]

Excellent video. Great content. I learned a ton. I'm glad I found this.

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

[@javedapple1]

Nice Tutorial. Before I was using this tool but, I wasn't aware that it has this much features. Great keep it up!!

[@jeffjames15]

Thank you Brad, super clear and organized course.

[@pi5549]

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

[@byronkwashington8950]

20 more hours I need to get it done soon

[@byronkwashington8950]

Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.

[@bruceb9367]

Great job! Great video. Love your pace and tone. Thank you!! Cheers Bruce B.

[@glenn128]

Nice as always Brad! Knew all functions already but the video's are just fun to watch and despite the fact I already knew them I just keep learning from this things.

[@glennbishop831]

you sound like a first class idoit

[@ManontheBroadcast]

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

[@TraversyMedia]

Man-on-the-Run thank you

[@prasadmadushan]

I enjoy all the videos from you. valuable for me every time. thank you sharing your knowledge

[@jdevcast6527]

Really good. I learned a lot about the dev tools, especially the console.

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

[@SajjadKhan-BSK]

Session was just awesome Many thanks BRAD

[@Rafiozoo]

Incrementing hex values works also on arrow up/down. #FFF is the highest, of course ;) It's not useful because of treating as a whole number, not as three channels. Thank you for the course!

[@JoeWong81]

Thank you Brad please keep the helpful vids coming!!

[@dharmadurai.m9218]

when i learn something new i'll see every time your videos you are great TM

[@chiaramariadedominicis458]

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

[@avtarsashia4897]

You are legend...no words for you...thanks a lot to clear my doubts

[@chunnaranong6499]

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

[@shaikmohammedirfan1915]

this is great video man, loved it

[@hakeemajibolu4693]

Great job Brad, thanks !

[@adelevance2105]

Top quality and so useful for beginners! More videos, please :)

[@gowthams8340]

Really Great videos I'm really lucky to found your channel Thank you Brad 😍😍😍😍

[@encapsule2220]

way more helpful than odin project on dev tools. thanks

[@faisalalhoqani6151]

Great demonstration video, dear Brad, keep it up

[@SomethingNick]

Really helpful, the only other thing I would have added is showing how to set breakpoints in the sources

[@dfjama]

Very helpful and easy to understand, thank you Brad

[@nidhijain2205]

Thanks Brad, insightful content!

[@skillzorskillsson8228]

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

[@user-eg5cg3lk3e]

Ctrl+shift+arrow for 100

[@StepFamM3dia]

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!

[@sitaramsharma9968]

.

[@courtneyprescott7328]

Wow! This was very helpful. Good looking out.

[@ga7853]

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.

[@Bol_imla]

Great illustrations...Really enjoyed this lesson

[@mrcat9697]

Thx for your videos man) *GREAT JOB*

[@NadeemGorsi]

Thankx brad it was very helpful

[@RockstahRolln]

Terrific video!! Much needed!! Many Thanks!!

[@julianmdrault9801]

Nice, quick intro. Great job

[@TheKetoSurvivor]

THANK YOU! I'm a newb but especially found the info on the Sources tab to be most helpful to me. Still a bit clunky at it but I'm learning. One thing I noticed, and would love your response to is how to keep the src and href refrences from getting messed up in the saving process?

[@davidpark5188]

thank you mr. Brad; very helpful.! ^^

[@iamviduranishantha]

Thanks Brad , Simple and informative.

[@shlokrana703]

Thank you so much Brad💜

[@motionj]

Thanks, I looked with interest all of this content.

[@catalinastingaciu3602]

Thanks! Really helpful!

[@Aimopotis]

Great Job man as always

[@visualimpactmedia8205]

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.

[@avetma]

Great video, thanks! Btw., "clink that link" made me laugh at 51:15 😁

[@wpcashcow3075]

Your contents are great! Love your videos.

[@samirgunic]

Great tutorial! Thank you!

[@moislav]

Thanks man, you helped a lot

[@Suraj-vn5tm]

thanks Brad nice video !

[@floriansuess7525]

Argh, I just can't get enough of your stuff!

[@okolona1]

Good work. Nice intro to Chrome Dev Tools

[@sunshine8477]

Awesome !!!!! Very helpful. thanks a lot. just two points . Seems like some upgrade has happened in chrome. The Audit tab is now replaced with Lighthouse. And also in the source tab overrides is the option to add code in workspace and edit it through the dev tool. The process is same as shown in the video, just the option has changed . so instead of "add workspace" it is now overrides -> add workspace and so on.

[@pouriakalantari6537]

Thx for your time for this tutorial

[@vaishaldhir8845]

Thank You for making such an Amazing Video :)

[@Diachron]

Great stuff as always.

[@geekyboy7725]

Thx sir for this nice content

[@elazzote]

It's an excellent video, I'm going to subscribe. Thanks

[@vinsonwei1306]

Learned a lot. Thanks!

[@neerajsewani5764]

You are GOD. It is always a delight to watch your videos.

[@ahmady09]

good video and nice overview of chrome dev tools

[@aliizzetmetin6382]

I will be able to help my Uncle with his website thanks to you man!

[@hiteshchoudhary3412]

Hi Brad, can I expect series on designing email?

[@kevinzhang8974]

Thank you very much! Best ever!!!!

[@hart-coded]

Thank you really helpful

[@mohammedelharfaoui]

Excellent! Thanks a lot pro.

[@rtk8134]

Great job!!! thank you!!

[@markspeciale]

Fantastic! Thanks man :)

[@vivekdoss5032]

Good video, thanks man

[@traceygraham414]

I already knew this but love the video

[@ikabulov_eng]

Thanks man for this tutorial hello from 2021

[@pankaj_pundir]

the best Quality content..

[@kcharankumar]

Very good video.. Thank you so much. It was a great help for me. Thank you again!!.

[@WIKIKALI]

Great Crash Course, thanks

[@RalphAlberg]

Excellent video - thank you

[@cx24venezuela]

You Made a great job

[@mohsankayani]

legit ! solutes and thumbs up !

[@adrianteri]

Ripe for an updates @TraversyMedia? Would you be open also to covering Firefox Tools or they aren't as important?

[@khaledbudajaja6137]

Very informative, many thanks

[@squidneyj7097]

This is gold.

[@billspence1799]

Useful. May I suggest console.log([lineno,whatever]) as a practice to provide a useful trace facility. Would be nice to not have to type the line number.

[@omarroa811]

Great tutorial... Thanks Brad!... Can you do a similar tutorial with Firefox DevTools?...

[@carsten-giese]

Is there any option to execute Chrome to run a given Java-function and return that result (into a file or stdout)? I need this in a PS-script at the end.

[@edwards9845]

Hey Brad, any good videos on fixing Lighthouse issues?

[@bhsrotc13]

What tool did you use to record your screen for this video?

[@GoGroomer]

Very helpful😊

[@cervantes01]

Superb video as always, well done!

[@TraversyMedia]

Thank you!

[@eslamal.sheikh5513]

Happy to learn from you. Well done. Good work.

[@angrynerd4178]

How do you space rows when editing text trying that right now

[@ask43242flight]

Can someone tell me where I can find the tutorial to build the Mizuxe webpage shown in this one? Thank you!