有关调试打印样式表的建议？

In DreamWeaver there is a toolbar that shows virtually any rendering option you want: screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc. This is what I use especially because it: instantly shows a preview with 1 single press of a button.

仅media="screen"在调试时使用浏览器显示打印样式表。打印预览视图使用与普通浏览模式相同的渲染引擎，因此您可以使用该引擎获得准确的结果。

2019-更新说明

1. 打开Chrome检查器
   • 从Mac => option+ command+i
   • 从Windows =>F12

2. 点击三个小点， customize and control devTools

3. 选择 More Tools

4. 选择 Rendering

5. 滚动到底部 Emulate CSS Media

6. print从向下箭头中选择

我使用宏重复发送按键和鼠标单击。在Windows下，AutoHotKey是一款出色的软件，在OS X下，您可以阅读有关Automator 的OsX替代AHK的信息。

在Windows下（在OS X下用Cmd替换Ctrl），将“ Ctrl-s /切换到Fx窗口，无论它在打开的窗口列表中/ Ctrl-r”绑定到1个未使用的键，避免了无趣的任务带来的挫败感，最终将挽救我的手臂来自RSI :)

按照rflnogueira的回答，当前的Chrome设置（40.0。*）将如下所示：

有一种简便的方法可以调试打印样式表，而无需在HTML代码中切换任何媒体属性（当然，如前所述，它不能解决宽度/页面问题）：

• 使用Firefox + Web Developer扩展。
• 在“ Web开发人员”菜单中，选择“ CSS” /“按媒体类型显示CSS” /“打印”
• 返回“ Web开发人员”菜单，选择“选项” /“持久性功能”

现在，您正在查看打印CSS，并且可以无限期重新加载页面。完成后，取消选中“ Persist Features”并重新加载，您将再次获得屏幕CSS。

HTH。

在Chrome v41中，它存在，但是位置稍有不同。

使用Chrome 48，您可以在“ 渲染”标签中调试打印样式。

单击检查器和“ 渲染设置”右上方的菜单图标。

编辑
对于 Chrome 58，该位置已更改为 Web检查器>菜单>更多工具>渲染

Chrome浏览器的检查器中有一个选项。

1. 打开DevTools检查器（mac：Cmd+ Shift+ C，Windows：Ctrl+ Shift+ C）
2. 单击位于DevTools面板左上角的Toggle设备模式图标。（窗口：Ctrl+ Shift+ M，MAC：Cmd+ Shift+ M）。
3. 单击浏览器视口右上角的“ 更多替代” 图标以打开devtools抽屉。

4. 然后，在仿真抽屉中选择“ 媒体 ”，然后选中“ CSS媒体”复选框。

   

这应该可以解决问题。

更新：DevTools中的菜单已更改。 现在，可以通过单击右上角的“三点”菜单>“更多工具”>“渲染设置”>“模拟媒体”>“打印”来找到它。

资料来源：Google DevTools页面 *