Chrome Dev Tools 如何查看并操作CSS @media queries媒体查询？

• 首先确认你需要查看的@media规则已满足触发条件：媒体查询规则仅在当前页面视口匹配它定义的阈值（比如宽度、分辨率、深色模式等）时，才会自动展示在对应元素的Styles面板样式列表中，可直接点击修改数值即时生效。
• 若要查看所有已定义的@media规则（无论当前是否触发）：
  1. 打开DevTools的「Sources」面板，定位到对应CSS文件，找到目标@media规则，点击规则左侧的行号，会自动跳转至Styles面板的对应规则位置，即可直接编辑调整。
  2. 也可以在Styles面板右上角的过滤器输入框中直接输入@media，即可过滤出当前所有生效的媒体查询规则。
• 如果你开启了设备模拟模式（Toggle Device Toolbar），也可以右键点击顶部媒体查询条上的对应断点，选择「在源面板中显示」，快速定位到对应@media规则，跳转后即可在Styles面板中修改。

注意：如果满足触发条件仍未在Styles面板看到对应规则，先检查媒体查询语法是否正确，是否存在优先级更高的样式覆盖了该规则导致未生效。

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