Live preview does not highlight HTML nodes after JavaScript change.

[Worie]

Prerequisites

• Can you reproduce the problem with Debug -> Reload Without Extensions?
• Did you perform a cursory search to see if your bug or enhancement is already reported?
• Did you read the Troubleshooting guide?

Description

Saving a JS file while Live Development session is opened causes the page in Chrome to reload.
When you go back to the HTML markup and edit your code there, you cant see any highlights or changes.
This is probably due to fact that after the refresh the remote markup (the code in actual browser) does not contain data-brackets-id attributes.

You can see that this line throws an error https://github.com/adobe/brackets/blob/master/src/LiveDevelopment/Agents/RemoteFunctions.js#L716 (_queryBracketsID on the DOMEditHandler is undefined)

I didn't have any better idea for title of this issue.

Steps to Reproduce

1. Start Live Preview on any HTML file.
2. Have fun there (see that everything actually works, highlight and changes are applied)
3. Attach some Javascript file to the main HTML file
4. Edit linked javascript file
5. The changes made in JS file are applied
6. Go back to your HTML file
7. Try to have fun again
8. No luck - there's no highlighting nor live changes applied to the browser.

Expected behavior: Every part of Live Preview works even if you changed some javascript.

Actual behavior: Highlight and Live changing of text/tags does not work.

Versions

OSX Sierra 10.12.1 (16B2555)
Brackets 1.8

[haslam22]

HTMLDocument.getResponseData() seems to be the culprit:

    HTMLDocument.prototype.getResponseData = function getResponseData(enabled) {
        var body;
        if (this._instrumentationEnabled && this.editor) {
            body = HTMLInstrumentation.generateInstrumentedHTML(this.editor);
        }

        return {
            body: body || this.doc.getText()
        };
    };

If the editor isn't visible this.editor becomes null, and the document sends back static text to the browser instead of the instrumented text with data-brackets-id attributes.

You could try this (rough) solution here which uses the _masterEditor reference instead: https://github.com/haslam22/brackets/tree/livepreview-fix

Only problem is that it doesn't work if the .html file isn't in the working files list, so I'll work on this and submit a PR soon hopefully

[kayyali18]

It seems like you guys fixed the problem I am having. My question is I can't figure out which file to download to fix the problem with my Brackets. Help?

[saurabh95]

You can just clone the latest brackets code and then link your installed brackets to the source code.
https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets#setting-up-your-dev-environment