我最近一直在为一个网站设计打印样式表,我意识到我不知道如何有效地调整它。为屏幕布局设置重载循环是一回事:

更改代码 点 重新加载

但当你试图打印时,整个过程会变得更加艰巨:

更改代码 点 重新加载 打印 斜视打印预览图像 在预览中打开PDF以作进一步检查

我是不是错过了一些工具?WebKit的检查器有“假装这是分页媒体”复选框吗?Firebug(战栗)能施展什么魔法吗?


当前回答

Chrome 48可以在渲染选项卡中调试打印样式。

点击检查器和渲染设置的菜单图标右上角。

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

其他回答

在Chrome v41中,它也在那里,但位置略有不同。

按照rflnogueira的回答,当前的Chrome设置(40.0.*)将如下所示:

2019 -更新说明

打开Chrome检查器 从Mac =>选项+命令+ i 从Windows => F12 点击小3点,自定义和控制devTools 选择更多工具 选择呈现 滚动到底部以模拟CSS媒体 从向下箭头选择打印

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

打开DevTools检查器(mac: Cmd + Shift + C, windows: Ctrl + Shift + C) 单击位于DevTools面板左上角的Toggle设备模式图标。(windows: Ctrl+Shift+M, mac: Cmd+Shift+M)。 单击浏览器视口右上角的More overrides图标,打开devtools抽屉。 然后,在“模拟”抽屉中选择“媒体”,并选中“CSS媒体”复选框。

这应该能奏效。

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

来源:谷歌DevTools page*

在Firefox(87.0)中,“DOM和样式检查器”有一个用于打印媒体模拟的切换按钮。

它的一个缺点是不能清楚地描绘页面边界。