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.
Related
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 am working with the developer console in chrome, and while working with the CSS I wonder why there are sass files loaded into the project. I am using the bulma framework and I have included the CSS file which does not have any reference to any sass file that I can see.
However it loads anyway, and it precedes inline styling aswell so its annoying.
Why is the sass files loaded and how do I prevent them from being loaded in the first place, does the browser natively support them?
I tried googling but didnt find a good answer.
ANSWER:
I am guessing it is "load sourcemaps" in the console that is the reason, so I have disabled it now.
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"
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic