ritwickdey / vscode-live-server

Launch a development local Server with live reload feature for static & dynamic pages.
https://ritwickdey.github.io/vscode-live-server
MIT License
5.59k stars 1.2k forks source link

html <body></body> tag bug. #2887

Open nadernt opened 5 months ago

nadernt commented 5 months ago

Issue Title: Malfunction When Embedding Tag in JavaScript Variable on VSCode Live Server

Description: Encountering a problem where embedding an HTML tag within a JavaScript variable leads to the display of broken webpage codes in the browser when using VSCode Live Server. This does not occur with other HTTP servers.

Steps to Reproduce:

Run the following code snippet with Live Server on VSCode:

<!DOCTYPE html>
<html>
<body>
<script>
const doc = `<!doctype html>
  <html lang="en-US">
    <head>
      <title>Test</title>
    </head>
    <body>
      <h1>Hello world!</h1>
    </body>
  </html>`;
  console.log(doc);
</script>
</body>
</html>

Observed Behavior: When this code is executed, the Live Server displays JavaScript codes on the browser screen, which indicates a problem with code rendering. image

Browser Developer Tools Inspection: In the developer tool of the browsers, the source of the served page includes additional script tags and code injected by Live Server, altering the expected output.

<!DOCTYPE html>
<html>
<body>
<script>
const doc = `<!doctype html>
  <html lang="en-US">
    <head>
      <title>Test</title>
    </head>
    <body>
      <h1>Hello world!</h1>
    <!-- Code injected by live-server -->
<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
</script>
</body>
  </html>`;
  console.log(doc);
</script>
<!-- Code injected

Tested Browsers: Google Chrome Mozilla Firefox

Additional Context: The use of the tag in a variable is sometimes necessary, for instance, when exporting an HTML document. The issue seems specific to VSCode Live Server as testing with other HTTP servers like http-server does not replicate the problem.

Request: Your assistance in resolving this issue would be greatly appreciated, as it impacts the functionality of our development process.

Thank you for your attention to this matter.