谷歌浏览器中怎样快速预览网页在深色模式下的视觉效果？

可在开发者工具中强制触发深色模式：打开Rendering面板→选择Emulate prefers-color-scheme: dark；或通过Console注入color-scheme属性、重定义matchMedia模拟系统信号；再用Capture full size screenshot保存对比快照。

你正在调试网页在深色模式下的显示效果，需要在不修改代码、不重启浏览器、不安装扩展的前提下，实时看到当前页面启用 prefers-color-scheme: dark 后的真实渲染结果，避免反复切换系统主题或手动注入CSS。

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

第一步：在任意网页中按 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 面板中粘贴并执行以下代码：
document.documentElement.style.setProperty('color-scheme', 'dark');
这会强制根元素声明支持深色方案，触发浏览器对 color-scheme 属性的响应逻辑，部分原生控件（如表单输入框、滚动条）将自动切为深色样式。

方法二：模拟系统级信号但不改系统设置
在 Console 中运行：
matchMedia = window.matchMedia; Object.defineProperty(window, 'matchMedia', { value: (q) => q === '(prefers-color-scheme: dark)' ? { matches: true } : matchMedia(q) });
【注意】此操作仅作用于当前标签页，刷新后失效，无需担心污染全局环境。

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

打开开发者工具 → 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）调出命令菜单 → 输入 Capture full size screenshot → 回车。
截图会自动下载为 PNG 文件，保留深色渲染后的完整视觉状态，可与浅色模式截图并排比对字体可读性、对比度、图标可见性等细节。