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 :-)

 

0

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

0

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
Avatar
Permanently deleted user

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
Avatar
Permanently deleted user

Hi there.

I've managed to put together a rough screencast.

Do have anywhere private I can post it to?

Thanks.

 

0

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
Avatar
Permanently deleted user

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

 

 

0

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
Avatar
Permanently deleted user

Okay, try wcp_on_jcs_obe2.zip

0

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
Avatar
Permanently deleted user

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

0

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
Avatar
Permanently deleted user

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
Avatar
Permanently deleted user

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

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
Avatar
Permanently deleted user

I just about see what you mean. :-)

0
Avatar
Permanently deleted user

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

 

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

0
Avatar
Permanently deleted user

One final thought. 

 

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

0
Avatar
Permanently deleted user

Oh wait.

Brackets is written in Javascript, isn't it.

 

 

0

yes, as far as I can see...

0

请先登录再写评论。