Chrome使用Live Edit进行哪些更改？ [英] What kind of changes does Chrome pick up using Live Edit?

问题描述

http://plugins.jetbrains.com/plugin/7007 上的实时编辑页面说：自0.5版以来，LiveEdit仅作为JavaScript调试会话的一部分。这对我来说很好。

John Lindquist的实时编辑演示 https://www.youtube.com/watch?v=wCVwdvufTds （这真的很棒！）显示Chrome在没有重新加载的情况下拾取DOM更改。仍然是一个静态页面，但绝对不仅仅是Javascript调试。

并非每个人都可以使用服务器上的一个静态文件，页面也使用动态加载的代码（例如）

Chrome没有按下重新加载按钮就会收到什么样的改变？

解决方案

LiveEdit使用hotswap同步html，css和javascrit - 浏览器选项卡未重新加载。但是PHP和布局文件（smarty，twig）可以使用重装进行同步。还要注意的是，并非JavaScript代码中的每个更改都会立即更新页面：新代码会立即加载到浏览器，但只有在您执行某些操作才能触发此新代码时，才会看到更改结果。例如，如果您更改onClick处理程序并在警报中编写新文本，您将在点击后看到新的文本，而无需重新加载页面。
但是，如果JS代码仅在页面加载时执行（而不是在特定事件中），则必须手动重新加载页面才能看到结果 - 实时编辑不会强制执行新代码

另外还有一点需要注意：AngularJS的实时编辑目前并不像预期的那样工作 - 参见 WEB-7734 和相关门票

The live edit page at http://plugins.jetbrains.com/plugin/7007 says "Since version 0.5 LiveEdit works as part of JavaScript debug session only.". That works fine for me.

John Lindquist's live edit demo at https://www.youtube.com/watch?v=wCVwdvufTds (which is really awesome !) shows Chrome picking up DOM changes without a reload as well. Still a static page, but definitely more than just Javascript debugging.

Not everybody gets away with one static file on the server, and pages use dynamically loaded code as well (e.g. partials in AngularJS).

What kind of changes does Chrome pick up without hitting the reload button ?

解决方案

LiveEdit synchronizes html,css and javascrit using hotswap — browser tab is not reloaded. But PHP and layout files (smarty, twig) can obly be synchronized using reload. Note also that not each and every change in javascript code results in immediate page update: new code is loaded to the browser instantly, but the results of the change will be visible only when you do something to trigger this new code. For example if you change the onClick handler and write new text in alert, you will see the new text after the click without reloading the page. But if the JS code is executed only on page load (and not on certain event), you have to manually reload the page to see the results - live edit doesn't force new code execution

And one more note: live editing for AngularJS doesn't currently work as expected - see WEB-7734 and related tickets

这篇关于Chrome使用Live Edit进行哪些更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！