Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 692
Kevin LeStarge Avatar asked Nov 19 '18 17:11

Kevin LeStarge


2 Answers

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

like image 72
benshabatnoam Avatar answered Oct 11 '22 13:10

benshabatnoam


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

like image 31
Kurtis Jungersen Avatar answered Oct 11 '22 12:10

Kurtis Jungersen