I am having very unexpected problem on my Google Chrome inspector today. When I was inspecting my local HTML files I noticed I was unable to see from which css file, my classes were coming from. It's very strange because it's always showed it before. Here is the Screen shot
But if I inspect the web form not from Local it shows the files:
Why it's doing this? Is it doing it because of any recent Updates of Google Chrome ? How I can make it work for Local files too ? I need it badly.
Thanks
I just fixed this issue by referencing source maps relative to the workspace root. See my answer here for more information.
I had the same problems as you.
Try to uncheck "Enable CSS source maps" in the "Sources" group of "DevTools settings".
I suppose that one is for SASS/LESS files, but for some reason it affects normal CSS files as well.
This seems to be a bug. See https://crbug.com/422073 to track the progress on this issue and comment there if you have additional information. I am not able to reproduce this problem so far.
Related
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I stumbled across an odd issue in firefox today.
The stylesheet for one of my pages doesn't load in Firefox, although it does on Chrome and Safari. When I open Firefox Developer, I can see this stylesheet. If I open it up in the Style Editor section and make any change (e.g. hit space one time somewhere on the sheet), the css is applied to the page.
Since the stylesheet seems to be loaded up properly after all, anyone know why it's not showing up initially? Probably an obvious solution, but I've been stumped on this for a while. Thanks in advance!
Do a Ctrl+Shift+R on PC or Cmd+Shift+R on Mac. I struggled with this for hours until I found this.
As you mentioned in your comment, the problem is that the stylesheet is being processed as an image.
If you open your firefox console you should probably see a warning.
So what happened is that when you edited it using the StyleEditor, the correct mime type is being fixed.
If your stylesheet is generated from a backend, you need to make sure to set the correct mimetype in the headers.
If that does't solve it, try to "save as" your file and make sure it's being saved with an encoding of UTF-8 and using an IDE or a coding text editor
I came across this thread a few days ago looking to get rid of the stark white background in the DevTools window. One thing led to another and I started in on adding rules for many more elements using the base CSS file (chrome-devtools://devtools/devTools.css) as a guide.
The file being modified can be found in the following locations:
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
Midway through, I started running into a problem when modifying rules with very common selectors. The first two I ran into were #main and #toolbar. When adding rules for the more common selectors, if a web page is also using these same selectors (ie. google search), then the rules are applying to those pages or sites as well.
I understand why this is happening. My question is...
Is there a way to only target the DevTools window in Chrome via this Custom.css file without affecting any other domain?
I've tried using the #moz-document domain () and #moz-document url-prefix ()declarations but can't figure it out...
I'm too far in to give up now, so I'm hoping someone can assist.
Here is a screenshot of my progress so far:
Ok, so after digging around, I noticed I actually missed the notice right smack dab at the top of the original article page:
Since publishing this article the Chrome Team have added a unique ID
to the container of the Chrome Dev Tools. The ID is #-webkit-web-inspector(Trac Reference)
So, the fix to my above post is to add body#-webkit-web-inspector to all of your selectors and it works perfect, thus only targeting chromes DevTools window. Also, very important... to those wanting to create a more complete theme, it’s HIGHLY RECOMMENDED to do it via "inspecting the inspector". More info on how to do this can be found here: How do you inspect the web inspector in chrome?
See screenshot below of "inspecting the inspector":
I developed a website using code igniter, styled it with CSS, locally it works fine but online it looks like css is not loaded it picks up the old css style. I checked the link but it's correct. What gives?
Without more information (such as seeing the site in question), I can't give you a direct answer, but I can give you some pointers.
My suggestion is to use a tool like Firebug (in Firefox) or Chrome's Developer Tools, etc. These tools allow you to see full details of all requests being made by the browser.
(the exact instructions will differ according to the tool you're using, so I'll assume Firebug for simplicity).
Open your page in the browser, with Firebug open, and look at Firebug's "Net" tab (And make sure that the option below the tab is set to "All"). This will list all requests that are made by the browser.
The key thing for you is to look for any 404 errors. Since you say your CSS isn't working, it's a pretty good bet that your stylesheets are failing to load. The 404 errors listed in Firebug will show you why they're failing to load.
If you hover over the filenames, Firebug will expand it to show you the full URL that it attempted to load. This will almost certainly show you that you've got something wrong in your configuration, and it's trying to load the stylesheets (and possibly other files too) from the wrong location. This should show you what's going wrong and give you a enough clues to be able to work out how to fix it.
Hope this helps you solve the problem.
I have a friend that has a really strange issue with my website. When he clicks on http://www.copeo.fr/ the page displays fine but when he clicks on a link like www.copeo.fr/user/ the CSS is not applied even after a refresh. The raw html does display.
I asked him to display the CSS that is hosted on amazon S3 hcopeoressources.s3.amazonaws.com/style/futurvert/style.css and it displays fine.
The code validates on W3C validator so does the CSS. I am lost what could be the origin of the issue. Could it be its enterprise cache? configuration of IE7 on his machine?
If it happens to someone else who could explain the issue to me, I am all hears.
Thanks
Ok got my answer. The firewall blocked the CSS that is stored on amazonaws and for the first page, it was a cache that was filled outside of the company firewall.
Sounds like he is using relative path names. /foo/bar.css will resolve to sitename.com/foo/bar.css but foo/bar.css will resolve to sitename.com/currentpath/foo/bar.css.
There is an IE bug that if you have more than 30 style sheets, some or all of them won't show:
http://support.microsoft.com/kb/262161
It could possibly have something to do with that.
When I hit the CSS URL I got:
"This XML file does not appear to have any style information associated with it. The document tree is shown below"
We use S3 at work for this type of thing and don't have issues, but I think pulling the CSS file off amazon S3 and storing it on a more traditional server might help with your trouble shooting. Or even solve the issue.