I'm on a new kick with doing little to no intro to an article, just getting straight to it. I think I'll keep that up...
While this is also possible for Firefox & other browsers, this guide will explain how to save styles directly from the devtools in Chrome.
(Step 1) Open Devtools > Sources > Filesystem
You might wonder how this works with a framework like Angular or Vue since that code goes through a build process. At least with Chrome, this poses absolutely no issue and it's all handled by the source maps. I work mainly in Angular and I use this feature heavily.
(Step 2) Click on "+ Add folder to workspace"
Click on that little section right beneath the "filesystem" tab that says "+ Add folder to workspace". You'll be prompted to navigate your file system and select the project folder that you're working on. I usually select the entire folder (you can navigate to specific files / folders after it's connected) but you can alternatively connect only the files that you're working on (if you have privacy concerns, for example).
(Step 3) Proceed as usual, notice the link
After you've added your project files to the workspace, you'll notice that a little file icon with a green badge appear next to the source file name in the Elements > Styles tab.
Now, you can use the inspector to find elements, isolate the relevant styles, apply your changes to see how they look (just like usual) but THEN you can click the link in the inspector and jump directly to the style definition in your connected workspace.
As far as I know there is not way to directly save a style change from the inspector itself, but not having to hunt down the styles in your editor is really a pretty huge time saver.
Google has a tutorial that walks you through all the benefits of this feature if you want to get more out of it, take a look: https://developers.google.com/web/tools/chrome-devtools/workspaces/
Thanks for reading! If you're currently making a career transition to web / software development, I write more about that topic here: https://swwwitch.dev
Top comments (0)