I've been following two articles about how to start editing scss files on chrome canary (not livereload.com)
https://medium.com/#toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0
and this one
https://developer.chrome.com/devtools/docs/css-preprocessors
I added my workspace and the browser is actually reading my file like in the following:
And then when I click into sources i can modify the content like in this picture:
I can change the css here and it's fine and it's updating my scss file from Chrome to file.
The issue
When I go to the elements inspector (first tab on devTools) and I try to change anything on that. The styles.scss becomes automatically styles.css and then I am not able to modify anything on the elements inspector that will change my scss file.
Also when I change anything on my scss file (using sublime text 2). The browser is not reloading my css, so it's not working from file to Chrome.
Are this two thing a bug? Is it mean to work like that?
It is a bit hard to make the model-based editing (in the Elements panel) play well with source-mapped code, since different users may expect different behaviors (moreover, editing a variable-based property value in SASS may assume editing it directly or editing the variable value instead.) Thus, we have not decided on how this should work, and the CSS-SASS link is just broken at the moment of edit (since the CSS no longer corresponds to the SASS source it was generated from.)
Please star https://code.google.com/p/chromium/issues/detail?id=257778 and leave a comment saying what kind of behavior you expect.
Related
I'm on a Mac, macOS High Sierra 10.13.6
Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.
I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.
So to sum it up:
I open Chrome
I load my page locally (a localhost environment)
I open Developer Tools
I pick an element on my page
I click on the name of the resource on the right (a CSS or SCSS file)
I make changes to the source of the CSS/SCSS file file via the sources tab
I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
Chrome updates the styles in the page as it should
I make another change in Sources panel
I save the changes
Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
Chrome does not update the styles in the page. Never again until i reload.
I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.
Can someone point me in the right direction here?
After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain #import on top of the file. But other imports worked.
Why?
The imported file was for fonts. It contained various #font-face definitions. And on the bottom i had two `#import' statements referring to external resources via http.
I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.
I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.
The SASS documentation has this to say:
Plain CSS #imports
Because #import is also defined in CSS, Sass needs a way of compiling plain CSS
#imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.
In other words, i basically wrote a normal CSS #import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.
So to save others time who might stumble upon this: Get rid of your #imports and you'll be good.
The accepted answer of this question contains a good explanation.
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.
When using developer tools in firefox or chrome, after a change has been made to the developer tools stylesheet is there a way to save those changes for later reference when fixing the actual stylesheet?
Simply copy/pasting them would be the easiest thing.
There is no way to actually save changes to a stylesheet directly from the developer console/inspector if that's what you're asking.
In Firefox (they call their version of the tools Web Developer),
to save HTML:
right-click on the outermost element that you changed (or that you want to save), and select
Copy -> Outer HTML. Then paste into a file.
to save CSS changes made on the Inspector tab that you added to the element inline entry, at the top of the cascading styles list:
the best I can suggest is to copy the HTML (see above), paste into a new file, then do a search for style'".
This will highlight/find all inline styles. Some may have already been in the document. The others will be the ones you added. You'll just have to recognize which are which. You will then need to either add them as inline styles to your HTML, php, and js code, or look at the surrounding classes and tags to piece together how to add them to your stylesheet, without breaking anything else.
If you know you'll want to save your styles to put in a stylesheet, this is probably not the recommended place to experiment or edit your css.
Instead, you should edit any of the cascading rules that appear below element inline, or edit local copies of stylesheets directly from the Style Editor tab.
If you edited, or disabled a style from the css cascade list (for a selected element), or edited css from the Styles Editor tab, saving styles is fairly easy.
Switch to the Style Editor tab. The top section is a list of all the stylesheets used to "build" the current webpage.
Any filenames shown in italics contain styles that you modified, added, disabled. To the right of the filename, click Save and you can save the entire modified stylesheet.
Any styles that you disabled (whether they existed in the orig file or not) will be commented out, and it may be preceded by an !.
Unfortunately, if you just want a list of your edits, you have a bit more work to do, since you cannot simply save a list of only the styles you modified. There is no indication in the file you saved that shows which styles were added or modified by you. As a work around, you can download a "file diff" program, to compare two files highlighting the differences between them.
Know that can also edit these local copies of the stylesheets directly, instead of using the Inspector tab, and those changes will appear on the HTML page, just the same as if you had edited a style via the "Inspector" tab. This is handy to know if you want to add a CSS selector combination for an element that did not appear in the cascaded styles shown for that element.
Note, on the Inspector tab, to the right of every cascaded style shown for a selected element, the text to the right of the selector is the name of the file it appears in. If you click on that name, it will switch you over to the Styles Editor tab, and show you the contents of that file. Again you can edit the (local copy) of that file directly. Also, this makes it easy to save a copy of this file, without needing to scroll through the file list to find it.
Note: as a bit of a hack, if you don't want to use a file diffing program, don't have many styles, and you need a list of only the styles you changed, you can use the following process.
For every style you modified in the cascaded list, uncheckmark it (disable it). Now in the css file, it will be commented out, and proceeded by an !, for example:
/*! color:#FFDCFD; */.
Now you can search your saved file for /*! to quickly find your edited styles (and delete everything else). The tedious part is remembering every element to click on, in order to access every style you changed, find it, and disable it. However, it is an option, and a good work around, in a pinch.
Yes, you can, in Chrome at least. Just make the changes by clicking the plus symbol at the top right of the Styles panel of Dev Tools. Then from the drop-down choose 'inspector-stylesheet' and enter your changes.
Now, if you click the link to the right of the styles you make it will take you to the inspector stylesheet in the sources panel. There you will see all your styles. Now just right-click somewhere in that pane and choose 'Save as'. Job done.
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/