使用VS Code Live Server时浏览器不支持WebSocket的问题求助

问题描述 #

使用VS Code的Live Server测试代码时，浏览器输出WebSocket相关代码，并报错：Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.

问题排查与解决方案 #

1. 修复代码中的语法错误

• <meta name="viewport">标签存在语法错误：width=,, 不符合规范，应改为 width=device-width，错误的viewport设置可能导致浏览器进入兼容性模式，影响WebSocket支持。
• jQuery引入路径使用了根路径/JS/jquery-3.6.1.min.js，如果项目中JS文件夹并非系统根目录，会导致jQuery加载失败，建议改为相对路径./JS/jquery-3.6.1.min.js。
• CSS样式对象最后一个属性后的冗余逗号需删除（"border":"2px solid red", → "border":"2px solid red"），避免语法解析异常。

2. 调整Live Server设置规避WebSocket依赖

打开VS Code设置，搜索Live Server: Use Web Socket，取消勾选该选项。此时Live Server会采用轮询方式替代WebSocket实现自动重载，无需依赖浏览器的WebSocket支持。

3. 升级浏览器或Live Server扩展

• 若使用老旧浏览器（如IE11及以下），直接升级到Chrome、Firefox、Edge等现代浏览器，它们原生支持WebSocket协议。
• 在VS Code扩展市场中更新Live Server到最新版本，旧版本可能存在兼容性bug。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test lesson</title>
    <script src="./JS/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script>
        $(function(){
          $("div").find("*").css({
            "color":"red",
            "border":"2px solid red"
          });
        });
    </script>   
</head>
<body class="ancestors">
        <div class="descendants" style="width:500px;">div
          <p class="first">P (child)
            <span>Span (grandchild)</span>
          </p>
            <p class="second">P (child)
                <span>Span (grandchild)</span>
            </p>
        </div> 
</body>
</html>

内容的提问来源于stack exchange，提问作者DuckManager