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+
Related
I want to use the LiveEdit plugin for debugging my website on PhpStorm. I have configured the plugin in the settings and even downloaded the JetBrains Chrome Extension and applied to Microsoft edge. I have also allowed the extension to read and write and make changes to all and every website. Yet, I don't see LiveEdit working.
I also have applied <all_urls> in extension settings - no progress. What should I do?
This should work for Edge in principle (as new Edge is Chromium-based), fixing WEB-45326 should take care of this.
For now, I'd suggest setting up Edge as a new custom browser in Settings | Tools | Web Browsers:
press + to add a new browser
use Chrome as a Family, specify a full path to browser executable as Path, enter a name
Browser will be available with Chrome icon in run configuration dropdown
even downloaded the JetBrains Chrome Extension and applied to Microsoft edge
Please remove it; Chrome extension doesn't work reliably in new Chrome versions (WEB-37230), and it seems that the most recent Chrome update has introduced breaking changes that made it non-functional. Since PhpStorm 2018.3 this extension is not required for debugging/Live Edit, it's not actively maintained, we plan to sunset it completely in the upcoming release
I need to use "live preview" PhpStorm in Firefox browser but this module cannot be found in PhpStorm.
There is PhpStorm extension for Chrome, but it does not work very well and I'm using just Firefox browser.
Live Edit functionality is only supported in Chrome.
Firefox support can't be expected in the foreseeable future:
to implement the Live Edit functionality, we need to support the Firefox Debugging Protocol from scratch. This requires significant efforts and resources that we are not ready to invest right now. We recommend using tools like Browsersync that we believe provide the great development experience.
How we can enable live sass in devtools?
Base on Umaar post in own blog
https://umaar.com/dev-tips/103-live-sass/
To clarify "Enable CSS Source Maps" only allow your browser to show mappings between scss and css. Live SASS is is still experimental feauture. You'll be able to enable it by pressing SHIFT button six times on the experimental tab in the dev tools settings.
I tried it in latest unstable chrome build on Linux and it doesn't seem to work, so you'll need latest Canary build.
UPDATE:
It works in 53.0.2763.0 dev build on Linux.
Update:
Looking at this again, there appears to be a new experimental feature that is apparently in Chrome Canary, which takes out the need to run sass watch I think. However, I am unable to actually find where this gets enabled. I left my original answer as it may be of use still.
This is no longer an experimental feature. In Settings, make sure 'Enable CSS source maps' is enabled and (optionally) 'Auto-reload generated CSS'.
You can add your source files as a Workspace and live edit:
On a side note, to enable experimental features in Chrome, navigate to chrome://flags/, enable Developer Tools experiments and restart Chrome.
In Settings, you will see a new Experiments section:
I've taken a look at the documentation but it's a little thin on what values are acceptable. Does anyone know if there's a value to open Google Chrome incognito and/or have a complete list (who knows I might want to open a project in IE/Edge one day).
I've tried:
browser: "google chrome -incognito"
browser: "-incognito"
browser: "incognito"
Not many more alternatives, I reckon.
Thanks in advance!
Chrome's command line switch is actually --incognito (two dashes), but I tried it in my browsersync Gulp task and that didn't work.
The workaround I'm using is to use a Chrome extension to switch my development domain name to incognito. It looks like there are a couple extensions that do that, I use Ghost Incognito:
https://chrome.google.com/webstore/detail/ghost-incognito/gedeaafllmnkkgbinfnleblcglamgebg?hl=en-US
in general, I created a shortcut to launch the browser in private mode. then in browser-sync settings added parameter:
browser: 'absolute path to shortcut'
Hurrah!
I have enabled source maps and workspaces in Chrome Canary to be able to edit *.coffee files directly in the browser. Yet the default editor in Chrome does not have syntax highlighting for CoffeeScript files, at least I could not find it. Is there a way or extension to enable that?
This was recently implemented in https://codereview.chromium.org/18341003/