When I use the 'styles' tab of the Google Chrome developer tools, it reports one of my styles as coming from the .scss file. How is this possible - I thought all .scss had to be flattened and read from a .css file:
When you compile your sass into css, you have an option to generate a source map file. At the end of the css file you will find a reference to a map file which will be located in the same folder location as your css, with a .map extension.
This is used by chrome inspector to help development. You can turn it off in chrome inspector or just remove the reference to the source map from the css or remove the option to generate the source map in the first place.
If you just want chrome to show the css and are happy to keep the source map file you can just turn off the option. To turn off the option in Chrome Developer Tools, open up inspector and go to Settings. Look in the Sources category within the Preferences section, and untick "Enable css source maps"
Related
As the above image shows, while inspecting some elements, the Chrome Dev Tool shows it is related with a .scss file, when I click the file, it is empty. I test it with Safari on macOS, it also shows this scss file but when clicked, it correctly shows the content of this scss file. It seems the dev tool is somehow bugged here.
Anyway, my question is, on what condition would Chrome Dev Tools(and the like) shows scss file instead of compiled css file?
You do not have to show the scss file please uncheck Enable CSS source maps checkbox
Step-1:- Please open chrome Developer tools
Step-2:- Press F1 key
Step-3:- uncheck Enable CSS source maps checkbox
That is because a typography.css.map file is present in the same directory as the typography.css file. Chrome recognizes this map file and displays typography.scss instead of typography.css. This also works for mozilla too.
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.
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.
I'm choosing a css pre-processor for some projects, and want to make sure it can be debugged in both Firebug and Chrome inspector (to see the actual lines in .less .scss .styl). Is it currently possible to set up chrome/ff debugging for these 3 pre-processors?
For preprocessors that support CSS source maps, Chrome DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.
To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file (for example, .scss file).
You can read more info at https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
In case anyone else ends up here, to use source maps in Chrome for Sass, you need to use the --sourcemap flag to generate them first!
sass --watch --sourcemap --debug-in sass/screen.scss:screen.css
More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass
The --debug-info flag will set the css up to work with FireSass.
When I load up a CSS file in Eclipse, it splits the source with this annoying preview window with various elements showing how they look in the document. I cannot figure out how to remove this view, and only show the source code.
For those down voting: It clearly states in the about page that questions about "Software development tools" are allowed.
You can change Eclipse's settings to open *.css files with a different editor.
See Eclipse help: Associating editors with file types.