8

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?

benshabatnoam
  • 7,161
  • 1
  • 31
  • 52
Kevin LeStarge
  • 8,142
  • 4
  • 21
  • 34
  • 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 Nov 26 '18 at 23:05
  • @CertainPerformance good suggestion. I have updated the title of the question. – Kevin LeStarge Nov 27 '18 at 22:08
  • What version of Angular are you using? – Kayce Basques Nov 30 '18 at 00:17
  • @KayceBasques 7.0.0 – Kevin LeStarge Nov 30 '18 at 00:24
  • 2
    DevTools technical writer here. The workflow that [benshabatnoam](https://stackoverflow.com/a/53545851/1669860) posted is the best we've got. Set up a [Workspace](https://developers.google.com/web/tools/chrome-devtools/workspaces/) 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 Dec 03 '18 at 02:21
  • With that said, I didn't investigate what kinds of options Angular offers for generating sourcemaps. You might be able to tinker around with those and find one that helps DevTools resolve changes from the Styles pane to the real source file. – Kayce Basques Dec 03 '18 at 02:22
  • @KevinLeStarge why didn't you correct my answer? – benshabatnoam Dec 05 '18 at 12:29
  • @benshabatnoam correct it in what way? – Kevin LeStarge Dec 06 '18 at 16:29
  • @KevinLeStarge I meant accepting the answer - https://meta.stackexchange.com/a/5235/433331 :D – benshabatnoam Dec 06 '18 at 17:21
  • @benshabatnoam I'll do it just to give a brother some rep points ;) – Kevin LeStarge Dec 06 '18 at 17:30

2 Answers2

9

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

benshabatnoam
  • 7,161
  • 1
  • 31
  • 52
  • In step 3, you navigate into the Sources tab in the Chrome Dev Tools and edit the css file there, which won't show up on the actual component rendered on the DOM until the changes are saved. I want to be able to edit the component's styles from the Elements->Styles tab in the dev tools and have it save from there. Your suggestion won't work in this scenario, will it? – Kevin LeStarge Nov 30 '18 at 00:22
  • 1
    You didn't mentioned this in your question, or maybe I didn't understand the question well. saving from styles tab has 2 more open question in stackoverflow: https://stackoverflow.com/q/53412086/2342414, https://stackoverflow.com/q/47913645/2342414. I'm trying to find a way. – benshabatnoam Nov 30 '18 at 07:29
  • True, I didn't mention that in my question. I'll just follow these other questions you've linked to. Thanks! – Kevin LeStarge Nov 30 '18 at 17:49
  • Found an article from devTools (https://developers.google.com/web/tools/chrome-devtools/workspaces/#top_of_page). From this article it looks like, changes in styles tab should save the local CSS. Could this be a bug? – benshabatnoam Dec 02 '18 at 10:16
  • See [my comment](https://stackoverflow.com/questions/53380234/can-i-edit-my-angular-projects-css-files-directly-from-chrome-devtools#comment94036671_53380234) regarding changes in the Styles pane not getting saved to the source file. – Kayce Basques Dec 03 '18 at 02:23
2

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

Kurtis Jungersen
  • 2,204
  • 1
  • 26
  • 31