如何手动断开Chrome与Webpack Dev Server的WebSocket连接以停止自动刷新？

阿华AIGC实验室

2026-5-15

手动断开Webpack Dev Server与Chrome的连接、停止自动刷新的方法

我帮你整理了几个有效的方案，刚好能解决你要对比DevTools修改后的HTML和原始版本的需求——之前勾选离线无效，是因为Webpack Dev Server（WDS）的自动刷新依赖WebSocket推送，已经建立的WebSocket连接不会因为浏览器离线立即断开，WDS还会尝试重连，所以得从断开WebSocket本身入手：

方法1：通过Chrome DevTools Network面板直接断开WebSocket

打开Chrome开发者工具（按F12或Ctrl+Shift+I）
切换到Network面板，顶部过滤器选择WS（WebSocket）
找到WDS的WebSocket连接（通常路径包含/ws，或者带有webpack相关标识）
右键点击该连接，选择Cancel，就能直接断开当前连接，WDS无法再推送刷新指令

方法2：用Console面板执行代码关闭WebSocket

打开DevTools的Console面板
执行下面的代码，就能找到并关闭WDS的WebSocket实例：

// 方法A：针对WDS专属的WebSocket实例
if (window.webpackHotUpdate) {
  Object.values(window.webpackHotUpdate).forEach(module => {
    if (module._devServerSocket && module._devServerSocket.close) {
      module._devServerSocket.close();
    }
  });
}

// 方法B：遍历所有WebSocket实例，更通用
Array.from(window).forEach(obj => {
  if (obj instanceof WebSocket && obj.url.includes('webpack')) {
    obj.close();
  }
});

执行后，自动刷新就会停止，你可以安心修改并对比HTML了

方法3：临时修改WDS配置（如果你有权限访问项目配置）

打开项目的webpack.config.js文件，临时注释掉热更新相关配置：

module.exports = {
  // ...其他配置
  devServer: {
    // hot: true, // 注释掉热更新开关
    // liveReload: true, // 也可以关闭liveReload
  },
  // plugins: [
  //   new webpack.HotModuleReplacementPlugin(), // 注释掉热更新插件
  // ],
};