When I make changes on the css inspector it also apply the changes to the css on the sources panel. So I right-click and save the source panel css to a file.
The problem is that once I make this for the first time, google chrome is now autosaving any modification I make on the css inspector.
Is there some way to disable this autosave feature?
I could be wrong but I don't think so (it's very handy afterall). Once you save it the first time, it will auto-refresh until you close that locally saved version. However you can use "Local Modifications..." (right-click CSS in sources) and revert History.
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.
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.
I've been toying around with different CSS styles for a site that I'm running by selecting various things with Chrome's built-in "Developer Tools" and editing them one by one. Now I've landed on an overall style that I'm more or less happy with, but I'm not sure how to save my results! Is there an easy way to save or export all the changes that I've made in Chrome as a big CSS file so that I can apply them to my actual site?
As long as you haven't been sticking them in element.style, yes:
Go to a style you have added. There should be a link saying inspector-stylesheet:
Click on that, and it will open up all the CSS that you have added in the sources panel
Copy and paste it - yay!
If you have been using element.style, you can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.
I am trying to get SASS source maps and the auto reloading/saving to disk to work. I have everything set up with grunt-contrib-sass and watch task to recompile my .scss on changes, and my source maps are working correctly in Chrome in the way that I can edit the SASS and it gets saved to disk. My problem is that when I edit the SASS, the page reloads as if there is no CSS at all. If I then reload the page, my applied changes are indeed there.
Any idea why this happens?
Before sass-change in dev tools:http://cl.ly/image/1R2o2I113H3y
After: http://cl.ly/image/1m0V3b0J420X
I am using Google Canary 33.0.1738.0
Don't know what is causing it but I have found a nice extension as a work around for something like that. I started useing it becuase I didn't want to reload the entire page every time I made a style update. There is an option under css to reload linked style sheets. Web Developer
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/