Live Preview breaks when edit any CSS file (while SCSS compilation running?)

[sergiovilla]

When I open the Live Preview all work fine, live typing, live selection, etc, but when I edit something in any CSS file (in quick edit or in the file itself) the live preview gets off with an unknown error. The console shows this

You must connect to the WebSocket before sending messages. /LiveDevelopment/Inspector/Inspector.js:121

There is no previous errors about connection.

[redmunds]

Which OS and version are you using?

Which version of Brackets? If 1.1, did you enable MultiBrowser mode?

[sergiovilla]

I'm on Mac OS X 10.10 and Brackets 1.1

That error appears with MultiBrowser disabled "livedev.multibrowser": false

I just notice that there is a connection error the first time I open the live preview.

GET http://127.0.0.1:9222/json net::ERR_CONNECTION_REFUSED    /LiveDevelopment/Inspector/Inspector.js:264 
getDebuggableWindows              /LiveDevelopment/Inspector/Inspector.js:264
connectToURL                      /LiveDevelopment/Inspector/Inspector.js:330
_openInterstitialPage             /LiveDevelopment/LiveDevelopment.js:1124
_doLaunchAfterServerReady         /LiveDevelopment/LiveDevelopment.js:1236 
(anonymous function)              /LiveDevelopment/LiveDevelopment.js:1337
j                                 thirdparty.min.js:559
k.fireWith                        thirdparty.min.js:559
e.(anonymous function)            thirdparty.min.js:559
(anonymous function)              thirdparty.min.js:559
j                                 thirdparty.min.js:559
k.fireWith                        thirdparty.min.js:559
e.(anonymous function)            thirdparty.min.js:559
onSuccess                         StaticServer.js:124
(anonymous function)              StaticServer.js:149
j                                 thirdparty.min.js:559
k.fireWith                        thirdparty.min.js:559
NodeConnection._receive           /utils/NodeConnection.js:485

If I type http://127.0.0.1:9222/json on the browser there is no problem, I can see the json without errors

[redmunds]

@sergiovilla How is the stylesheet referenced? There is a known issue with @import.

Try "livedev.multibrowser": true to see if it works any better.

[sergiovilla]

@redmunds It's referenced normally

<link rel="stylesheet" href="css/style.css" type="text/css" />

If I set MultiBrowser to true then the live preview doesn't work at all, the lightning bolt gets stuck at the middle and the console shows this message every time I select any line in the editor.

 NodeSocketTransport - send,,{"method":"Runtime.evaluate","params":{"expression":"_LD.highlightRule(\"[data-brackets-id='16']\")"},"id":2}

[redmunds]

Which version of Chrome? You should be using stable v39.

[sergiovilla]

v39.0.2171.95

I haven't updated chrome and I had no problems with brackets 1.0

[redmunds]

There may be a syntax error in your stylesheet. Otherwise take a look at the Troubleshooting guide.

[sergiovilla]

There is no syntax errors, it happens even with a simple body { margin: 0; }

I tried re-installing brackets, removing type="text/css" Bug #7935, and loading brackets without extensions...

[ingorichter]

@sergiovilla Are you connecting to the internet through a proxy server?

[FunkeDope]

Same issue. CSS and SASS both cause Live Preview to disconnect. Enabling MultiBrowser makes it refuse to even connect at all, same error messages. Tried on Chrome stable, beta, and dev channels. Never had this problem once on Brackets 1.0.

Upon disconnect:
NodeSocketTransport - send,,{"method":"Runtime.evaluate","params":{"expression":"_LD.hideHighlight()"},"id":18}
You must connect to the WebSocket before sending messages.

[nethip]

@sergiovilla Could you try the following steps and see if you are seeing the issue?

1. Switch the current working folder to "Getting Started" folder, from the project tree using the "Open Folder.." option.
2. Select "index.html" from the project tree.
3. Launch Live Preview
4. Click on main.css and make changes to main.css file to see if the changes are getting reflected in the Live preview.

If the live preview is working with the above steps, it is possible that Live preview may not be working with your source files. Is it possible for you to share your source files, so we could try to repro this?

[peterflynn]

@sergiovilla @FunkeDope Can you answer the questions above about:

• Are you using a proxy server?
• Does the same issue happen with the Getting Started sample project? (And if not, could you share the code for a simple project that does show the problem?)

In addition, could you let us know:

• Does the problem still happen if you do Debug > Reload Without Extensions?
• If you go to File > Project Settings, is anything shown int he Base URL field?
• @FunkeDope Just to confirm that your symptoms are exactly the same as the original report -- if you stay in an HTML file, does live editing work correctly? I.e. everything works fine until you switch to a CSS file?

[FunkeDope]

@peterflynn So here is the deal, I did some more research and testing, and I think this is a separate (but related) issue I'm having.
The issue only appears to happen on .SCSS files for me when they start to compile (ex, I hit Ctrl+S, a Grunt Watch task starts making the CSS, and Brackets disconnects instantly.) No proxy, no extensions, fresh Windows 8 install and it still happens.

I'm going to make a test project and see if I can reproduce it with a barebones set up when I have some free time. I will report back with findings.

[peterflynn]

@FunkeDope Ok, thanks! Please file a new, separate bug with details once you've tried with the test project. (We may close this bug if we don't hear any more info about the original report).

[Jordane-L]

Hi, if I'm here it's because I have the same problem for a few weeks.

OS: Mavericks 10.9.5
Brackets: 1.1 and 1.2 (same problem)
Chrome: v.40
Message: "You must connect to the WebSocket before sending messages" when I'm editing css.
Extensions: SCSS
Server: Local with MAMP

I would have to try to remove the tag <style type="text/css"></style> but it is in the core of Drupal... and before that worked well with this project!

When I Create a basic project (index.html + style.css) or open "Getting Started", it works! When I add type="text/css" in the tag it works too.

Edit: I think there is a problem with Brackets SAAS. When I disabled this extension and editing my file.scss there is no crash with livepreview. Ok it don't compile and I don't see css changes but this message don't appear "Live preview was canceled for an unknown reason ({0})" and when I create a basic projet without "scss", it work fine...strange!

[peterflynn]

@FunkeDope So you're using an external Grunt watch tool -- not a Brackets extension -- to compile your SCSS? Just want to check how similar your situation is to @Jordane-L's...

Can both of you try these two tests?

1. Disable your current SCSS->CSS compilation setup (i.e. turn off your Grunt watch task or Reload Without Extensions). With Live Preview running, open the CSS (not SCSS) file in an external tool like Notepad, make a change, and save it. Does Live Preview disconnect in that case too?
2. Copy some valid CSS code to the clipboard. Wile Live Preview is running, open the CSS (not SCSS) file in Brackets, choose Edit > Select All, and then paste in the other CSS code. Does Live Preview disconnect in that case?

Also, since it sounds like the problem does not happen in the simple Getting Started project, can you please post a link to a simple project that does show the problem?

Thanks!