In this post, we'll go through how to design in the browser with minimal friction, by mapping DevTools to your local disk. I also cover some bells and whistles, where you’ll see that DevTools is close to an IDE when it comes to CSS—actually, better since it has contextual awareness. NB To keep the video short, I've included some extra thoughts in the text that are not in the video.
I'm writing this post mostly because I think there is a perceptual misunderstanding when it comes to designing in the browser—typically that it's slow and awkward.
How to “Live Design” In the Browser
These instructions are for Chrome, but the process should be very similar for any other Chromium-based browser like Microsoft Edge.
Open up DevTools on a local version of your site. A quick way to do this is by right-clicking anywhere on the page and selecting 'inspect'.
Press the keyboard shortcut
shift + ?to open up the DevTools preferences.
Workspacefrom the left column, then select
Add folder, then choose your site. At this point, I tend to dig a bit deeper and specifically select the folder where my CSS is housed since I don't want any other file results flagging up in DevTools. DevTools will ask your permission to map the folder at the top of the window; select
That's kind of it! At this point when you look at the styles tab in the Elements pane, you'll see a load of green dots associated with the CSS files—this means that the file is successfully mapped.
Any changes you make in DevTools from now on will be automatically saved to disk.
NB you can also use a feature called local overrides to save HTML changes.
Advantages of This Workflow
Preview as you type—No need to hit
cmd + sto actually see live changes—DevTools updates the preview realtime.
Inspect and edit in one sweep—Inspect, then click directly through to the line in the source. This is much easier and faster than remembering the line number, then looking it up in a text editor.
Feature Parity with Text Editors
Every developer loves their certain text editor for certain keyboard shortcuts or helpers. For CSS, however, DevTools should be a pretty comparable experience. Here are some of my favourite things.
Context-sensitive autocomplete—DevTools will show you values that are context-sensitive, e.g. if you type
dispay:it'll suggest display values.
General autocomplete—You'll also be shown autocomplete when typing pretty much anything that is also in the same file like variables or properties.
Keyboard shortcuts—there are some excellent shortcuts available. When in the Elements tab hit
shift + ?then select
shortcutson the left to view them all. Some of my favourites are:
alt + up/downto increment and decrement value – You can also use the shift modifier to increase/decrease by 10.
cmd + pto go to another file in your mapped folder. Comparable to VS Code and Sublime Text's Go To File command.
cmd + shift + pto open a command. Here you can search for lots of things such as emulating print-media or a dark mode preference.
Source Diff—If you're reading this at some time in the future this may be somewhere else, but for now, you can find this by going to the elements pane, pressing
shift + ?to get to the preferences, then select
Advantages of Designing In the Browser Vs Using A More Visual tool
Render differences—Remember that text (and even colour) renders differently in the browser vs what you may see in a graphics application.
Version control—If you use Git designing in "code" is incredibly useful since you get a version control system built into your design.
Design System—CSS custom properties—or CSS variables as they're commonly referred to—ensure your design system is consistent. For example, I predefine spacing values and use them consistently throughout a website. I know you could argue that something like Adobe XD could give you this, but remember—so does CSS!