search

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.26k stars 7.63k forks source link

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

Open sergiovilla opened 9 years ago

sergiovilla commented 9 years ago

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 commented 9 years ago

Which OS and version are you using?

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

sergiovilla commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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

sergiovilla commented 9 years ago

v39.0.2171.95

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

redmunds commented 9 years ago

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

sergiovilla commented 9 years ago

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 commented 9 years ago

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

FunkeDope commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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

In addition, could you let us know:

FunkeDope commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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 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 commented 9 years ago

@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!