PhpStorm live edit not working

Hello everyone,

At home I'am working on a Windows setup, and here at work at a Mac setup.
Since last week i discovered working in live edit mode (at my windows setup), but I can't seem to get it to work on my Mac setup.

Setup details

- PhpStorm
- Live edit plugin installed, and enabled.
- Javascript debugging enabled.
- Chrome installed, with the Jetbrains extension

And i made a Javascript debug configuration.

But when i click debug it won't work, a new chrome tab opens with the following in the URL location:

data:text/html;base64,PCFET0NUWVBFIGh0bWw+PHRpdGxlPkxvYWRpbmcgaHR0cDovL2QtZHRhcC5zcGFhcm5lbndzLm5sLzwvdGl0bGU+

And PhpStorm says the following:

Waiting for connection from JetBrains IDE Support extension for Chrome.
Please ensure you have installed the extension and IDE port      configured (current port 63342), or see Help.

Event log message:

IOException: Exception while handle message: [6, "r", 252]: Exception while handle message: [6, "r", 252]

Anyone knows how to fix this?

Thanks in advance.


11 comments

Hello!

please can you attach your idea.log? The content of Chrome extension console (see http://confluence.jetbrains.com/display/WI/LiveEdit, How do I know what's wrong?) may also help

0

Live edit is only partially working for me.  Maybe I have a mistaken idea of what it is supposed to do?  The docs say that I should be able to edit CSS and HTML in PhpStorm and see the results in Chrome as long as everything is set up correctly and a javascript debug session is running.

I believe I set everything up properly.  The Chrome extension is connecting to PhpStorm.  But I don't think PhpStorm realizes that the CSS file I am trying to live-edit is involved in the page that I'm debugging.  Does it follow all imports, includes, etc.?  My css is in another file that is not mentioned in the debug configuration.  Am I supposed to make a separate debug configuration for just the css file?  But if I do that and I run that debug, then the css file itself opens in the browser, which is not what i'm looking for.  I would like to be editing CSS locally and seeing the resulting changes of appearance in my html/php page in the browser.

Thanks.

0

Also, one time I did succeed in making a small change to some text in my html+php file and seeing the results correclty live-updated.  But I tried again and have not been able to repeat that success.  I don't know why it worked that time and not other times.  I make sure the Chrome extension is connecting, and that i only have one debug tab running in the browser, and I am not using Chrome's built-in inspector at the time.  Meanwhile my debug session is running in PhpStorm.

In PhPStorm's debugger I have the Elements tab.  Inside it are a Structure window and a Text window.  The Text window shows the generated HTML of my page.  If I click only in these two parts of the debugger, highlighting works correctly over in the browser.  But I cannot edit in the debugger, that doesn't seem to be allowed.  So I need to go to my source files up in the Editor part of PhpStorm.  But when I use the Editor, syntax highlighting does not work.  It seems like PhpStorm possibly does not follow all of the includes that link my source files plus scripts plus css together into a generated page?

0

Another question related to this.  When the debug session starts, it opens a tab in Chrome showing my web page on my server, as it should.  At the top of the page is a bar saying "JetBrains IDE Support" is debugging this tab.  Then there is a "Cancel" button and also an X over at the right end to close that bar.

If I click the Cancel button, of course that stops the debug session.  That is expected.

But the X seems like it should have the result of only dismissing the message.  I don't want the message there, it is occupying vertical space and decreasing the viewport.  I should be able to click the X to dismiss the notification.  But if I click the X it has the same result as clicking "Cancel"... the debug session ends.  Is there a way to dismiss the message without ending the debug session?   I also thought maybe clicking the body of the message would be the answer, but that does nothing.  Then, last chance, I thought "OK, maybe the message will auto-hide once I click anywhere outside of the message, like in a non-active part of the web page".  No, that did nothing too.

0

It's a bug - Live Edit doesn't currently work for linked CSS. Please watch http://youtrack.jetbrains.com/issue/WEB-11393 to be notified on any progress

0

> Is there a way to dismiss the message without ending the debug session?

No. Please see http://code.google.com/p/chromium/issues/detail?id=138258
You can use chrome://flags/#silent-debugger-extension-api flag to turn this infobar off

0

Thank you!  It had not occurred to me that the info bar was being generated by Chrome and not by the plugin.

0

I apologize.  I discovered that bug last night, but then the next day I was so tired that I forgot I already knew about it!

So we won't have Live Edit ability for CSS until that is fixed, understandably.  Now I still wonder why I have difficulty Live Editing HTML.  I did get it to happen just once...

0

HTML live editing works fine to me. Please can you record a screencast that shows up the issue?


0

I am planning to record a short screencast for this purpose if I cannot solve it myself today.

First, here is my suspicion.  Please confirm or reject this if you can.  I think PhpStorm (7.1.3 at least) has no idea how WordPress works via complex dynamic and data-driven loading of themes and templates.  Therefore it cannot make the logical connection between //mysite/index.php and all of the smaller php and html files that end up being included or looped through to generate the final layout of the page.  The index.php file itself is tiny, and it only calls the template loader.  In fact I will never have any reason to edit index.php.  But I don't understand how to live-edit the multiple smaller template files that get included in the generation of index.php -- because they do not and should not have public URLs on the server.  So I don't understand how to map them in any way that makes sense.

I need to understand that issue before I take any time (both mine and yours) with a screencast.  It's possible that the simple answer is "yes, we do not yet support Wordpress's form of dynamic template loading as of this version, so you will have to wait for the Wordpress plugin to stabilize on the next version of PhpStorm.

I would be using that plugin and the EAP version as a beta tester, but because of the existing issue that prevents FTP live updates via MLSD, I cannot use the betas yet and need to stay with the stable release.

0

Please sign in to leave a comment.