Can I edit my angular project's CSS files directly from chrome DevTools?

8
votes

What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?

My current workflow involves a lot of tedious copying and pasting from the dev tools like this:

enter image description here

Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.

There's got to be a quicker workflow than what I am currently doing. Any tips?

2
cssangularvisual-studio-codegoogle-chrome-devtoolsangular-cli
I really don't think there is a way to make it work with ViewEncapsulation enabled, of course if you disabled it you could save the changes made on the browser, but that will come with a lot of rethinking and naming every unique component - IvanS95
@CertainPerformance good suggestion. I have updated the title of the question. - Kevin LeStarge
What version of Angular are you using? - Kayce Basques
@KayceBasques 7.0.0 - Kevin LeStarge
DevTools technical writer here. The workflow that benshabatnoam posted is the best we've got. Set up a Workspace and then edit your files from the Sources panel. Editing from Elements panel > Styles pane works on basic projects, but has trouble with frameworks (such as Angular) that use sourcemaps and do a lot of build transformations. Sucks, I know, but I recall that we've looked into it in-depth and our hands are tied until sourcemap usage is standardized. - Kayce Basques

2 Answers

8
votes

You can directly edit your css project files from chrome devtools. Follow this steps:

  1. In angular.json add "extractCss": true like so:

enter image description here

This way you'll see the css files in inspection instead of inner style tags in header (you can see an example image in step 3 below).

  1. Open chrome devtools, Sources tab, Filesystem left tab and add your project folder: enter image description here

This is the magic trick, this will let you edit your local files from devtools!

  1. now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:

enter image description here

  1. Edit your changes to the file.

  2. Save the file.

Magic! Your local file was modified!

I LOVE Chrome!

Cheers

2
votes

...I don't know if this will work with the way Angular and Webpack use emulated component styles.

TL;DR: You can't do this quite in the way you'd like to.

Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.

As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.

So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.