Write. Save. Refresh. Edit. Save. Refresh.
Sound familiar? If that’s your CSS workflow, it can be a frustrating experience.
Some tools can ease this, but they usually involve the command line and local development. Neither is always possible or feasible.
What if there was a way to see your CSS changes live in the browser? No command line, no special tools, no need to develop locally.
Well, it’s already here, and it’s been here for a while: browser developer tools.
Using these allows us to quickly make changes to our CSS, see their effect in real-time, then add the changes to our CSS files. A much-neglected method of writing CSS that’s quick and helps to reduce the amount of troubleshooting you need to do.
The screenshots and instructions in this article are from Chromium’s DevTools. This is the developer panel found in any browser that runs on Chromium: Google Chrome, Brave, Opera, Vivaldi and Microsoft Edge (soon).
Firefox’s Developer Tools are excellent, too. Things might have slightly different names and positions, but Firefox allows you to do the same stuff, which is pretty cool.
There are a few ways to fire up DevTools. You can either:
- Right click on any element on the page and select
- Use the shortcut:
[alt] + [cmd] + [c]on Mac, or
[ctrl] + [shift] + [c]on Windows/Linux
- Select Developer Tools from the menu:
View > Developer > Developer Tools
- From the Chromium “Customise and Control” dropdown, select
More Tools > Developer Tools
When you’ve done that, the panel shown below will appear, normally anchored to the right or bottom of the browser.