打开DevTools时页面无原因快速重复加载该如何解决？

快速定位方法：先使用其他未装任何扩展的浏览器打开同个站点并开启DevTools，如果问题不复现，优先排查当前浏览器的配置/扩展问题；如果问题仍复现，优先排查站点代码、构建工具相关逻辑。

常见触发原因及对应解决方法 #

• DevTools自带设置触发
  首先检查DevTools配置：
  1. 点击DevTools右上角的齿轮图标打开设置，确认是否开启了自动重载相关的实验特性，或是在「Network」面板勾选了和缓存、重载联动的选项
  2. 检查「Sources」面板是否设置了异常断点、DOM变动断点，这类断点触发后如果没有继续执行，可能会被代码的异常捕获逻辑触发循环重载
• 前端代码内置DevTools检测逻辑
  很多站点会加反调试逻辑，检测到DevTools打开时就主动触发重载。全局搜索项目代码里的location.reload()相关逻辑，排查是否有类似如下的检测代码被误触发：

  // 常见的DevTools检测逻辑示例
  const checkDevTools = () => {
    const start = performance.now();
    debugger;
    if (performance.now() - start > 100) {
      location.reload();
    }
  }
  setInterval(checkDevTools, 1000);
  

  找到对应逻辑后调整检测阈值或者临时注释即可验证。
• 开发工具热更新死循环
  如果你用了Vite、Webpack DevServer等带热重载功能的构建工具，DevTools打开时的缓存策略变动可能会触发热更新死循环。可以先关闭热更新功能，或者在构建工具配置中关闭dev模式的自动重载验证是否恢复。
• 浏览器扩展冲突
  部分开发类、脚本类扩展（比如油猴、前端调试扩展）会在DevTools打开时注入额外代码，触发页面重载。可以打开浏览器无痕模式，禁用所有扩展后重新测试，如果问题消失，逐个启用扩展排查冲突项即可。

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