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

Question

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 ted

Answer 1

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

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

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).

2. Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:

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

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

4. Edit your changes to the file.

5. Save the file.

Magic! Your local file was modified!

I LOVE Chrome!

Cheers