一场因chrome浏览器调试模式network中设置了offline模式导致的页面调试就会导致数据无法正常加载

居家做个实现小项目，前端功能采用vue.js，后端springboot工程。但是为了方便调试，日常基于chrome浏览器打开来核对当前页面调用的什么接口来辅助排查问题。但是呢，我这个vue工程和springboot启动后，只要不打开chrome检查，就不会出现问题，只要打开检查页面就无法正常加载数据。

一、情形再现

只要打开chrome检查就会出现如上状况，你说奇怪不奇怪。

二、CodeBuddy排查

刚开始发现这个问题，以为是vue.js工程哪儿开启了禁止调试模式，对着代码一堆排查没有解决。

CodeBuddy出来后，我把情况给它反馈一下，对着vue.js和springboot工程一堆源码扫描都没有发现问题。最终我尝试把上述截图告诉它，它立马定位出来问题所在，原来是有个选项导致了（如下图，选择了offline所致）。

我把上述两张检查前后的图抛给CodeBuddy 它分析得出如下结论。

三、豆包排查

假设我没有workbuddy，我有豆包，我尝试描述一下原因，并发给他两张前后截图，看它能分析出来不。

问题根因分析

你遇到的现象是：正常使用系统一切正常，一打开 Chrome 开发者工具（DevTools）就断网、跳 Chrome 离线恐龙页，核心原因是前端代码中检测到 DevTools 打开时，主动触发了断网 / 离线状态，而非真的物理网络故障。

🧠 详细原因拆解

最常见的触发机制：DevTools 检测 + 离线模拟
很多前端项目（尤其是你这类生鲜果蔬交易平台的管理系统）会加入反调试 / 防抓包逻辑，核心原理是：
代码通过 debugger 语句、console.log 检测、window.ondevtoolschange 等方式，判断开发者工具是否被打开
一旦检测到 DevTools 打开，就执行强制断网逻辑，比如：

javascript 复制代码

运行
// 常见的反调试断网代码
window.addEventListener('devtoolschange', () => {
  // 模拟离线状态
  navigator.serviceWorker.register('/sw.js').then(reg => {
    reg.ready.then(() => {
      // 强制切换为离线模式
      window.navigator.onLine = false;
    });
  });
  // 或直接跳转到离线页面
  window.location.href = 'chrome://dino';
});

你第二张图中 DevTools 的 Network 面板被手动切到了 Offline（离线）模式，也可能是代码自动触发的，导致所有本地请求（localhost:8081）都被拦截，报 ERR_INTERNET_DISCONNECTED

其他可能的诱因

✅ 分步排查与解决方案

第一步：验证核心问题（排除物理网络）

打开 Chrome，访问 localhost:8081/#/center，确认页面正常

打开 DevTools（F12），不要切到 Network 面板，直接看 Console 面板：

如果出现 debugger 断点、DevTools detected 等日志，说明是反调试代码导致

如果 Console 无异常，直接跳恐龙页，说明是代码强制跳转

第二步：关闭反调试 / 防抓包逻辑（核心解决）

禁用断点：在 DevTools 的 Sources 面板，勾选 Deactivate breakpoints（禁用所有断点），阻止debugger语句触发

拦截反调试代码：在 Console 面板执行以下代码，覆盖检测逻辑：

javascript 复制代码

运行
// 禁用devtoolschange检测
window.removeEventListener('devtoolschange', () => {});
// 强制设置在线状态
Object.defineProperty(navigator, 'onLine', { value: true, writable: false });
// 禁用debugger
(function() {
  var _console = window.console;
  window.console = {
    log: function() {},
    error: function() {},
    warn: function() {},
    info: function() {}
  };
  setInterval(() => {
    debugger;
  }, 100);
})();

永久解决方案：找到项目源码中的反调试代码（通常在main.js、app.js、utils/anti-debug.js中），删除相关逻辑

第三步：修复 DevTools 离线模式

打开 DevTools → Network 面板，将 Offline 下拉框切回 No throttling（无限制）

取消勾选 Disable cache（禁用缓存），避免本地资源加载失败

重启 Chrome，清除缓存后重新访问 localhost:8081

第四步：排查 Vue 路由 / 本地服务问题

你的项目是 Vue 项目（# 路由），检查 router/index.js 中的路由守卫：

javascript 复制代码

运行
// 检查是否有DevTools检测相关的路由拦截
router.beforeEach((to, from, next) => {
  // 若有类似代码，删除即可
  if (window.devToolsOpen) {
    next('/error');
  }
  next();
});

确认本地后端服务（localhost:8081）正常运行，无端口占用、服务崩溃

📌 针对你项目的专属建议

你正在开发的是基于 Spring Boot + Vue 的果蔬商城管理系统，这类项目的前端（Vue）通常会在打包时加入反调试逻辑，防止源码泄露：

开发环境：直接在 Vue 源码中删除反调试代码，本地开发时不会触发

生产环境：如果是打包后的代码，需要通过 Chrome DevTools 的 Sources 面板格式化代码，找到反调试逻辑并禁用

本地调试：使用 vue.config.js 配置 devServer，关闭代理、跨域拦截，避免 DevTools 触发网络异常

💡 补充验证方法

无痕模式测试：打开 Chrome 无痕窗口，访问 localhost:8081，再打开 DevTools：

如果正常，说明是浏览器插件 / 缓存导致的异常

如果依然跳恐龙页，100% 是项目代码的反调试逻辑

换浏览器测试：用 Edge、Firefox 打开系统，再打开开发者工具：

如果正常，说明是 Chrome 专属的反调试代码

如果同样异常，说明是项目通用的反调试逻辑

🎯 最终结论

99% 的概率是项目前端加入了反调试 / 防抓包代码，检测到 DevTools 打开后强制触发离线状态，导致跳 Chrome 离线恐龙页，和物理网络、本地服务无关。

按照上面的步骤，先禁用反调试代码、恢复 DevTools 在线状态，即可解决问题。

四、结论

看来，如果把图发给豆包，它也会能分析出来原因所在。