I have noticed that web essentials for visual studio creates a .css.map file when compiling less. Does this mean it is possible to navigate from a selector in the css file back to the selector in the associated less file? If so how?
Yes, the idea of source maps is to map code or css from a compressed file back to the original uncompressed version.
Here is a good guide to using source maps in Chrome and Firefox.
An introduction to source maps
In VS 2013, if you enable LESS preview window, you can leverage Go To Definition command on a selector in preview to highlight the corresponding selector in LESS source. (via right-click context menu or press F12 in preview window -- see #809). When applicable, it will also load the #imported document, where the source is available.
On that note, there are precession issues with libsass' source-map. For that matter, it doesn't work well in SCSS editor.
Related
I watched a youtube video about Blazor and noticed that my color highlighting of my code in the texteditor was different from the video. In the video much more codebits had different colors then it is the case in my Visual Studio 2019 setup.
My code has some coloring but its alot of white lines instead of every codebit differend colorsetting (Class/Function/Parameter/...).
Please see the attached jpeg!
How can I also have those color settings from the video (jpeg left side is what I want // right side is what I have) in my VS? Is that a "plugin" to download or where can I find the settings for that?
In VS I checked Tools-Options- and then tried different dropdown menues but could not find the place for these settings (kind of lost because there are so much options)!
Thanks for helping me to get more colors in my code/life :)
Don't know if that is totaly the same thing I saw but it it close to what I wanted.
You can install a Extension to VS via Marketplace. I installed this:
Enhanced Syntax Highlighting
From Stanislav Kuzmich
Does Sublime Text support live editing of files?
I'm looking for a better workflow. I really like Sublime Text, but recently I've been spoiled by the "Live Editing" capabilites of tools like Codepen.io and (recently tested) Adobe Brackets. When I go back to Sublime, even Live Reload seems clunky in comparision.
Live Reload: Press Save To Preview..
I'm using the LiveReload Chrome plugin, and depending on the project (Ruby or JS) I'll use Guard or Grunt to watch system files. I like LiveReload. But having to press 'save' on a file to see its changes in the browser is driving me nuts. Even with CSS style injection (no full browser reload), I'm flying blind in comparision to Codepen and Brackets which have instant updates as you type.
Other Tools
** GUI Tools **: I've heard of tools like Codekit and Hammer. Please correct me if I'm wrong, but they seem to do exactly what Gaurd and Grunt do—except no command line.
** Chome Tools Spaces **: The ability to edit Sass in the browser is cool. I've set this up, but I rarely use it. Editing HTML/CSS/Sass in Sublime Text is superior to Chrome Tools in every way. And to that point, it is far superior to Adobe Brackets which is why I don't (at this point) considering using it (Also it seems most of Brackets 'cool features' work on vanilla CSS, and not on Sass).
**Live Style: I've tried this, and I just can't get it to work.
I must have Googled "Live editing Sublime", "Live Refresh Codepen Sublime Text", etc.. a thousand times this year and results have been pretty lousy.
If anyone has any gems of information regard this to add to this PLEASE POST THEM!
Yes it does, all you need is takana: https://github.com/mechio/takana
This tool creates a little server which interacts in live the the loaded css of the page. All you need is to setup the server and add the javascript snippet to your html code (you will obviously remove it afterwards…).
For now only OSX, live editing is even working on different browsers. Welcome to the awesome!
With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
I remember reading once that there was a way to embed an image into a code file (e.g. a screenshot or diagram) in Visual Studio, but now I can't find any reference to that feature.
Is this possible to do, or am I imagining things?
EDIT: I don't mean embed the image in the executable, for use at runtime. I mean link or embed it literally in the code, for use by developers.
There is a plug-in for VS 2010 that can do this:
Plug-in
There is also a plugin for VS2012 and VS2013. At this moment installing for VS2013 does not seem to work for me though.
ImageComments extension on GitHub
You can embed images in your binary through the use of the ImageList control, which is typically used to store small icons for list controls, gridviews, etc., but could also be used for storing really any image for any purpose. A better solution would be to include a resource file and store your images there.
Is there a way to beautify JavaScript and CSS in Firebug?
I'd like to be able to view formatted JavaScript code instead of the compressed version :).
There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.
Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.
https://addons.mozilla.org/en-US/firefox/addon/247565/
CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.
JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .
However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)
Firefox Developer Tools has:
"Prettify Source" button: braces {} icon on bottom left
"Auto Prettify Minified Sources" setting: turns Prettify Source on by default.
To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.
Tested on Firefox 42.