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:
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?
You can directly edit your css project files from chrome devtools. Follow this steps:
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).
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!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...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.
Related
I'm using the Chrome devtools persistence feature with browser-sync and sass.
I set a Workspace pointing to my scss folder and I can edit scss files from Chrome and have all css files created correctly, applied to browser real-time and saved in hard drive.
However when I select an element on the Elements > Styles tab and make some changes, the changed file is the http://localhost:3000... one so changes are not kept. Then I still have to find the local file in the Sources tab to copy these changes.
I'm not sure if this is the best we can get but if we could either open the local file directly from the Elements > Style tab instead of the http://localhost:3000... file or somehow automatically copy any changes in the http://localhost:3000... file to local file the workflow would be even easier and faster.
Does any one knows how to accomplish that, even using some app/extension?
UPDATE:
From Rohit answer I found that if I turn off css source maps in devtools settings then it is correctly synced, showing the green circle on the Elements > Style and keep my changes, although it still pointing to http://localhost:3000...style.css file.
However then it only changes this file, not the specific partials/*.scss file and if I run sass compiler it overrides the css with the old code.
With the css source maps on Chrome finds my partial scss correctly but doesn't show the green circle so it's not synced and doesn't keep changes.
The problem seems to be with syncing scss files instead of css.
I was trying with a Workspace pointing to my root scss folder, also tried pointing it to the direct parent of the file beeing edited and still not syncing corretly.
This is a shot in the dark but,I beleive if you add the parent folder of the files you are working on from Devtools > Sources Tab > Filesystem tab > Add folder to workspace.
Like so :
Then navigate to your folder, and add reload the page. After reloading if you see green
like so:
It means it is synced and will update without you going to the sources tab.
Adding the root of my project to the Workspace synced scss files correctly. Now when I click an element on the Element > Styles tab, Quick source opens the right file at the right scss rule but doesn't follow my changes in the Element > Styles tab (as it does using pure css) and I still need to copy changes to Quick source or edit there directly, save and wait sass compilation to apply changes on screen.
The workflow is much easier now but I'm not choosing this as the correct anwser because is not "as live as css" yet and maybe someone knows how to do this final step.
PS: browser-sync is not needed in this setup, just something to compile sass and Chrome apply changes automatically.
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one.
Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?
P.S. I'm new to scss/sass/css pre-processor things
You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)
What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/