Live Edit not working correctly, causing errors in Chrome

So I'm currently evaluating PHP Storm 6, and I can't get Live Editor working correctly. First of all PHP Storm seems not to be able to set up the Webserver on the default port, I don't know why, but it seems nothing can connect to ports above 63007, not sure what's going on there. In the log file it only says:

[   6738]   INFO -    #org.jetbrains.io.WebServer - We cannot bind to our default range, so, try to bind to any free port


and then it binds to a random port.

However I've use the following "workaround" found here in the forums, I've added

-Drpc.port=53342
-Drpc.onlyAnyHost=true


to the PhpStorm.exe.vmoptions file, not sure whether this is the right way to do it (shouldn't there be an option for this in the IDE?), but it works. I've also changed the port in the Chrome extension and it can successfully connect:

Ready to load system latest for PhpStorm 6.0.2 (127.0.0.1:53342) browser-ext-platform.js:695
System latest loaded for PhpStorm 6.0.2 (127.0.0.1:53342) browser-ext-platform.js:695
System latest connected to PhpStorm 6.0.2 (127.0.0.1:53342)

[  30428]   INFO - ction.BrowserConnectionManager - Browser connected: version 1.3, CHROME



So far so good. Now I'm opening an empty, default HTML document via "View > Open in Browser":

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>


It immediately shows up in chrome, I'm typing some text between the body tags, and the tab gets updated just fine:

    <body>
        Lorem ipsum dolor sit amet.
    </body>

IN ["Dom","reloadPages"] 


Now I'm adding an element:

    <body>
        <p id="foo"></p>
    </body>


The tab becomes empty and a yellow notification bar pops up in Chrome, saying that "JetBrains IDE Support is debuggin this tab". The log doesn't show any errors yet:

IN ["Dom","highlightElement",["c29a105b","body > p#foo",0]] browser-ext-platform.js:708
DC 15 DOM.getDocument browser-ext-platform.js:708
DR 15 DOM.getDocument 1 browser-ext-platform.js:708
DC 15 DOM.querySelector{"nodeId":1,"selector":"body > p#foo"} browser-ext-platform.js:708
DR 15 DOM.querySelector Object {nodeId: 0} browser-ext-platform.js:708
IN ["Dom","reloadPages"] browser-ext-platform.js:708
EV 15 DOM.documentUpdated


So I'm canceling that, and add some text to the node:

    <body>
        <p id="foo">foobar</p>
    </body>


The tab remains empty, the notification pops up again, and an error is thrown in the console:

IN ["Dom","hideHighlight"] browser-ext-platform.js:708
IN ["Dom","setOuterHtml",["c29a105b","body > p#foo",0,"<p id=\"foo\">foobar</p>"]] browser-ext-platform.js:708
DC 15 DOM.hideHighlight browser-ext-platform.js:708
DC 15 DOM.querySelector{"nodeId":13,"selector":"body > p#foo"} browser-ext-platform.js:708
DR 15 DOM.hideHighlight Object {} browser-ext-platform.js:708
DR 15 DOM.querySelector Object {nodeId: 18} browser-ext-platform.js:708
DC 15 DOM.setOuterHTML{"nodeId":18,"outerHtml":"<p id=\"foo\">foobar</p>"} browser-ext-platform.js:708
{"code":-32602,"data":["Parameter 'outerHTML' with type 'String' was not found."],"message":"Some arguments of method 'DOM.setOuterHTML' can't be processed"} browser-ext-platform.js:701
Kotlin.createClass.error.value browser-ext-platform.js:701
Object.defineProperty.value chrome-ext-api.js:12
$f1 chrome-ext-api.js:155
chromeHidden.handleResponse


So, does anyone know what's wrong here?

Best
Oliver

System details:

Windows 7 x64
Chrome 27.0.1453.110 m
JetBrains IDE Extension 1.3
PHP Storm 6.0.2

Message was edited by: odey

1 comment

I'm getting a very similar issue with plugin 1.3 and WS 6.0.2  ( #WS-129-664 )

Putting text directly in the <body> section works fine, but put text in a div within the body and I also get

"code":-32602,"data":["Parameter 'outerHTML' with type 'String' was not found."],"message":"Some arguments of method 'DOM.setOuterHTML' can't be processed"} browser-ext-platform.js:701


For example:

=== This one works ===
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>asdsdss</title>
</head>
<body>       
Add this text
</body>
</html>


=== This one fails ===
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>asdsdss</title>
</head>
<body>       
<div>Add this text</div>
</body>
</html>


This is currently rendering the use of Webstorm over visual studio somewhat mute.

0

Please sign in to leave a comment.