前端调试-Chrome DevTools工具-Emulate a focused page

Select 下拉框的样式调试

调试下拉框样式时，经常会遇到这样的问题：当 Select 下拉内容展开后，一旦切换到浏览器 DevTools 面板，下拉内容就会自动收起，无法继续选中或查看相关样式。

下面以 "Ant Design" 的 Select 组件 为例说明：

解决方法是打开 DevTools 的 More tools 菜单，选择 Rendering：

在打开的 Rendering 面板中，勾选 Emulate a focused page：

此时就可以轻松调试 Select 下拉样式了：

总结： 在 Chrome DevTools 的 Rendering 面板中，勾选  "Emulate a focused page"  的作用是模拟页面始终处于“聚焦”状态。 勾选此选项后，以下行为可能会受到影响：（调试完成后建议取消勾选，以免影响其他功能的调试）

• JavaScript 定时器：

  • 当页面失去焦点时，setTimeout 和 setInterval 的执行频率可能会被浏览器降低，以节省资源。
  • 勾选后，这些定时器会按照正常速度运行。

• CSS 动画和过渡：

  • 某些 CSS 动画和过渡效果可能会在页面失去焦点时暂停或降速。
  • 勾选后，动画会继续流畅运行。

• requestAnimationFrame：

  • 如果页面未聚焦，requestAnimationFrame 的调用频率可能会降低。
  • 勾选后，requestAnimationFrame 会保持正常的帧率更新。

• 音频/视频播放：

  • 某些浏览器会自动暂停背景标签页中的音频或视频播放。
  • 勾选后，音频和视频会继续播放，就像页面仍然聚焦一样。