Dev tools not showing styles for inspected element. Styles pane never updates and changes are persisted across page refresh.

[greg.la...@thinksolid.com]

hello. 

The styles pane of dev tools on the `elements` tab is not in sync with what is in the DOM nor does it change things in the dom when I check/uncheck css rules. 

In addition to it being out of sync with the DOM, If I change any css rules in the page, they are persisted across page refresh. 

I have no idea why this is happening but it started yesterday morning. 

I am on this version of Chrome: Version 40.0.2214.94 (64-bit)

[greg.la...@thinksolid.com]

This problem is also true on Chrome Canary, in fact, it crashes the window on canary. See this video: http://screencast.com/t/XJjJ7xHWp4j

I can confirm that there is no memory bleed in my JS.

[greg.la...@thinksolid.com]

Ok, figured it out. Has to do with the scss @extend directive. 

While attempting to write nice semantic html like so: (jade)

.desktop

     .nav-header

            .categories

                .category

Then the SCSS would be (with foundation)

.desktop {

    @extend .row, .show-for-medium-up;

}

What this ends up doing is making insanely long selectors, as shown on this css-tricks post. In the section: 'Watch out for mega output.'

What I assume is happening, trying to keep a bunch of classes out my html to make it nice and readable by using the @extend directive is causing massive CSS output for things like rows and columns. 

Removing this type of thing fixed my problem.

Super bummed as I was jacked when looking at nice readable (only one class per element) html. But such is life. 

Warning to all those whole stumble here. Do not @extend a bootstrap or foundation row.

[Andrey Lushnikov]

Hey Greg,

It would be great if you could file a bug on crbug.com/new and post a link here. Could you also provide us with sample html/css where you experienced the problem?

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/f19d7316-ce7d-4c61-9903-89045cb73142%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[PhistucK]

First, to clarify, cache could only be meaningful (in any situation) if your production site and your live site use the exact same CSS URL (so live.com/css.css is different than production.com/css.css).

Second, if you are not seeing the expected CSS in the Styles pane, but do see its effect on the screen (your page and elements render per the expected CSS), then this is definitely a bug and not a browser caching issue (it might be a Developer Tools caching bug, but I am not sure this caching mechanism exists).

You can search crbug.com for an existing issue and star it. If you cannot find one, file a new issue using the "New issue" link on the same page.

Please, do not add a "+1" or "Me too" or "Confirmed" (or similar) comment. It just wastes the time of Chrome engineers and sends unnecessary e-mails to all of the people who starred the issue.

You can reply with a link to the found or created issue and might get triaged (and fixed) faster.

Thank you.

☆PhistucK

On Sat, Feb 4, 2017 at 3:58 PM, Shawn Kelshaw <shawnk...@gmail.com> wrote:

I see this post is a little old but hoping someone will respond before opening a new thread.

I've recently run into the same issue as described here and thought I might toss in my 2cents... I have a production root and a live root... I do my experimentation and production work in 'production' but when I've put something together that I like, I move all supporting files to my 'live' site, minify the assets (including CSS) and then upload that material to the live Web host. I'm not using dynamically generated CSS or SCSS or anything... just old school CSS...

Question: If I visit the live site (with minified CSS) and the browser caches that minified CSS (1 single line of instructions and all white space removed) if that's not the cause for the missing element styles when I return to production using the dev tools?? Wouldn't the dev tools be looking at the cached version of the CSS file at that point? If I reset dev tools (as described remedy in this post), the styles do return... but on occasion however, if I toggle the device inspector (to view the site at different screen widths), the style sometimes disappear again... any help would be appreciated. Using Chrome version Version 57.0.2987.21 beta (64-bit)

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/d1091bc5-da05-46dc-8cdd-96390e2f98f4%40googlegroups.com.

[Apostolis Tympakianakis]

I'm having this exact issue since last week and I'm also using latest Chrome Beta 57 64bit. 

I was going crazy because I thought it was something in my code but I can't find any issue and Firefox has no similar problem. So it must be a bug in DevTools.

Debugging DevTools I get this error msg: 

inspector.js:919 TypeError: Cannot read property 'sourceURL' of null TypeError: Cannot read property 'sourceURL' of null at SDK.CSSStyleRule.SDK.CSSRule (inspector.js:3776) at SDK.CSSStyleRule (inspector.js:3786) at new SDK.CSSMatchedStyles (inspector.js:3475) at SDK.CSSModel.callback (inspector.js:3656) at callback (inspector.js:3117) at Protocol.InspectorBackend._AgentPrototype.dispatchResponse (inspector.js:3124) at SDK.Target._onMessage (inspector.js:3081) at SDK.MainConnection._dispatchMessage (inspector.js:3257) at Common.Object.dispatchEventToListeners (inspector.js:395) at innerDispatch (inspector.js:919)

innerDispatch

@

inspector.js:919

But this gets me nowhere. "inspector.js" is part of DevTools. I've checked my linked sources and I don't have anything suspicious.

The project I'm working on is in experimental stage and locally accessible so I cannot give a link to someone to reproduce this issue. 

Searching through crbug.com for something similar I cannot seem to find anything.

Shawn, have you found anything worth mentioning? 

On Saturday, February 4, 2017 at 4:10:17 PM UTC+2, Shawn Kelshaw wrote:

I see this post is a little old but hoping someone will respond before opening a new thread.

I've recently run into the same issue as described here and thought I might toss in my 2cents... I have a production root and a live root... I do my experimentation and production work in 'production' but when I've put something together that I like, I move all supporting files to my 'live' site, minify the assets (including CSS) and then upload that material to the live Web host. I'm not using dynamically generated CSS or SCSS or anything... just old school CSS...

Question: If I visit the live site (with minified CSS) and the browser caches that minified CSS (1 single line of instructions and all white space removed) if that's not the cause for the missing element styles when I return to production using the dev tools?? Wouldn't the dev tools be looking at the cached version of the CSS file at that point? If I reset dev tools (as described remedy in this post), the styles do return... but on occasion however, if I toggle the device inspector (to view the site at different screen widths), the style sometimes disappear again... any help would be appreciated. Using Chrome version Version 57.0.2987.21 beta (64-bit)

On Thursday, February 5, 2015 at 2:32:42 PM UTC-5, greg.la...@thinksolid.com wrote:

[PhistucK]

People, if you cannot find an issue, just file one. It would help much more (and to much more people) than posting this here.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/aaa0ac91-f4c7-4563-95b0-59c46d29a4ad%40googlegroups.com.

[Andrey Lushnikov]

This looks very much like crbug.com/681492 which was recently fixed.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/aaa0ac91-f4c7-4563-95b0-59c46d29a4ad%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CABc02_JSPYcayNgr-Lz4DytEVZ3tB7mzpOT0OmBsXt4q%2B2tFDQ%40mail.gmail.com.