Live Preview Error - Chrome 34 removes CSS.getAllStylesheets() command

[fagnercarvalho]

Update from @jasonsanjose

@thany reported in the comments below the behavior with Chrome 34. On further review, Chrome has removed getAllStylesheets() from the API, see rev http://src.chromium.org/viewvc/blink/trunk/Source/devtools/protocol.json?revision=166228.

DevTools: [CSS] remove getAllStylesheets method from protocol

This patch removes getAllStylesheets method from protocol. Instead,
clients should track styleSheetAdded/styleSheetRemoved events to
maintain actual stylesheet set.

Original Report
Using base URL with httpster and github pages or using the default.

Developer console:

Using:
Windows 8 Pro
Brackets Sprint 36

[hyingreborn]

I encountered the same problem

Using:
Mac OSX 10.9.1
Sprint 36

[Den-dp]

I have the same problem as you guys.

Using:
Win 7x64
Brackets Sprint 36
Chrome 34.0.1833.4 canary

[redmunds]

Does anyone have a (hopefully simple) set of files that reproduces this problem?

@Den-dp Try stable Chrome if Canary isn't working

[oslego]

No specific set of files, but on a group of turn-on/turn-off it happens to drop sporadically.
LiveDevelopment seems to hang in status 2: Loading agents.

It's sporadic. Happens without extensions too.

[redmunds]

I played around with Live Preview today, and I found a way to reproduce this problem. The general recip is to create a page with 1 or more stylesheets, but do not link them directly. Create an intermediate stylesheet that includes all of the stylesheets using @import and then link the intermediate stylesheet from the HTML page. Then when editing the intermediate page I get the following error consistently. Note that the "edits" to intermediate page don't need to be anything significant -- just add/remove whitespace.

No style sheet with given id found Object {code: -32000, message: "No style sheet with given id found"} LiveDevelopment.js:480
_onError LiveDevelopment.js:480
x.event.dispatch jquery-2.0.1.min.js:5
y.handle jquery-2.0.1.min.js:5
x.event.trigger jquery-2.0.1.min.js:5
x.fn.extend.triggerHandler jquery-2.0.1.min.js:5
_onMessage Inspector.js:191

Does this sound like it fits the description of what anyone was doing?

Note: I also hit the exception described in pull request #6433 several times, so I'll continue with that one.

[njx]

I think I've gotten this even on the Getting Started project, but I'll pay attention next time to make sure.

(Your case sounds a lot like what's in citrus completed - if you can reliably reproduce your case, it seems like it should be reliable on citrus completed as well?)

[oslego]

I can attest to getting that error in some circumstances, though not with @imported styles.
However, pegging the LivePreview mode, even with no stylesheets, I can get it to hang sporadically.

[redmunds]

Yes, I can also reproduce same recipe in citrus completed site. I make no claim that this is the only way to reproduce problem. But, it's a simple & reproducible case that may help discover & solve the more general problem.

Another case I discovered that generates a lot of nasty looking messages in console is when typing file names in <link href=""> attributes and CSS @import url(); rules. This is understandable since the intermediate strings do not map to file names. These may be additional cases that could be detected and pushing changes to browser be paused until a more stable state is reached.

[Den-dp]

@redmunds Any suggestions how can I tell the Bower to launch Google Chrome instead of Canary? Notice that Google Chrome is default browser in my OS.

[redmunds]

Brackets looks for stable Chrome -- I'm not sure how it's using Canary for you.

If you're on Windows, then read this section of the Troubleshooting Guide which has the Registry key. Otherwise, which OS are you on?

[Den-dp]

Yes I'm using Windows. The problem is that Chrome Canary overwrites this variable whenever the update begins. I found an unresolved bug so it looks like a dead end… https://code.google.com/p/chromium/issues/detail?id=312092

UPDATE: this is being tracked by #7062

[redmunds]

@Den-dp This sound like a separate issue. Please open a new issue to track this.

[thany]

Same problem here. Brackets 36 on Windows 7 x64, Canary 34.0.1848.2.

Error message appears every time, a few seconds after starting live preview, and after hitting F5 in the browser.

Here's a screenshot of the errors caught by the F12 tools:

They are all exactly the same, which is why I expanded the last one only.

[jasonsanjose]

Oh boy. I updated the description at the top of this issue. Chrome removed the getAllStylesheets API in Chrome 34. We'll need to track styleSheetAdded and styleSheetRemoved events instead.

This is a bit unexpected since this command was not tagged hidden: true, so it should have been stable. I see the version number of protocol.json (a.k.a. inspector.json) was bumped to 1.1 recently from our current 1.0.

See correction #6830 (comment)

[jasonsanjose]

@redmunds in case this wasn't on your radar yet. See my updated desc.

[redmunds]

Yikes! Not sure if this needs to be done for Release 37, but setting to High Priority to get this on team's radar.

[njx]

Yikes indeed. We should jump on this ASAP. @jasonsanjose - do those events exist in pre-34 Chrome? Also, could there be a race condition where we might miss one of those events while we're connecting? (I don't remember the live dev code well enough to know.)

Nominating - tagging @jadbox but I'll send email as well.

[njx]

Also...do we have any confidence that these other CSS-domain events/methods will remain?

[jasonsanjose]

The 2 events were introduced here in April 2013 http://src.chromium.org/viewvc/blink/trunk/Source/devtools/protocol.json?r1=148993&r2=148994&. Haven't figured out how to map that to a Chrome release number.

They reference bug https://code.google.com/p/chromium/issues/detail?id=233588.

[njx]

BTW...34 is probably beta now (Canary looks like it's at 35, and I think there was just an update - my stable Chrome is at 33). So this is pretty urgent.

[jasonsanjose]

@njx For this particular case, there should be no race condition. We setup our agents (loadAgents) to listen for events after the interstitial page is ready and before we actually navigate to the target page.

[jasonsanjose]

@fagnercarvalho @Den-dp @thany @hyingreborn If any of you who commented on this bug is comfortable hacking their brackets setup, you can now try the bug fix from master. Instructions are here https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets.

@SAplayer since you did some testing on #6912, would you like to verify and close this issue too?

[oslego]

I still see the issue with Chrome 34, even with #7008 applied to master.

[redmunds]

@oslego Currently, you will see that message once and then it's suppressed, but everything should work correctly.

We're trying to figure out how to determine the version of Chrome being used and suppress it for version >= 34. Otherwise, I think we should just always suppress it.

[fagnercarvalho]

Tested and working fine in Chrome 35.0.1870.2!
Thanks to all involved but especially to @jasonsanjose and @redmunds for solving the issue!

[jasonsanjose]

@redmunds how do you feel about closing this bug and opening a new one to detect the protocol version so that we can avoid attempting to call deleted APIs?

Like I said before, the protocol itself doesn't provide a method to get the version. We would have to start mapping the Chrome userAgent somehow. Or just move to the client side live preview implementation already...

[redmunds]

@jasonsanjose I agree this issue should be closed and a new one created for other issue.

[jasonsanjose]

Closing. Created new issue #7127.

[redmunds]

Actually closing :)

[jonsuther]

I am having trouble with this. Is it supposed to be fixed?

Brackets: sprint 38 experimental build 0.38.0-12606
Chrome: Version 34.0.1847.131

[redmunds]

Sorry for this disconcerting message. Starting with Brackets Sprint 37 and Chrome 34, it indicates that API was not found, but Brackets switches to a different API. So, you can ignore this message.

Are you having any other problems than the message itself?

[jonsuther]

I am not seeing any CSS changes happen. HTML change and even the HMTL/CSS highlights are working, but the CSS changes are not pushing over. Maybe this is a separate issue?

[redmunds]

Make sure that you use File > Open Folder... to select a folder that contains both your HTML and CSS file. Does that fix it?

[jonsuther]

Unfortunately it does not fix it. :(

[redmunds]

Please open a new issue and provide a (simple as possible) example of an HTML page with CSS that illustrates the problem. Thanks.

[jonsuther]

I tried setting up a super simple test with a .html/.css relationship and it worked perfectly.

I went back to my project with the issue and tried (again) reloading without extensions, restarting my machine, etc....no joy.

FINALLY, I decided to try retyping the <link rel="stylesheet" href="css/style.css" /> in the head and it restored the connection! I typed the same exact thing as before, but I guess it just needed a refresh?

Just wanted to have a solution here in case others run across a similar issue. Thanks for your hard work on the project! This is a fantastic tool. :)

[katlis]

Thanks @jonsuther I was having the same problem. Retyping the style sheet location fixed it!

[Skysplit]

I've encountered some problems with CSS.getAllStylesheets when in the document was linked empty CSS sheet. Refreshing live development window never ends then.
After removing link to that stylesheet everything was fine.
I'm looking forward a fix :)

Edit: I've forgotten to metion:
Windows 8.1, Brackets Sprint 37 experimental, Google Chrome 35.0.1916.114 m

[redmunds]

@Skysplit This issue has been closed, and there doesn't seem to be an issue open on the broken link problem. Can you open a new issue with steps on how to reproduce the problem you are seeing?

[Skysplit]

Thank you for response. #7895