如何屏蔽Safari浏览器打开开发者工具时,鼠标指针所到之处出现的红色动画块(绘图闪烁)

本文介绍了一位用户从某国产Chromium内核浏览器切换到Safari浏览器后的体验,包括MBP发热问题的改善。同时,针对Safari浏览器开发者工具中出现的红色动画块问题,提供了详细的解决方案,只需关闭【停用绘图闪烁】功能即可。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

引子

之前一起都使用的某Chromium内核的国产浏览器,但是后来发现用那玩意儿MBP发热太严重了,于是乎,就换成Safari浏览器,使用了下,发热降低了很多,而且调试工具,也还好,能接受。

问题描述

下面说说碰到的问题。在我没有打开【开始选择元素】的时候,鼠标指针所到之处,仍然会出现红色动画块,如下图:

如上图,开始选择元素(红色方框标书的靶装图标)并没开启,但是鼠标在经过一些元素边界(有动画的地方更直观)的时候,会出现红色块状蒙版。

解决方案

要解决这个问题,其实很简单:

找到 开发者工具 - 元素 - TAB页右上角的 【停用绘图闪烁】,也就是下图中的 红色方框装的 毛笔状 图标,关闭即可。

最后,到这里,问题就解决了,希望能帮到大家哦~

### 关于浏览器开发者工具片加载关系的分析 在讨论此问题之前,需先理解两种主流浏览器Safari 和 Chrome)中开发者工具的功能及其对资源加载的影响。 #### Safari 浏览器中的开发者工具设置 Safari 默认情况下并未启用开发者菜单。通过手动激活开发者选项后,用户能够访问强大的调试功能[^1]。一旦启用了开发者工具,在调试过程中可能会调整某些网络行为参数,比如禁用缓存或强制重新验证资源。这些操作可能会影响页面上静态资源(如片)的行为方式。 #### Chrome 浏览器中的开发者工具配置 对于 Google Chrome 而言,其 F12 开发者工具有一个专门用于控制网络条件的部分——Network 面板下的“Disable cache (while DevTools is open)”选项[^2]。如果勾选该选项,则只要开发者工具处于打开状态,所有的 HTTP 请求都不会利用本地缓存数据;相反,每次都会向服务器发起新的请求来获取最新版本的内容。这可能导致一些依赖特定缓存策略才能正确呈现的像无法按预期工作。 #### 片加载失败的原因探讨 当关闭开发者工具之后发现原本应该可见的片变得不可见,通常是因为以下几个原因之一: 1. **缓存机制被改变**:部分网站为了优化性能会设定较长的有效期给自己的媒体文件链接地址。然而,在使用开发者工具期间由于设置了不存储任何临副本到磁盘上的规则而导致实际下载下来的那份拷贝丢失了。 2. **跨域资源共享(CORS)**:有即使是在同一域名下也可能存在子路径之间的权限差异。如果某个服务端接口返回错误响应头或者根本没有允许外部调用的话,那么即便初次渲染成功也有可能因为后续尝试再次读取而遭到拒绝访问的情况发生。 3. **JavaScript 动态注入逻辑异常**:有些复杂的前端框架会在运行期间动态生成 DOM 结构并绑定事件监听程序等等动作。假如这部分脚本执行完毕后再切换回普通浏览界面而非调试模式之下,就可能出现因缺少必要环境变量等原因造成的结果偏差现象。 以下是针对上述情况的一个简单的 JavaScript 示例代码片段用来检测当前是否有开启无痕浏览/隐身窗口以及是否开启了清除缓存功能: ```javascript if (performance.navigation.type === 1 || window.sessionStorage.length === 0){ console.log('The page was reloaded or opened in incognito mode.'); } else { console.log('Normal browsing session'); } ``` 最后需要注意的是,不同类型的设备和操作系统之间可能存在细微差别,因此建议测试前确认目标平台的具体实现细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值