Intellij LiveEdit vs Brackets Live Preview

Although Brackets is relatively new, it does seem to have the edge when it comes to Live Previewing. I find IntellIJ LiveEdit a bit of a hit or miss affair: some changes are picked up, others (especially images and css changes) are not showing until the browser is refreshed, and sometimes they're not picked up then.

Hope to see improvements in the future that will bring LiveEdit up to the same level as Brackets.

Aside from that, all good :-)

 

19 comments
Comment actions Permalink

please can you elaborate on this issue? What IDE version do you use? Screencast that shows up the problem would be helpful

0
Comment actions Permalink

also, please make sure that 'Update' in Preferences/Build, Execution, Deployment/Debugger/Live Edit is set to 'Auto in (ms)' and 'Restart if hotswap fails' is enabled

0
Comment actions Permalink

Yes, my settings are right. I'll try to get the screencast by the weekend. I'm using Webstorm version 2016.3 #WS-163.3512.13

0
Comment actions Permalink

Hi there.

I've managed to put together a rough screencast.

Do have anywhere private I can post it to?

Thanks.

 

0
Comment actions Permalink

You can upload it to our FTP server (ftp://ftp.intellij.net/.uploads/ - anonymous login, .uploads directory has no permissions to list/download files, only for upload) and let me know the file name

0
Comment actions Permalink

Okay, I've copied over a file called livedit.mp4. Sorry about the watermark and the poor quality.

 

 

0
Comment actions Permalink

thanks... Unfortunately this video doesn't give me any clue on what's going on... Can you attach a sample project/page I can use to recreate the issue? As HTML is correctly hotswapped to me - page is updated immediately without browser refresh...

0
Comment actions Permalink

Okay, try wcp_on_jcs_obe2.zip

0
Comment actions Permalink

thanks! reproduced. the problem is that your page is changed dynamically - tags/classes are added/removed, etc. Like:

$('section > div > ol > li').wrapInner('<span>');

as a result, the tags in source files don't match the DOM structure in browser. And LiveEdit searches element by selector/path... And it can't match `section > div > ol > li > span > p` with `section > div > ol > li > p` - as a result Live Edit doesn't work for <p>... When you click in <li> in

<li><p>Sign in to the My Services application.</p></li>

the list item is highlighted. But the you click on <p>/start editing text, nothing happens...

Related ticket: https://youtrack.jetbrains.com/issue/WEB-7734

0
Comment actions Permalink

That doesn't sound like something that can be fixed then :-(

0
Comment actions Permalink

Indeed, it's not a thing that can be fixed easily... Requires using a different approach to matching elements - like 'patching' the code as Bracket does (that, when its own built-in server is used, injects annotations in code to be able to map edits and cursor positions from the source file)... Or (easier solution) - reload the whole page when nothing can be found? Not sure...

0
Comment actions Permalink

Well reloading the page would be fine, as long as it didn't cause a lot of flickering and you don't have to scroll down to reach the part of the page you were looking at before the page reloaded.

 

0
Comment actions Permalink

If I select a tag, then the preview highlights the part of the page that is enclosed by the tag. Could you update that area in the preview when it's highlighted?

0
Comment actions Permalink

the content of inner tag can't be updated even if selecting outer tag does highlight the page area... If nothing is highlighted when you select the text, you can't expect live edit to work

0
Comment actions Permalink

I just about see what you mean. :-)

0
Comment actions Permalink

 And one other small thing concerning table rendering with emmet coding.

 

https://youtrack.jetbrains.com/issue/WEB-23339

0
Comment actions Permalink

One final thought. 

 

If Adobe Brackets is open source, perhaps something can be built around their live preview engine. 

0
Comment actions Permalink

Oh wait.

Brackets is written in Javascript, isn't it.

 

 

0
Comment actions Permalink

yes, as far as I can see...

0

Please sign in to leave a comment.