Ask any front-end developer. In-browser developer tools are the key to speedy development and debugging. Additionally, they’re useful for HTML, Javascript, and many other languages. I’ll focus on the CSS benefits today.
With the right dev tools, you can modify CSS and preview your changes in real-time before you commit them to your CSS file. This shaves time off of swapping applications, uploading, and refreshing. Finally, no more stabbing around in the dark to figure out what will fix your issue! They also allow for pixel-perfect absolute positioning, as you can see exactly where you are moving an element.
Browser Basics
Throughout my time developing, I’ve found that Chrome and Safari are consistently the most accurate for cross-browser compatibility. Across operating systems, Chrome is probably the most popular because Google knows what they are doing.
If you are using Firefox, upgrade to Chrome.
If you’re using Internet Explorer, have you considered that you’re maybe not ready for web development? I joke, but seriously, you need to use a better browser. Later versions have been more W3-compliant, but it’s a tool best saved for compatibility testing.
Consequently, using the right browser can save you a ton of time in your cross-browser testing. A bad browser will leave you struggling to get your code to play nice. Your page will not render correctly in standards-compliant browsers and it’ll increase load time.
Dive in with Developer Tools
Chrome DevTools
To setup DevTools in Chrome, check out the DevTool docs.
If you’ve never done CSS troubleshooting in-browser, Google has set up a great article detailing how to use Chrome DevTools to inspect and edit your pages and styles.
Most importantly, Device Mode is BAE. It’s Chrome’s emulator for mobile and tablet devices. It is always best to compatibility test on an actual device, but Device Mode is a great supplement to standard QC.
Safari Web Inspector
To setup Web Inspector in Safari or iOS, check out the Safari Web Inspector Guide. This article also contains information to help familiarize yourself with the interface.
The main benefit to using Web Inspector is the ability to inspect and adjust elements on an actual iOS device connected to your computer. Sometimes device emulators don’t always show the same issues visible on the actual device. Web Inspector on iOS Safari makes resolving issues on Apple devices easier.
Tips for Speedy CSS with Developer Tools
- Double-click on any code in the elements or styles panel to update HTML or CSS.
- If a style isn’t adjusting through your tools, try applying it to the element’s HTML parent.
- A scroll through the styles panel will show you other CSS impacting an element, in case something is overwriting your change.
- Hover over an HTML element with the inspector cursor or in the code panel. It’ll highlight the element and tell you the size.
- Psuedo-classes (like
:hover) can be toggled on and off through the styles panel, so you can easily style your links and menus. - Impress your friends by sending them screenshots of wacky celebrity tweets that you’ve changed the HTML text on. (Don’t believe everything you see on the internet, kids.)
In conclusion, developer tools are your most important asset for speedy front-end dev. You make the most of your CSS code when you use these tools and do so quickly. If you are trying to learn front-end and don’t use them, you’re just going to give yourself a migraine.
I feel like dev tools are paramount, but you tell me: are there any other CSS tools you can’t live without? Empty your toolbox in the comments below.
2 COMMENTS
I’ve been using Firefox with Firebug, Is there anything specific that you see chrome doing better than firefox?
I’m still learning so switching isn’t a huge deal but I really like how firebug looks. Just trying to do a pro/con between the two. I might just need to play with chrome and see if I can customize the look and feel more.
One of the biggest issues I’ve noticed personally with Firefox is that it offers a less consistent rendering across the other browsers. It has been several years since I have last used it, so maybe it has improved and I’m just ignorant to it.
In the past, I noticed that I would end up writing bulkier CSS code to get the UI to render correctly in Firefox and that specificity would result in rendering issues with other more W3-compliant browsers. I would either have to go back and clean/rewrite a lot of my CSS, or end up including a bunch of hacky
!importanttags on additional CSS to backtrack on some of the overly-specific styles I wrote for Firefox.I find, especially when I use Chrome, that I write lighter CSS and I only end up having to make a few browser-specific tweaks once I get to my cross-browser compatibility checks. Furthermore, once you familiarize yourself with browser prefixes, you’ll notice that it is easiest to directly target IE, Mozilla, and Opera than it is to target Chrome or Safari.