Some websites are not displaying the CSS code for the inspector

In my experience, I have always relied on Firefox Inspector to troubleshoot CSS issues without any problems. However, when I attempted to analyze the CSS of a specific webpage (only encountering difficulties while logged in), I noticed that the inspector was not displaying any information for elements on the site:

https://i.sstatic.net/CqqGZ.jpg

Interestingly, the inspector functions properly on other websites. I'm uncertain if the developers purposely concealed the CSS or if there is an underlying issue present. I did observe some peculiar CSS links that appear to be routed through a proxy:

https://i.sstatic.net/xkOsy.jpg

Could this be a new method of hiding CSS code, a glitch within the Firefox Inspector, or something else entirely?

My current browser version is Firefox 45.0.1

css firefox-developer-tools

Answer №1

It seems highly likely that this issue is a known bug that has already been addressed. I do not have an account on this particular website, so I cannot confirm for certain, but we have encountered very similar issues in the recent past.

One potential culprit could be: https://bugzilla.mozilla.org/show_bug.cgi?id=1255787 This bug was fixed in FF48 (involving an inline stylesheet <style> with a sourcemap URL).

Alternatively, it might be: https://bugzilla.mozilla.org/show_bug.cgi?id=1249888 Fixed in FF47 and also backported to FF46 (related to an incorrect CSS sourcemap URL).

You can verify this by testing again with these specific versions. If the problem persists, please consider submitting a new bug report here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector Make sure to include steps to reproduce and any errors shown in the browser console (ctrl+shift+J).

In any case, the current behavior is not intended. On rare occasions where no CSS rules are applicable to a specific element, the panel should display a message like "no valid element selected" or "no css rules found". If the panel remains empty, then there is most likely a bug at play.

Answer №2

While examining my website on the development server in Firefox 49, I noticed a problem with the Style Editor tab. The list appeared to be excessively long and the spinner kept spinning endlessly.

To resolve this issue, I decided to adjust the dev tools settings by disabling "show original sources". This adjustment resulted in only two files displayed in the Style Editor tab, allowing me to view the CSS rules (although not my less rules).

I have already reported this issue under bug number https://bugzilla.mozilla.org/show_bug.cgi?id=1097834

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move the menu button to the right of the title slide, beyond the edge of the card

Having an issue with the MuiCardHeader component. <CardHeader disableTypography avatar={renderAvatar()} action={ <IconButton onClick={toggleMenu}> <img src={MoreIcon} alt=""/> </IconButton ...

javascript css reactjs material-ui

Issues surrounding horizontal scrolling using CSS and HTML

Recently, I've been honing my coding skills by creating websites using HTML and CSS. I came up with an interesting concept for a horizontal scrolling menu. You know the type I'm talking about - where clicking on one item jumps to another in a cyc ...

html css

The functionality of jQuery plugins does not seem to extend to content loaded via Ajax

Hello everyone, I have encountered a frustrating issue. I am currently utilizing bootstrap 2.3 along with some jQuery plugins for form styling and other purposes. However, I've noticed that when I load ajax content, particularly select elements, the ...

jquery css ajax

division of vertical space

Is there a way to ensure that the column containing bbb + ccc is the same height as the aaa and ddd columns? <html><body> <div style="width:500px;height:500px;background-color:yellow"> <div style="float:left;height:100%;background-co ...

css html

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")? let fireball; //global variable fireball = document.createElement("img") //variable on local fireballArray.push(someFunction(fireball, { src: "img.png&qu ...

javascript html css dom styles

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...

javascript html jquery css

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascript css angular jsplumb

Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout? <div class="row"> <div class="col-xs-12 col-lg-3 col-lg-push-9"> navigation & ...

html css twitter-bootstrap

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

css css-selectors

Adhering button for sliding side panel

Check out my JSFiddle HERE to see what I have done. I would really appreciate it if someone could help me figure out how to make the show button float with the sidr panel :) <style type="text/css"> #panel { position: fixed; top: 50%; r ...

javascript jquery html css

Having issues with column offsetting in Bootstrap v4.0.0-beta

While using Bootstrap 4 Beta (Bootstrap v4.0.0-beta), I encountered an issue with offsetting columns. Previously, I used offset-md-* and it worked fine. However, this feature has been removed in BS4 Beta as per the documentation. The new method suggested i ...

css twitter-bootstrap bootstrap-4

Can you tell me which BBC channel is airing this animation?

Is anyone familiar with the animation on the login screen of BBC when entering the day, month, and year? Check it out here: ...

css ajax authentication

Challenges Faced When Implementing Dropdown Navigation Bars

Whenever the screen width is less than 576px, I notice that the menu icon on my website shifts its position along with the title (FOOD, LLC). How can I resolve this issue? Website: ...

html css twitter-bootstrap bootstrap-4 drop-down-menu

Tips for getting flex-end to function properly in IE11

My attempt to implement justify-content: flex-end; for a DIV with hidden overflow content in IE11 was unsuccessful. Despite trying various approaches, I managed to create a basic code snippet that functions properly in Chrome but fails in IE11: .token- ...

html css flexbox internet-explorer-11

Enhance data table by displaying a set number of rows that do not completely fill the table's height

I'm currently attempting to implement a v-data-table with fixed header and footer. However, I've encountered an issue where if I set the table height to be larger than the row height, the table takes on the defined height and the footer ends up b ...

javascript css vue.js vuetify.js vuetify-datatable

Is there a way to determine the location where my website is fetching CSS and media files from?

After implementing Wagtail on my website, I encountered an issue with the CSS and images not being found when the site was put into production. I have already tried running python manage.py collectstatic and ensured that all of my CSS files are located in ...

css python-3.x wagtail

How to implement a scrollbar for tables using Angular

How can I implement a vertical scroll bar only for the table body in my Angular code? I want the scroll bar to exclude the header rows. Since all rows are generated by ng-repeat, I am unsure how to add overflow style specifically for the table body. Here ...

javascript html css angularjs

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

javascript html css reactjs react-transition-group

How can Swipe support help you slide a menu back in?

For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...

javascript css twitter-bootstrap menu

How to precisely navigate to a particular row in a GWT FlexTable

Is it possible to scroll a flextable to a specific selected row? I am attempting to implement functionality where I have two panes, LeftView and RightView. When an item is selected on the RightView, the FlexTable in the LeftView should automatically scrol ...

css gwt scroll flextable

CSSer Q&A