Designing in the Browser by Mapping Devtools to Disk

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.

1. 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'.

2. Press the keyboard shortcut shift + ? to open up the DevTools preferences.

3. Select Workspace from 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 Allow

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 + s to 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 shortcuts on the left to view them all. Some of my favourites are:

  • alt + up/down to increment and decrement value – You can also use the shift modifier to increase/decrease by 10.

  • cmd + p to go to another file in your mapped folder. Comparable to VS Code and Sublime Text's Go To File command.

  • cmd + shift + p to 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 Experiments and tick Source Diff

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!