Build better sites faster with Chrome DevTools

The ultimate goal of Chrome DevTools is to help you build better sites, or build sites faster, or maybe even both. If you've never used DevTools before, this talk will show you some core DevTools workflows, like debugging CSS and JavaScript, simulating mobile devices, and analyzing page load performance. If you use DevTools every day, we'll cover a lot of new and hidden features along the way that you may not know about. So hopefully there'll be something for everyone.
About the speaker
Kayce Basques (@kaycebasques) writes the Chrome DevTools docs, makes DevTools videos, and does community outreach to find out how to make DevTools more useful.

[@austinmigchelbrink4938]

Here from Odin Project. Happy web devving all! :)

[@codedevrob9853]

How is it going after 6 months? Been at it for about a month now and half-way through fundamentals.

[@unknownguywholovespizza]

@@codedevrob9853 it's ok bud take your time like me and don't hurry to finish it! Happy Coding!

[@IrizarryBrandon]

@@codedevrob9853 Same. Interesting that I've come across someone else whose pace has corroborated my own.

[@avenumadhav3568]

Inspect: 1:21 2:38 3:37
placement of dev tools: 1:44 2:03 2:23
inspect mode: 3:43 5:33
search ui: 3:59 4:36(xpath)
console: 5:07
animations: 6:13 8:00(rendering)
autocompleting by value: 9:55
screenshots: 15:55

[@Fuckingcoward]

Good luck to everyone on their Odin Project Coding Journey, consistency is key! doesn't matter when you started or how difficult it is, stick to it long enough and you shall succeed.

[@austins.219]

How many odins made it this far? I wonder what is the percentage that most people give up at.

[@IrizarryBrandon]

Well, I'm still here, so there.

[@amrit2057]

From odin Project, Best of luck all of you.

[@souj8731]

shoutout to my fellow odinites who are teaching themselves web dev! this shit is hard but exciting at the same time!

[@user-li5wk2yq4b]

BUT
TEN

[@jesseliverless9811]

The Odin Project brought me here. I'm overwhelmed by the gazillion tips presented here, I wanna go back to my "hello word" template :D

[@joeymangs]

for real lol. only gonna get crazier from here. How far along are you now?

[@jesseliverless9811]

@@joeymangs I'm finalizing the last project of the course (a social media app), and soon gonna be ready to host it & start working on my cv & applications. Fingers crossed.

[@Ahmed_Dorgham1]

Hey jesseliverless, did you find a job now?
@@jesseliverless9811

[@alveek]

That was very useful, thank you!

[@PRALAY.THAKUR]

IIT m bsc vala kon kon hai

[@Mike-og4wc]

Thanks a lot for the video! The part about debugging CSS animations was especially useful for me

[@itsnotmeits]

He sounds like he's gonna cry all of a sudden.

[@stephanmaier7171]

Hello, I really like this speech. Is it possible to share the linke to the breakpoints guide?

[@JohnnyFive]

Fantastic deep dive into google dev tools. Gracias!

[@EpicMargo]

he says button funny

[@carlajeanpicolados9019]

I took two months to learn Adobe After Effects and Premier Pro. Now I am learning soft soft to make soft so I can have more verity

[@mansoor8228]

Haha

[@captainobvious7898]

Video references a web page that is not available, so it is impossible to follow along and perform the actions yourself, which would aid learning.

[@robertsterenchak8431]

Wow learning javascript now with some experience with java from school and I'd say this tool is pretty incredible. It's awesome see how much is put into allowing developers to make the best all around websites

[@lisasievers6999]

Thank you so much - great vid about chrome tools that is specific and quick. Sadly many bootcamps do not even show something like this which is very easy to follow, review the things we needed to know! Great job @kaycebasques

[@TheLuckyyy13]

Man, chrome's dev tools really is a boss

[@clayjeansen5502]

#TOP

[@MarimuthuP]

Nice video; but poor audio quality. Please consider improving audio.

[@joeymangs]

Here from The Odin Project. halfway through this video i realized i gotta stop smoking weed or I'm not going to understand any of this.

[@rashid_ali]

Here from the Odin Project. A very helpful video. Thank you Kayce!

[@Peakydriver]

Wow!! It's very helpful and interesting

[@carlosrangel4500]

I came to this talk through Odin Project :)

[@bachbui3645]

may ngao a

[@sus6788]

Me too

[@sus6788]

Did you finish the curriculum by now?

[@ינוןאלבז-כ1ז]

I look for tutorial like this a lot, thank you very much for this video

[@fAndrey99sFeofanov99]

very good tool, i never think about that tool for html 5 and build web

[@saurabhsingh-sy4oh]

This was very helpful

[@elsenorpremium7289]

i don't understand nothing after the first 15 minutes

[@charlesnavarro4003]

from odin project

[@defsoul8591]

Came here from the Meta front end Coursera course :)

[@darielescobedo163]

can I found everytNice tutorialng in it ?

[@rajendramohanty8665]

outstanding, Thank you!

[@webdev4786]

I just copied the subscribe button style haha.

[@BrunoSantos-rw6lb]

primo rico tá magrinho

[@angelessabate1378]

Cant find the " >audit " option at the end of the video.. could be because im not from apple?

[@belowasmelashgebremariam]

Kemey ke selam do asmelash

[@envious_irl4023]

this prolly sounds like a really bad question, but is there a way to generate a URL so I can link the website im creating somewhere? im not sure if it was said in the video or just didnt understand it

[@AhLottaAntwan]

Thanks! You made it very easy to follow along with you on most of it!

[@JohnySmith3000]

Such a great intro to Chrome DevTools. The pallete is such a nice yet rerely talked about feature!

[@pedhead]

After you make changes to styles with dev tools, how do you save the changes to use on your live site?

[@andresf5000]

Does anyone have the page used or the github? It would be great to have it to interact with it.

[@vatg2001]

Very low voice

[@javierfonsecainversionesin2067]

It´s working great. Thank you so much for sharing the information

[@mansoor8228]

Thanks

[@belowasmelashgebremariam]

Nice one

[@afif8488]

#TOP

[@ChristianGaudreault]

Je trouves cela assez difficile, car je n'ai jamais travaillé dans ces méthode mais j'ai confiance d'apprendre. Merci à tous ceux qui nous aide. Bye

[@kianberg1568]

Is there a way to open the command menu in firefox? Ctrl+Shift+P opens a private browsing window, and I can't seem to find a different shortcut.

[@chilledxaura]

Use chrome always

[@shawntv7130]

Haha, I can delete my screen shot extension.

[@prasadmadushan]

great content, deserve more views and likes

[@mathematicssolved]

Thanks Kayce.

[@Indemeros]

Thank you for the workshop!

[@survivezeal]

Can this work on mobile?

[@chrisp2639]

Great tutorial, thank you!

[@sabuein]

Thank you very much.

[@kimballle7714]

awesome thanks man!

[@iaroslavakornach]

Amazing! thanks!

[@domaincontroller]

01:00 debugging CSS

[@noelguiavieira]

Great overview!

[@jakoon_the_manic]

ty good video

[@mansoor8228]

Thanks a lot

[@mysticduck7846]

di ste ferovci

[@RoyerAdames]

thank you

[@invisiblehandofadamsmith]

amazing

[@RoyerAdames]

Great talk

[@ctaa03]

I came to this talk though Udacity. Excellent content and presentation. Thank you so very much!!!

[@carlosrangel4500]

I came to this talk through Odin Project :)

[@Hye12112]

Amazing how google manages to make dev tools worse and worse every year

[@xhappybunnyx]

It's very linguistically intriguing how this guy respects all the 'tt' glottal stops--for some reason I grew up ignoring those so I'm used to hearing myself say 'button' as 'buh-en'
More on topic, love this vid and constantly keep coming back to it for little refreshers. Not looking forward to making sense of CSS but will undoubtedly be using the first half of this vid when I eventually do

[@pesto12601]

if you don't pronounce button with "T"'s, then you learned the English language incorrectly and should correct that.... basic elementary school stuff.

[@ConspiracytardHunter420]

play at 1.5 speed because this guy is stuttering every other word