It looks as though LESS debugging has come a decent distance since even a year ago, and I was wondering how many people have experience with debugging using developer tools in Chrome/Canary.
I'm trying to ensure that when I'm debugging a file, the element's CSS shows up as the LESS file, rather than the CSS file. It's of little use to have CSS line numbers show up, when I need to know the requisite line number of the LESS file. I can do this in firefox with firebug and fireless, but it's not working in chrome
I tried to follow the steps here, however it doesn't appear to be functioning for me correctly even after following the instructions carefully.
I'm running OSX, have LESS installed via node.js, and am using the ST2 plugin Less2CSS in order to process the less file on save. Using the command lessc --line-numbers=mediaquery style.less style.css works as expected and writes this to the top of my css file #media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, however when inspecting an element, it's still only catching the CSS file, and not the LESS file.
I have the requisite Chrome preferences turned on (Support for SASS and Enable Source Maps)
Thoughts?
This is now working perfectly fine with less.js 1.5b4 and Chrome 30.0.1599.69
Basically, you need to make sure lessc generates valid source map url at the end of your css file:
/*# sourceMappingURL=/templates/lwks/css/template.css.map */
and that the .css.map file is being loaded by the browser. If this is still for some reason not working for you, in check chrome://flags Enable Developer Tools experiments is on
more details here: https://github.com/less/less.js/issues/1050
Blog post author here...I've gone back and updated my post so it now works with regular Chrome 26. Just checked in Canary and it doesn't seem to work anymore. So Chrome 24 - 26 are good but Canary is busted.
I think that the issues that you refer are not related.
As far as I understand you compile your LESS file on the server side and all you want to do is to retrieve the new css file and not the cached one? Am I right?
Did you tried disable cache on google chrome?
Related
After some update to either Visual Studio (I have the same issue in both VS2019 and VS2022) or Chrome I can no longer update the CSS in DevTools and have it reflect and persist the changes to site.css file in my project. Instead when I try to change a CSS property I get the following in the DevTools console:
Unable to find a stylesheet to update. Updating all local css files.
15:54:01.800 aspnetcore-browser-refresh.js:82
And the green dot disappears from my CSS pane immediately after I hit the up or down arrow on my keyboard to try and change the CSS value.
Why is that? It used to work not too long ago. I think it's been broken for me for half a year or so now.
I've been googling but haven't find any good resources. Or maybe I'm the only one coding directly in Chrome? :) Surely this can't be the case?
If anyone knows a workaround please share because I'm really frustrated atm :)
Disabling "Enable CSS Auto-Sync" seems to do the trick.
Update 1: The above no longer works for me for some reason. I managed to find another fix on SO: https://stackoverflow.com/a/70096917/687549
And here are some screenshots:
Update 2: Update 1 works when you only need to update the CSS directly in Chrome. It's better to have Hot Reload enabled and the set the following setting to None - then you'll get the best of both worlds (Hot Reload + Edit CSS directly in Chrome using workspaces): https://stackoverflow.com/a/68954979/687549
Update 3: I'm now using VSCode. If none of the above works try the following (block .js file in Network tab in Chrome DevTools): https://stackoverflow.com/a/68966524/687549
Not sure how to really categorize this question, but on this page, the file http://d1el287zd12c0j.cloudfront.net/assets/hitgrid-0a8239a14fba0de87431c06cd75774f3.css seems to be completely ignored by browsers. It appears to load successfully and no different than any other css file on the page, but the styles in it are simply not applied to the page.
The content-type, encoding and everything appears to be working as expected. Roughly the same content "applies" fine on my local installation of the app.
I'm at a loss as to what's going on here.
I just check it out and everything went right.
Try to make the filename shorter in the CDN. Large names tend to make error in some way or maybe check if no other stylesheet is interfering with the styles
If that didn't work, answer these questions and Ill try to git it a try again
Which OS are you using?
2. Are you using wordpress?
I googled the heck out of this and could not word my search properly to find the answer. I'm working on a Wordpress site that is letting me edit the stylesheet (style.css) via the Editor, but the changes aren't appearing on the website, the old css is still being shown for some reason. I have cleared my browser cache to no avail.
Anyway....
Using Chrome's dev tools show the old styles are being pulled from things like style.css:90, style.css:400, style.css:9, etc...
What does that mean? Where are those numbers coming from?
Are the numbers the line numbers from your CSS file? As in the code/style declaration on line 90 and line 400 from your style.css file.
I am trying to get my implementation of sourcemaps to work with dotless.
I have pulled dotless and added sourcemap(1)(2) generation to it. The problem is that even though I deliver my css-file with the corresponding
SourceMap : Main.less.map HTTP-Header and
X-SourceMap : Main.less.map HTTP-Header and have at the end of my css file the comment
/*# sourceMappingUrl=Main.less.map */ and
/*# sourceURL=Main.less.map */
chrome canary (Version 27.0.1424.0)
chrome doesn't care at all. It goes without saying, that I have enabled the "Enable source maps"-swtich in the console-settings. The content-types for all files seem to be fine too. (double checked) - For the source-map-location I have tried the full url as well as a relative notation of the address - but nothing seems to work...
Chrome doesn't even request the map file from the server. Any ideas? Did I miss something?
Cheers, Corelgott
Currently CSS source maps in Chrome only support Sass, not LESS. Even this support is behind a "Developer Tools Experiments" flag: (see Addi Osmani's post on the subject for more info).
A Mozilla team is also working on CSS Source maps for Sass, LESS and Stylus, although I don't know how active the project is. You can track their progress here:
https://wiki.mozilla.org/DevTools/Features/CSSSourceMap
We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.
We've tried:
Disabling Javascript in FF
Using Quirks mode rendering by removing the DOCTYPE
Moving from #import for additional CSS to <link>
Switching concatenation on and off
Removing CSS files from the concat, one at a time
Switching the local cache off in Firefox
etc
Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:
Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files
To recreate the problem... use Firefox 3.5.x or 3.6.x, then:
Head on over to: http://my.publisher-subdomain.env.yola.net/
Login with username: 'stack#yola.com' and password: 'stackoverflow'
Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
Click the Account link in the main nav.
The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.
Your help would be greatly appreciated! :)
UPDATE:
The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.
Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.
I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab
the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.
I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.
It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.