Sunday, April 19, 2015

Adobe Brackets - live page preview

Tired of IDE's that have their own HTML viewer or just have to put up with WEBKIT or  Gecko (depending of the developers choice).

Well, guess we won't use it that no more, as it seems Adobe Brackets has some feature called Live preview allowing to see live changes of the page.
In the background it's starting your html file through Node.JS server and you can open the url from any browser.

The following screenshot ilustrates Adobe Brackets used in multiple browsers on Kubuntu 12.04 LTS:
As seen on the screenshot above, the selected text inside the IDE is being highlighted in all opened browser tabs.


Inline script

Consider the following inline code:
            var myHeader = document.getElementById("myHeader");
            document.getElementsByTagName("h2")[0].innerHTML += "bla";

First to get the javascript changes we need to cut the whole script block, and paste it in-place :(.
This will append "bla" text after the current text "This is your guide!".
Now we have:
"This is your guide! bla"

However, if we change the script content i.e then add some new variable or whatever, afterwards with the same procedure cut the code and paste it, will result in adding "bla" again, i.e:
"This is your guide! blabla"

This means that the HTML contents it's not being reloaded, but instead, it only change the content at the changed node and the only workaround is to manually refresh the browser's page.

So, don't do javascripts edits :D!
Instead after each change, refresh the page, to get genuine results.

All the tests above are made by me :).

No comments:

Post a Comment