Im using SCSS preprocessor (Sass, Compass => SCSS style) with Sublime Text 3 and build system to create css file, it also generates *.map (source-map with original destination of all scss files).
I see too strange behavior.
See screenshot:
(for example: element header and his location is in other file then google chrome showing).
Sometimes google chrome shows up the correct location, see
,but mostly bad.
Source map is here
Any help?
Related
I have to modify a legacy application and I want to quickly figure out what version of Font-Awesome the application is running, so I know which icons are available.
As that application is using complied CSS, I was unable to determine from the page's resources.
I imagine something like a JavaScript command or inserting an icon like fa-version which renders the version number.
You could try the following :
Locate CSS File
locate the use of a fontawesome icon in a page. Using Developper Tool (F12), find which CSS file gives the icon (and font).
In this file, search for a version number in comments (some CSS compiler keeps these comments)
Locate the Font file
in the previously located CSS file, search for the following string :
#font-face{font-family:FontAwesome;src:url(fontawesome....eot)}
Either the font file contains the version number, either you should go deeper.
Look for version in font file
Download the font file (you can guess the URL based on file name and CSS file URL)
Open the file in your favorite text editor and search for Version
We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:
...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({
outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...
Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:
Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.
Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.
I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:
1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code.
i.e we can refer the the exact line which caused our compiled css rule but not edit it
2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.
Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.
For eg: when I change some property in the inspector it is also changed in the css source file.
Initially
Inspector
Source File
After Changing the property
Inspector
Source File
3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.
When I say source files it means files present in the source panel of the chrome and style editor in the firefox
4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )
I'm working with some pre-existing web files for a website, and I see there are files with .hinc ending. The code inside them is HTML, but Sublime Text 2 doesn't seem to recognize it, and doesn't color anything. Also, the code still runs on the website.
.hinc is an included HTML source file in c++. See this link http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2012/n3325.html#style.hinc
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/
After setting up source maps for my scss files, and getting sass debugging up and running for canary, I'm hitting a small but frustrating snag. When I first load or reload the page and inspect an element, I get a reference to the .scss file in the Matched CSS Rules window. screenshot 1.
When I go to switch up the styles, for instance changing the background color, as soon as I'm done making the change, the file path instantly changes to the compiled css file. screenshot 2. Any ideas for why this might be happening?
Indeed, when you modify the CSS, the source mapping between CSS and SCSS is broken, since it is no longer correct. To restore it, you should save the updated SCSS onto disk in the DevTools Sources panel (with sass running in the watch mode) and have DevTools reload your CSS. Then your source mapping will be fine.