调试网页深色模式时，最烦人的事儿莫过于：没有真实系统深色状态，只能靠猜？或者改一行代码就全局炸锅？其实不用那么折腾。

打开开发者工具，几步操作就可以在完全不碰系统设置、不装插件的前提下，让当前页面立刻展示深色模式下的实际渲染效果。

更实用的是，整个过程可以保持其他页面不变，随便你切换多少标签页对比。

用开发者工具强制触发深色媒体查询

第一步，在任意网页上按 F12 或 Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（macOS），打开开发者工具。

第二步，点击右上角三个点，进入 "More Tools" → "Rendering"。

第三步，在 Rendering 面板中找到 Emulate CSS media feature，下拉菜单里直接选择 prefers-color-scheme: dark。

第四步，页面会立刻刷新成深色模式——所有依赖 @media (prefers-color-scheme: dark) 的样式都会生效。重点在于，这个改动只影响当前标签页，关闭面板或切到其他页面，一点事儿没有。

临时覆盖页面CSS以验证深色适配完整性

方法一：直接注入测试样式

在 Console 面板里粘贴并运行下面这段代码：

这会告诉浏览器：“嘿，我支持深色方案！”然后浏览器的原生控件，像输入框、滚动条这些，就会自动切换成暗色样式。不用去折腾操作系统的深色模式开关。

方法二：模拟系统级信号，但不改系统设置

在 Console 里跑这段：

注意：这个操作只作用于当前标签页，刷新页面就失效了。完全不用担心污染全局环境。

保存深色预览快照用于对比

打开开发者工具，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令菜单，输入 Capture full size screenshot 并回车。

截图会自动下载为 PNG 文件，保留深色渲染后的完整视觉状态。你可以和浅色模式的截图并排放一起，仔细对比字体可读性、对比度、图标可见性这些细节——这比靠肉眼来回切换系统主题靠谱多了。

《夸克》非常好用的免费AI浏览器

下载APP查看