In Chrome Canary (Version 30.0.1570.0 canary) I've set up sass source maps as follows:
DevTools > Settings > General > Enable CSS source maps + Auto-reload generated CSS CHECKED!
DevTools > Settings > Added folder public
My folder structure looks as follows:
public
sass
_buttons.scss
style.scss
css
style.css
index.html (with link href=css/style.css)
In DevTools I can do inspect element and see that a style-rule comes from _buttons.scss. I can click the _buttons.scss and get the DevTools to display the scss source. I can modify the source in devtools and hit cmd+s and it's saved to disk and when switching to sublime, the file has been updated. BUT in Chrome the css is not automatically reloaded. I have to refresh the page manually to reload the css.
Sass version:
$ sass -v
$ Sass 3.3.0.alpha.149 (Bleeding Edge)
I watch with:
$ sass --scss --sourcemap --watch public/sass:public/css
Any body else having problems with the Auto-reload generated CSS in Chrome (Canary) ?
I've also tried Chrome "normal" (20.0...) and same problem there, no auto-reload.
Have you tried using Workspaces? That's what I use and it's working fine for me, and always has. A bunch of things have moved out of experiments recently, so maybe that's why it's not working?
Related
Here in Google docs we read and see that one can edit .scss file contens:
But in real it is not true. I have properly set source maps, but Devtools doesn't show me contents of .scss files.
Here is my source maps are set all right, it shows in which .scss file styles are assigned:
But when I do Ctrl + click on a style I do not get the content of a file:
Why? How to enable behavior they write about? I use Chrome Canary Version 50.0.2653.0 canary (64-bit)
I am using Chrome Dev Tools to work with my LESS generated CSS.
My source maps are working correctly and I can see the name and line number of the source file next to the rule in the Styles pane of the element inspector.
Once I make a change in the inspector, the name/link to the source file disappears. Why is this?
This is frustrating as I have my dev tools set up to edit the source files in Chrome (in the Source pane). After checking the change in the inspector, I want to easily jump to the source file to make the change there.
Update
I am running Chrome on Ubuntu 12.04 in a VM. On my host (Ubuntu 14.04), instead of the link to the file disappearing, it is replaced with the link to the compiled CSS file.
I'm using Chrome and have source maps enabled. Coffeescript is compiling to JS with the sourcemap embedded at the bottom of the .js file. I can see the *.coffee code in the source tab in the developer tools.
When there is an error in the console I would like to be able to click and jump to the coffeescript code. Currently it only jumps to the .js code and there is no way to go to the .coffee code from there.
Is this supported? If so, how can I make it work?
I tried to enable support for sass source mapping in Chromium (v31.0.1606.0) but it seems that there is the "Support for SASS"-option missing in my case.
I followed those instructions:
http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/
Screenshot of my "Experiments"-Window:
see http://i.stack.imgur.com/UhFNp.png
Hint: I also tried it with Google Chrome Canary and Chrome v30 and it didn´t worked either.
This one got me too, after reading a NetTuts article on Developing With Sass and Chrome DevTools. Seems like most articles on the subject are outdated.
Turns out Chrome v30 and later ship with souce maps and SASS support enabled by defualt. In v29 and earlier you have to check the "Support for SASS" box.
Furthermore, according to Google:
"Currently Sass is the only preprocessor that supports CSS source maps..."
So as long as you don't uncheck "Enable CSS Source Maps" in Dev Tools > Settings > General, you can hack away at your scss/sass directly from chrome.
I followed the Google Dev Tools docs and got it working on OSX.8 with Canary 32.0.1664.3. Here are the key points:
Make sure you're using sass 3.3.0alpha
gem install sass -v '>=3.3.0alpha' --pre
Add the --sourcemap flag when you run sass from shell
sass --watch --sourcemap sass/styles.scss:styles.css
Optionally enable "Auto-reload generated CSS" in Dev Tools > Settings > General for real-time goodness.
Here's a screenshot from my machine immediately after following the above steps and firing up a site with Sass.
Sources:
Working with CSS Preprocessors - Chrome DevTools – Google Developers
Developing With Sass and Chrome DevTools | Nettuts+
I have successfully installed both netbeans and the chrome extension for doing html/css/js work. It appears to work for the most part but I've seen some questionable activity that is... "limiting".
Netbeans > Chrome seems like a fragile interaction. In netbeans, I select run file, and the page opens in chrome always in a new window (is that right?). Part of the marketing here is that you're supposed to be able to edit the css without having to constantly go to the browser and reload. But in netbeans, when I go to the tab of the css file (in the same project), the chrome page bombs with the Dead Folder icon and the text "Something went wrong while displaying this webpage".
What's supposed to be the process here? It seems to work in principle, but not in practice.
[update]
I had also had the addon problem that if I did Run Main Project while looking at the css file, it would show the css file as if it were the main html file. After setting chrome as the default browser, this action shows the actual main html file. At that point, making any change to the css file, any typing at all, will bomb the chrome page.
Take a look at this tutorial.
Once you run a page/project in Chrome with NetBeans integration, in NetBeans there is a window CSS Styles and slightly different Navigator (in 7.3). Now in browser you can start Inspect mode (for instance right click on NetBeans logo in omnibar and check "Inspect in NetBeans mode") and then you can for instance click on elements in browser and if you do that, the CSS Styles window in IDE shows all css properties and rules applied to selected element. You can edit CSS from either CSS Styles or by plain old editing of CSS file in NetBeans. In both cases, changes are visible in Chrome without any reload (without even saving the css file). And you can also use JavaScript debugger in NetBeans.
I don't know what do you mean by "chrome page bombs", but page cannot be debugged by 2 "debuggers" at the same time in Chrome - so you can either use NetBeans or Chrome Developer tools.
There are many new features in the upcoming NetBeans 7.4 (you can download 7.4 Beta from netbeans.org). You can try it as well.