Stop fighting with CSS by taking advantage of these tools

So many people ask me about how I do things like responsive mode, asking me what extension they need for something like that, I thought I'd make a video exploring the 5 devtools I use the most often when writing and debugging my CSS.

00:00 - introduction
1:30 - How to open your devtools
2:05 - Responsive mode
5:25 - Element inspector
7:35 - Edit properties
8:56 - Edit the box model
9:55 - Bezier curve and color editor
11:35 - Personalize your dev tools

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---



---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[JeremyWhiteford]

I prefer FF for the majority of css debugging but Chrome has lighthouse built-in (which is handy for performance, accessibility, seo, etc. Another great tool that can be added to either browser's inspect tools is axe. It helps with accessibility as well and looks like it natively fits within each browser.

FF has the quick identifiers for flex & grid items as well as events, I find those super helpful. Another great FF only item is that if the element has a "display: none" then the DOM will grey out that item in the tree. You can quickly see what the hidden parent element is and not need to search for a hidden declaration.


Both browsers also have the option to view different states. FF has a filter icon that can come in handy for when you have a mess of css to try and figure out as well.

[vladutcornel]

4:09 I'm sure you figured it out by now: There's a button up there in Firefox to "Enable Touch Simulation"

[surreymagpie]

I also find the "Changes" tab in the Firefox Inspector is incredibly helpful. If you want to tweak something in the browser, you can see what properties you have added, edited and taken away and if you are happy, you can then copy and paste it into your editor. Without it, I always forget all the things I've done!

[apsle]

Hey Kevin, you're appreciated sir. Keep up the stellar work.

[terryg]

I have definitely under-utilized the inspector. Thank you! I had no idea of many of these, and I’ve been using Firefox for many years.

[axMfqTI]

There is a toggle-button on the responsive mode options bar at the top in Firefox, it's the most right option, that simulates a touch screen when it's activated. Even pointer media-queries work with it.

[skillzorskillsson]

I do spend a lot of time in the dev tools. Thats pretty much where all my experience comes from. Just inspecting other sites and see how they have made all the cool stuff. But i gotta say i learned some new things from this video that i had no idea about such as that you can move the tabs around in the devtools and also that you can zoom in and óut in the devtools.

[ehsanghasaei]

Keep it op Kewin, I literally love every second of your videos. Awesome!

[dimensionalpotential]

I always add the Web Developer extension for enabling/disabling, managing cookiies, see viewport and form info (and other things), GA Debug for double checking google stuffs, SEE that previews / simulates certain vision problems, and WAVE Evaluation Tool for web accessibly testing.

[chrishely]

Definitely gonna make the switch to Firefox

[briandesign]

this was super helpful! def gonna implement some of these techniques

[johnmclane]

Theres a changes tab in Firefox Devtools which shows changes we made via Devtool.

[abdishakur]

This is very useful features i didn't know existed. Thanks so much Keivin

[loulou]

@Kevin Powell
Bonjour Kévin, dans le dev tool de chrome il y a aussi un outil pour voir le contraste et le régler directement, en cliquant sur l texte de votre bouton, puis au centre du carré dans la partie CSS, pour faire apparaître le color picker, il y a une section "contrast ratio", et grâce a deux lignes vous pouvez modifier les couleurs et choisir le meilleur contraste, c'est assez pratique aussi !! pour qu'il apparaisse il faut cliquer sur le texte du bouton par exemple pour qu'il puisse analyser le contraste avec la couleur du bouton..

[randymurray]

Did you know!, When in google chrome editor the reload/refresh button has new functions when you right click!

[GrantHawkey]

If only Chrome had the same CSS Grid support as FF, then I'd be set. Most other things that FF does are also in Chrome, though not covered in this video. Another handy one in Chrome is the device frames you can turn on in responsive view, combined with the screen shot function, so you can create realistic looking device mockups with any site on the screen. 👍

[fuseteam]

firefor can also simulate touch it's the hand icon in the topbar

[LukeDorny]

Safari does have a device simulator mode, without entering devmode: Cmd+Control+R

[fuseteam]

hey kevin if you add a 0:00 timestamp youtube will segment the video as well

[icxiii]

thanks, i didn't know I could rearrange Chrome Inspector sections :)