VS Code Live Server扩展打开Chrome开发者工具后离线问题求助

问题现象 #

• 通过VSCode的Live Server启动本地服务，打开Chrome开发者工具后，Live Server立即离线
• 未打开开发者工具时，修改保存文件不会导致服务失效；但打开开发者工具后，修改保存文件会触发服务关闭
• 同时观察到开发者工具中的DOM代码发生变化
• 已尝试卸载重装扩展、启用完全重载、重启电脑，问题仍存在

排查与解决步骤 #

• 检查Chrome开发者工具实验性功能
  打开Chrome开发者工具的Settings（右上角齿轮图标），切换到Experiments选项卡，禁用所有试验功能，尤其是和DOM修改、自动重载相关的选项，重启Chrome后测试。

• 调整Live Server扩展配置
  在VSCode设置中搜索Live Server，做以下调整：

  • 将Live Server: Custom Browser改为Firefox等其他浏览器，排查是否为Chrome专属问题
  • 关闭Live Server: Use Web Extensions Reload选项，避免浏览器扩展冲突
  • 把Live Server: Wait数值设为1000，给页面重载预留足够时间

• 排查Chrome扩展冲突
  禁用Chrome所有第三方扩展，仅保留必要组件，测试问题是否消失。若解决，再逐个启用扩展，定位冲突项并处理。

• 检查项目代码
  排查项目中是否存在自动修改DOM的脚本（如动态注入代码、监听文件保存事件的逻辑），这类代码可能和Live Server的重载机制冲突。也可创建空白HTML项目测试，排除项目代码本身的问题。

• 更换本地服务工具
  若以上方法无效，可尝试替代方案：

  • 使用微软官方的Live Preview扩展
  • 安装命令行工具http-server：npm install -g http-server，在项目根目录运行http-server -o启动服务

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