我最近一直在为一个网站设计打印样式表，我意识到我不知道如何有效地调整它。为屏幕布局设置重载循环是一回事:
更改代码 点 重新加载
但当你试图打印时，整个过程会变得更加艰巨:
更改代码 点 重新加载 打印 斜视打印预览图像 在预览中打开PDF以作进一步检查
我是不是错过了一些工具?WebKit的检查器有“假装这是分页媒体”复选框吗?Firebug(战栗)能施展什么魔法吗?
当前回答
有一种简单的方法来调试你的打印样式表，而不需要切换HTML代码中的任何媒体属性(当然，正如指出的那样，它不能解决宽度/页的问题):
使用Firefox + Web开发扩展。 在Web开发人员菜单中，选择CSS /按媒体类型显示CSS /打印 返回Web开发人员菜单，选择选项/持久化功能
现在您正在查看打印的CSS，您可以无限期地重新加载页面。 完成后，取消选中“Persist Features”并重新加载，您将再次获得屏幕CSS。
HTH.
其他回答
在Firefox(87.0)中，“DOM和样式检查器”有一个用于打印媒体模拟的切换按钮。
它的一个缺点是不能清楚地描绘页面边界。
如果你有一个打印函数，将页面的内容重写到一个新的窗口，并引用打印样式表，你会更好地了解它在纸上的样子，你也可以用firebug之类的工具来调试它。
这里有一个如何用JavaScript / jquery实现的例子
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
Chrome 48可以在渲染选项卡中调试打印样式。
点击检查器和渲染设置的菜单图标右上角。
编辑 对于Chrome 58，位置已更改为Web检查>菜单>更多工具>渲染
在DreamWeaver中有一个工具栏，可以显示你想要的任何渲染选项: 屏幕，打印，手持媒体，投影屏幕，电视媒体，设计时间样式表等。 这是我特别使用的，因为它:立即显示预览只需按下一个按钮。
有一种简单的方法来调试你的打印样式表，而不需要切换HTML代码中的任何媒体属性(当然，正如指出的那样，它不能解决宽度/页的问题):
使用Firefox + Web开发扩展。 在Web开发人员菜单中，选择CSS /按媒体类型显示CSS /打印 返回Web开发人员菜单，选择选项/持久化功能
现在您正在查看打印的CSS，您可以无限期地重新加载页面。 完成后，取消选中“Persist Features”并重新加载，您将再次获得屏幕CSS。
HTH.
