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.

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

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

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

[@marcpaters0n]

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

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

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

[@chunnaranong6499]

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

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

[@sivakalyan3121]

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

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

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

[@Yodad0110]

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

[@jeffjames15]

Thank you Brad, super clear and organized course.

[@AlexSheviakov]

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

[@chiaramariadedominicis458]

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

[@ericschmidt6129]

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

[@javedapple1]

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

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

[@jdevcast6527]

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

[@ManontheBroadcast]

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

[@TraversyMedia]

Man-on-the-Run thank you

[@bruceb9367]

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

[@SomethingNick]

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

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

.

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

[@adelevance2105]

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

[@JoeWong81]

Thank you Brad please keep the helpful vids coming!!

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

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

[@prasadmadushan]

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

[@dfjama]

Very helpful and easy to understand, thank you Brad

[@gowthams8340]

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

[@SajjadKhan-BSK]

Session was just awesome Many thanks BRAD

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

[@hakeemajibolu4693]

Great job Brad, thanks !

[@iamviduranishantha]

Thanks Brad , Simple and informative.

[@dharmadurai.m9218]

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

[@Bol_imla]

Great illustrations...Really enjoyed this lesson

[@nidhijain2205]

Thanks Brad, insightful content!

[@RockstahRolln]

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

[@courtneyprescott7328]

Wow! This was very helpful. Good looking out.

[@faisalalhoqani6151]

Great demonstration video, dear Brad, keep it up

[@samirgunic]

Great tutorial! Thank you!

[@floriansuess7525]

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

[@avtarsashia4897]

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

[@motionj]

Thanks, I looked with interest all of this content.

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

[@julianmdrault9801]

Nice, quick intro. Great job

[@NadeemGorsi]

Thankx brad it was very helpful

[@aliizzetmetin6382]

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

[@avetma]

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

[@mrcat9697]

Thx for your videos man) *GREAT JOB*

[@catalinastingaciu3602]

Thanks! Really helpful!

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

[@elazzote]

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

[@shaikmohammedirfan1915]

this is great video man, loved it

[@vaishaldhir8845]

Thank You for making such an Amazing Video :)

[@wpcashcow3075]

Your contents are great! Love your videos.

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

[@Aimopotis]

Great Job man as always

[@shlokrana703]

Thank you so much Brad💜

[@Suraj-vn5tm]

thanks Brad nice video !

[@vinsonwei1306]

Learned a lot. Thanks!

[@Diachron]

Great stuff as always.

[@traceygraham414]

I already knew this but love the video

[@hiteshchoudhary3412]

Hi Brad, can I expect series on designing email?

[@cervantes01]

Superb video as always, well done!

[@TraversyMedia]

Thank you!

[@ammarhassan_]

thanks Brad. Anyway you can do the step in. step over? that would be very very helpful.

[@encapsule2220]

way more helpful than odin project on dev tools. thanks

[@eslamal.sheikh5513]

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

[@angrynerd4178]

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

[@markspeciale]

Fantastic! Thanks man :)

[@rtk8134]

Great job!!! thank you!!

[@okolona1]

Good work. Nice intro to Chrome Dev Tools

[@RalphAlberg]

Excellent video - thank you

[@XxAl3X3IxX]

Firefox got some really neat tools too, you should have a look at nightly or beta

[@Another0neTime]

Agreed!!!

[@supreetkumar7604]

its ugly boxy unintuitive UI though

[@ahmady09]

good video and nice overview of chrome dev tools

[@pouriakalantari6537]

Thx for your time for this tutorial

[@neerajsewani5764]

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

[@omarroa811]

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

[@mohammedelharfaoui]

Excellent! Thanks a lot pro.

[@geekyboy7725]

Thx sir for this nice content

[@moislav]

Thanks man, you helped a lot

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

[@WIKIKALI]

Great Crash Course, thanks

[@kevinzhang8974]

Thank you very much! Best ever!!!!

[@hart-coded]

Thank you really helpful

[@kcharankumar]

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

[@edwards9845]

Hey Brad, any good videos on fixing Lighthouse issues?

[@TheArtBeaconTAB]

Thank you for this! Very helpful!

[@hirephpdevelopers3840]

Great. Thank you.

[@khaledbudajaja6137]

Very informative, many thanks

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

[@davidpark5188]

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

[@Floatnride]

great overview

[@mustafakemaltuna]

very useful, thanks

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

[@vivekdoss5032]

Good video, thanks man

[@SuperPizdolizac]

Brad, you're the god of web dev explanations. tnx

[@michaelellis627]

You also missed the throttling feature (Options drop down) on the Network tab where you can change your network speed.

[@Bamblagram]

Thank you for this tutorial. You mentioned around 8:00 that you can add your local workspace to chrome for keeping edits. Do you have a video on this? I think this would be really useful for learning

[@LanguageSkillz]

He ends up doing in Sources, after 30:00 or so. I needed to be in the Filesystems tab, not Pages etc, to right-click access. Maybe you have answers already. He looked to prefer the code editor still with Live Server, or alt Five Server. I've gotten most curious about how most effectively, swiftly apply the Network and other data tabs that follow.