为什么实时服务器会注入这些JavaScript代码

Question

我正在尝试创建网格布局，但实时服务器正在网页中注入这些代码...

// <![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.');
  })();
}
// ]]>

如何处理这个问题； 为什么会发生这种情况？

Answer 1

实时服务器会在您的网站中“注入”代码以正常工作，如果您打开 html 文件，您会看到它没有保存，并且只是在您使用扩展程序时暂时存在

Answer 2

我刚刚经历过这个问题。尽管OP似乎没有对这个问题提供任何澄清。在我的情况下，我添加了一个自闭合的

<textarea />

元素，而不是完整的

<textarea></textarea>

集。

当我刷新时，实时服务器崩溃并将 OP 上共享的 JS 代码注入到 textarea 元素内。

这是一个屏幕截图。

要解决此问题，请检查您的元素是否正确关闭，更准确地说是否有任何文本区域元素。

Answer 3

就我而言，当

style.css

出现错误（将行复制到错误的位置）时，就会发生这种情况

* { 
  display: flex;
}

我将此行移动到正确的位置后，来自 Live Server 的消息消失了。

Answer 4

我的代码也有同样的问题。我在 chrome 浏览器检查中显示了标签，但实际上该页面没有在 vs code 原始 html 中包含该标签。该标签会影响我的 css 样式，尤其是在“a”和“nav”栏上。我想删除标签，但找不到该选项。我怎样才能解决这个问题 ？请帮助我