Chrome及Brave浏览器devtools控制台刷新后输出不一致如何解决

你观察到的两种输出样式差异本质是控制台日志关联的页面上下文不同：

• 截图上方样式的日志关联的是刷新前的旧页面上下文，下方样式的日志关联的是刷新后的新页面上下文
• 出现概率差异是因为Brave自带的隐私防护、广告拦截模块的加载时序不稳定，会概率抢占页面初始化优先级，导致devtools控制台的上下文绑定逻辑出现时序差：当页面初始化比控制台上下文重置快时，日志就会落到新上下文（下方样式）；反之就会落到残留的旧上下文（上方样式），Chrome无内置这类拦截模块所以时序稳定，始终走旧上下文残留的逻辑。

• 固定输出下方新上下文样式：打开devtools设置（按F1或点击控制台右上角齿轮图标），找到「Console」分类下的「Selected context only」选项，勾选后控制台只会绑定当前活跃的顶层页面上下文，刷新后不会再出现旧上下文的日志残留，同时不会影响刷新自动清空控制台的逻辑。
• 固定输出上方样式同时实现刷新清空：在你调试代码的最开头加入console.clear()语句，页面加载后会自动清空之前的所有日志，同时保留上方的输出样式，不需要开启preserve log。
• Brave浏览器专属优化：进入Brave设置 -> 隐私和安全 -> 屏蔽与安全，把你调试的站点添加到「隐私防护例外列表」，关闭该站点的广告拦截、指纹跟踪防护，即可让页面初始化时序和Chrome一致，固定输出上方样式，同时关闭preserve log也能正常清空控制台。

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