How to enable support for sass in chrome - css

I use codekit to compile sass, on the configuration I added "full debug info". I also enambled "support for sass" in the experiments settings on chrome and also enabled source maps.
Still it does not work
I watched a video where Paul Irish talks about this and on this "experiments" tab he enables "sass stylesheet debugging", I dont have that in my tab.
Am I doing something wrong?

You need to activate the experiments. To do so, open chrome://flags/ and activate Developer Tools Experiments.
After restarting Chrome you should have the Experiments tab as well.

In case anyone else ends up here after struggling to make Chrome work with Sass, you need to run a different command to generate source maps via command line: sass --watch --sourcemap sass/styles.scss:styles.css instead of --debug-info.
More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

Related

Atom/Electron developer tools theming

I've recently migrated from using the netbeans IDE to githubs atom. It doesn't have some of the features I need and I cannot find a suitable package, so I am attempting to do it myself. This is also giving me a great insight into how the editor works.
One massive problem though, is the font size in the 'developer tools' window. It is tiny (I'm guessing about 11px). Google has told me that I need to install a css theme, and there are a few out there. There is even a 'dev tools theme' package for atom. But nothing I have tried seems to be applied. Yes, "Allow custom UI themes" has been set. The same themes, however, do work in the chrome browser (ver 60.0).
Can I inspect the inspector within atom, like I can do in chrome? (undock the devtools window and hit CTL SHIFT I again). This will help me discover exactly which classes I need to configure and if they have been applied correctly.
How can I tell which version of chrome/chromium atom is using? It's possible some features have changed after googles 'how to' guides were written.
How do I manually install a devtools theme into atom?
Here is a related question which works in the browser but not in atom.
I don't really like answering my own questions, but I'll post this here for anybody else having problems.
Inspecting the devTools window in atom involves three steps.
Launch atom via electron by running the command electron --remote-debugging-port=9222 /usr/lib/atom. The port can be any valid port number and the paths may differ depending on the OS.
Once atom opens, toggle the developer tools window and undock it.
Open a separate chrome (may also work with chromium) browser and navigate to chrome://inspect. There should be listed 2 or 3 'Remote Target' entries. Clicking inspect will attach the browsers devTools window to atom.
To install a theme, first find a chrome extension, and test it in your browser before adding to atom. Personally, I used Devtools Author which has many built in themes and an easy font-size slider.
To actually install, follow these steps:
Download and extract/build the sources. I placed them in ~/atom/devTools to keep everything together. If using the above package, you will need to install the npm dependencies and run grunt.
Open atom and toggle the developer tools window. In the devTools window check 'Settings -> Experiments -> Allow Custom UI Themes`. Also make sure the built in dark theme is disabled.
In the devTools window click 'console' and enter the command require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme'). If successful, it should print the name of the theme, or undefined if something went wrong.
Relaunch the devTools window to see the theme in action. It will persist when the main window is closed/opened and system reboots.
If using the above theme, it will add an 'Author Settings' tab to devTools from which you can select a theme and font-size.
To remove the theme run require('remote').require('browser-window').removeDevToolsExtension('theme name'). To view theme names run require('remote').require('browser-window').getDevToolsExtensions().
As for my question about the chrome version being used, I didn't figure it out yet.

Webstorm: is it possible to debug a Meteor application directly in Chrome DevTools' console, instead of Webstorm GUI?

As the title says,
I see it is possible to debug a Meteor application in Webstorm but I can't figure out how to do the debug directly on Chrome DevTools
You can debug the client code using Chrome DevTools by just opening Chrome DevTools while viewing localhost:3000.
I'm not aware of a way to use Chrome DevTools for server-side debugging, but you can debug from Chrome via Node Inspector. For details, type meteor help debug and follow the directions.
To get into CDT, mash F12 in the browser window.
Then, you can select the "Sources" tab, followed by the .js file you want to inspect, and at a breakpoint by clicking on the line of code you're currently interested in. e.g., this screamshot shows a breakpoint in a template's "events" section:
As you can see, there are many other tools CDT allows you; poke around, experiment, research, and you will find a wealth of valuable insight.
Besides Chrome, Firefox also has good debugging tools, and probably most other browsers, too, including Microsoft's new Edge browser. AFAIK, they are all invoked via F12.

Sass sourcemap working directly but not working for localhost on Chromium

I am running Debian Wheezy. I am playing with gulp last few days. My problem is that when I point browser to file directly (file:///...) source maps linked correctly like this:
But when I point with localhost/... I get this:
On Iceweasel everything works perfectly. I triple checked all settings, so that part is OK. I thought it might be some security issue, so I chmod recursively project root, but that is not the issue.
This is my folder structure:
This is my gulpfile.js:
I got scss files that look like this:
index.scss
_test.scss
When I run gulp command on root folder I get:
index.css
Can it be some Chromium issue? I tried doing almost everything I could think of. The fact that it's working on Iceweasel makes me think it's specific Chromium problem, but it's so hard to give up. :D
I had experienced the similar issue, especially with BrowserSync.
Version Info:
OS X El Capitan#10.11.12
Google Chrome#47.0.2526.80 (64-bit)
browser-sync#2.9.0
Description
Chrome could not autoload Scss sourcemaps watched by BrowserSync, while Chrome private mode, Chrome Canary, Safari works with Scss sourcemaps correctly whether using BrowserSync or python simple HTTP server command line.
The solution may be specific to my case. I tried Google Web Starter Kit(#0.6.0)'s Service-Worker previously, so I went to chrome://serviceworker-internals and unregistered items listed in that page.
It's done. Soucemaps work as expected again.
Try adding your local folder in chrome workspace. Here is a perfect tutorial on enabling and using workspaces:
http://www.sitepoint.com/using-source-maps-debug-sass-chrome/
Hope it helps.

Is there something like stylus portable?

So... In my school the computers are locked (I can't install software) Is there some way to run stylus (compile my stylus stuff) without installing node previously? Or some portable version of node that let me run stylus like it would in a normal machine? Thanks :)
You can use codepen to compile stylus. If you've got an account just click the settings 'cog' on the CSS tab and choose 'stylus' as your preprocessor. After you put in your code you can click the 'eye' icon to view the compiled output. Run totally in the browser so installation shouldn't be an issue.
You can use http://learnboost.github.io/stylus/try.html without registration and any fee. This site is official, that's why you can use the latest Stylus features there.

CodeKit 2.0.2: Sass source maps not working

I’ve been trying to enable this for the better part of the last few hours…
I enabled the source maps in the project settings in CodeKit.
However, no CSS source map is being generated. I’ve checked the Chrome settings, the source maps option is enabled, as well as the individual switches for CSS and JS under Sources, but it still doesn’t work.
Does anybody know how to activate this?
Thanks.
Source maps aren't currently supported for Compass projects, but will be soon. I'm waiting on the actual release of Compass 1.0.0 (we're still on a pre-release version)
I'm researching the same problem. When I make a dummy set of files new on my desktop, Sourcemaps work fine. When I pull a repository from stash/github it will not generate source maps. So I believe it's a folder permissions error

Resources