I'm trying to create grid layout but live-server is injecting these codes in webpage...

// <![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];
        head.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());
        }
        head.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();
    };
    console.log('Live reload enabled.');
  })();
}
// ]]>

How to handle this issue; And why it is happening ?

I'm trying to create grid layout but live-server is injecting these codes in webpage...

// <![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];
        head.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());
        }
        head.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();
    };
    console.log('Live reload enabled.');
  })();
}
// ]]>

How to handle this issue; And why it is happening ?

• javascript
• html
• css
• grid
• npm-live-server

• How do I format my posts using Markdown or HTML? – Andreas Commented Aug 29, 2021 at 13:03
• 2 What's the actual problem? LiveServer needs some helper stuff to make the "live" part in its name possible. – Andreas Commented Aug 29, 2021 at 13:03
• Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Bot Commented Aug 31, 2021 at 11:58
• I try to use AMP with nuxtjs. when I try to build and generate production and open it on live server "Virtual code" I always seen this <!-- Code injected by live-server --> blog. and when running amp validation it error "Custom JavaScript is not allowed". May I know this <!-- Code injected by live-server --> was generate only when I running on live server "Virtual code"? and it will not show when I public it on EC2 server? – Touch sophonara Commented Mar 14, 2022 at 10:45
• use a different http server extension.. i am done with live server. – Mustafa Commented May 20, 2022 at 23:36

4 Answers 4

I just experienced this issue. Although the OP does not seem to provide any clarity on the problem. In my situation, I added a self-closed <textarea /> element instead of the plete <textarea></textarea> set.

When I refresh, live-server crashes and injects the JS code shared on the OP inside the textarea element.

Here's a screenshot.

To fix this, check your elements if they are properly closed and more precisely if you have any textarea element.

Live server "injects" code in your website to work properly, if you open your html file, you'll see that it is doesn't saved, and is only temporary to when you use the extension

In my case this happened when there was an error in style.css (copied line in a wrong place)

* { 
  display: flex;
}

Message from Live Server disappeared after I moved this line to a proper place.

The code is only injected if you run the web with a live server, it is not saved, the code is used so that the web can reload when there are changes. You will not see this code if you run it using a web server such as Apache or Nginx.