嘿，我之前也纠结过这个问题——想调试打印专属的CSS，却不知道怎么像调试普通页面那样查看元素和样式。后来摸索出Chrome里的两个实用方法，亲测好用：

• 直接在打印预览状态下调试DevTools

  1. 先打开页面的打印预览（按Ctrl+P或者Cmd+P就行），别关掉这个预览窗口；
  2. 回到原页面，按F12或者右键选择「检查」打开开发者工具；
  3. 这时候DevTools已经自动关联到打印预览的上下文了！你可以切换到「Elements」面板查看HTML结构，「Styles」面板里会自动筛选出当前生效的打印样式（包括@media print里的规则），甚至能实时修改样式，打印预览里会同步显示变化。

• 用DevTools模拟打印媒体类型（无需打开打印预览）
  如果不想每次都开打印预览，这个方法更高效：

  1. 打开DevTools（F12/右键检查）；
  2. 点击DevTools右上角的三个点「更多选项」，选择「More tools」→「Rendering」；
  3. 在弹出的Rendering面板里，找到「Emulate CSS media type」选项，下拉选择「print」；
  4. 此时页面会直接切换成打印样式的渲染效果，你可以像调试普通页面一样，随意点击元素查看对应的HTML和CSS，修改后也能实时看到打印样式的变化。

另外提个小技巧：要是想确认某个元素的最终打印样式，还可以在Console面板里输入getComputedStyle(document.querySelector('你的元素选择器')).getPropertyValue('你要查的样式属性')，直接获取计算后的样式值。

备注：内容来源于stack exchange，提问作者Sriram k