Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible.

Specifically in Google Chrome DevTools (last observed in Chrome 86):

Whenever I make changes to the CSS of my HTML page using Inspect Element, and then close the inspector, upon reopening it all the links that should show the filename (e.g. styles.css:1) are now replaced with "constructed stylesheet":

This behavior is unexpected as the stylesheet was not considered constructed or mutable before editing, yet it is treated as such afterwards.

As a result, the stylesheet no longer appears in the "Sources" or "Changes" tab, and clicking on the "constructed stylesheet" link redirects you to an element rather than the actual file. Reloading the page resolves the issue, but at the cost of losing all CSS modifications.

I really don't want to lose my CSS changes, this situation is extremely frustrating! I aim to continue editing on the page without encountering the obstacle of the css file being labeled as a constructed stylesheet!

Any help or insight on how to resolve this problem would be greatly appreciated.

cssgoogle-chromegoogle-chrome-devtoolsinspect-element

Answer №1

Top Solution

Check your HTML or CSS files for any instances of isConstructed or isMutable. According to the Chrome Dev Tools documentation at this link, these headers may be causing the issue you are experiencing.

Remove them and see if that resolves the problem.

Next Best Solution

After reading this informative article, it seems that the issue could also be related to how you are calling CSS elements. For example, try avoiding statements like 

const sheet = new CSSStyleSheet();
or 
const style = document.createElement('style');
.

Answer №2

After dedicating numerous hours to a problem akin to this one, I may have a solution that could potentially save you some valuable time.

In my case, the culprit was the Brave Browser which was blocking the content I needed. Simply allowing all trackers and ads did the trick and resolved the issue.

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

Should the element be scrolled beyond a fixed-positioned element

Is there a way to determine if an element is scrolled behind another element that is fixed at the top? I am looking to trigger some javascript when an element is positioned below a fixed element and every height or scrollTop thereafter. I am attempting t ...

javascriptjquerycsscss-positionsticky

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

csstailwind-css

Troubleshooting: Navbar Hover Effect in Tailwind CSS Not Functioning as Expected

This week, I've been working on building a navbar and it seems like the layout is coming together nicely. However, I've encountered a couple of small issues with the hover effect and the links for the menu items on the left and the logo in the ce ...

cssreactjsnext.jstailwind-css

Is it possible to insert an image as the background of a specific word within a paragraph?

I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...

cssimagetexthighlight

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

Changing the Appearance of the RStudio Editor

I am exploring options to customize an RStudio Editor Theme to personalize the colors. My current setup includes RStudio version 0.99.473 on Windows 10. After reviewing Any way to change colors in Rstudio to something other than default options?, which wa ...

cssthemesrstudioace-editor

IE11 not running Angular code inline as expected

Currently in the process of developing an AngularJS application, I came across a strange issue that I have never encountered before. It may be a simple fix, but I am unsure of the exact terminology to search for the right solution, so I apologize in advanc ...

htmlcssangularjsinternet-explorer

Can the footer be adjusted to be full width only?

Is there a way to stretch only the footer on a blogger simple template to full width without altering other elements? I have looked into similar topics, but they mainly focus on WordPress or involve changing multiple elements, which is not suitable for my ...

htmlcssfooterblogger

django is not able to load staticfiles from the statifiles_dirs directory

I have placed my style.css in the directory appname/static/appname/. In my settings.py, this is what I have: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static/"), ) When I try to load it in my base.html like t ...

pythoncssdjangostylesdjango-staticfiles

SVG with complete coverage of width and height

Here's the challenge: create a full window svg image with aspect distortion without using an SVG tag. Why avoid the SVG tag? Because I plan to replace the SVG later on (possibly frequently) and haven't found a simple way to do so. Previous attem ...

csssvg

The utilization of CSS variables within intricate properties

Imagine having a CSS property called box-shadow: box-shadow: 5px 5px 0 #ccc; What if there is a need to create a variable from the color #ccc? While in SCSS, you could accomplish this with code like: $grey: #ccc; .element { box-shadow: 5px 5px 0 $gre ...

css

What is the process for altering the background color of a modal?

I'm trying to figure out how to change the background color of my modal once it's displayed, similar to this example: https://i.stack.imgur.com/fOUDZ.png. I want the background color to cover the entire page and not just the modal itself. When I ...

htmlcss

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans

Switching background images for DIVs when links are rolled over

Having trouble changing the background image of a div when a user hovers over a link. Any ideas on what might be causing this issue? <style> #divToSwap { background-image: url(black.jpg); height: 150px; width: 150px; } </style> &l ...

javascriptjquerycss

The scrollbar is shifting the page's content towards the left

As a first-time user of Bootstrap, I have encountered an issue while building my website that I cannot seem to solve. Whenever I add large content that requires a scrollbar in the browser, the entire page shifts to the left. In simpler terms, when a scrol ...

htmlcss

Tips for employing 'live CSS' in Rails

As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...

htmlcssruby-on-railsruby

Modifying text size using JavaScript string manipulation

I'm currently experimenting with a countdown script, but I'm struggling to change the size of the numbers displayed. Can anyone help me find where I can adjust the font and font size in this script? var eventdate = new Date("February 20, 2014 11 ...

javascriptjquerycss

Utilizing the smallslider feature through jQuery/JavaScript operations

I've recently embarked on the journey of learning JavaScript/jQuery. I've been attempting to incorporate this cool effect, but unfortunately, I'm facing some difficulties with it: My goal is to understand how to execute this effect using Ja ...

javascriptjqueryhtmlcss

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer <svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;"> <defs> <g id="icon-image"> <path class="path1" d="M0 4v26h32v ...

htmlcsssvg