search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] Live preview does not highlight HTML nodes after JavaScript change. #11052

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by Worie Thursday Dec 22, 2016 at 13:16 GMT Originally opened as https://github.com/adobe/brackets/issues/12997

Prerequisites

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

core-ai-bot commented 3 years ago

Comment by haslam22 Friday Dec 23, 2016 at 16:23 GMT

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

core-ai-bot commented 3 years ago

Comment by kayyali18 Saturday Feb 25, 2017 at 03:08 GMT

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?

core-ai-bot commented 3 years ago

Comment by saurabh95 Saturday Feb 25, 2017 at 05:17 GMT

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