Question

我最近一直致力于网站的打印样式表，我意识到我无法通过有效的方式进行调整。有一个重新加载周期来处理屏幕布局是一回事：

更改代码
命令标签
重载

但是当你尝试打印时，整个过程会变得更加艰难：

更改代码
命令标签
重载
打印
斜视打印预览图像
在预览中打开PDF以进行进一步检查

我在这里错过了哪些工具？ WebKit的检查员是否“假装这是分页媒体”复选框？ Firebug（颤抖）可以做些什么魔法吗？

Answer 1

Chrome的检查员可以选择此选项。

打开DevTools检查器（mac： Cmd + Shift + C ，windows： Ctrl + Shift + C ）
点击位于DevTools面板左上角的切换设备模式图标。（windows： Ctrl + Shift + M ，mac： Cmd + Shift + 中号）。
点击浏览器视口右上角的更多覆盖 图标，打开devtools抽屉。
然后，在仿真抽屉中选择媒体，并选中 CSS媒体复选框。

这应该可以解决问题。

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

来源：Google DevTools page *

Answer 2

我假设您希望尽可能多地控制打印窗口而不使用HTML到PDF方法...使用@media屏幕进行调试 - @media print for final css

现代浏览器可以让您快速直观地了解在@media query中使用英寸和 pts 打印时会发生什么。

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

一旦您的浏览器显示“英寸”，您就会更好地了解会发生什么。这种方法应该只能结束打印预览方法。所有打印机都可以与pt和in单位一起使用，并且使用@media技术可以让您快速查看将要发生的情况并进行相应调整。萤火虫（或同等物）绝对会加速这个过程。当您将更改添加到@media时，您已获得使用media = "print"属性链接的CSS文件所需的所有代码 - 只需将@media屏幕规则复制/粘贴到引用的文件即可。

祝你好运。网络不是为打印而构建的。创建一个提供所有内容的解决方案，风格与浏览器中的内容相同，有时是不可能的。例如，主要为1280 x 1024观众的流畅布局并不总能轻易转换为漂亮而整洁的8.5 x 11激光打印。

W3C对于豁免的引用：http://www.w3.org/TR/css3-mediaqueries/

Answer 3

在Chrome v41中，它就在那里，但在一个稍微不同的地方。

enter image description here

Answer 4

Chrome 48 您可以在渲染标签中调试打印样式。

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

<强> 修改
对于 Chrome 58 ，该位置已更改为 Web Inspector＆gt;菜单＆gt;更多工具＆gt;渲染

Answer 5

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

使用Firefox + Web Developer扩展程序。
在Web Developer菜单中，按媒体类型/打印
返回Web Developer菜单，选择Options / Persist Features

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

HTH。

Answer 6

自v53起，Chrome的用户界面与再次不同。

我不需要经常使用此功能，但每当我这样做时，我会花费很长时间来弄清楚Chrome团队自上次刻录周期以来是否已将其移动的位置。

请注意，它是Chrome浏览器窗格中开发工具窗格 ...菜单中的...菜单。

现在在“渲染”部分中向下滚动。它经常低于折叠。

Answer 7

根据rflnogueira的回答，目前的Chrome设置（40.0。*）如下所示：

chrome print css emulation

Answer 8

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

Answer 9

2019-更新了说明

打开Chrome检查器
- 从 Mac => option + command + i
- 从 Windows => F12
单击三个小点customize and control devTools
选择More Tools
选择Rendering
滚动到底部到Emulate CSS Media
从向下箭头选择print

Answer 10

如果您有一个打印功能，可以将页面内容重写到一个新窗口，并且您的打印样式表被引用，您将更好地了解它在纸上的样子，并且您将能够用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();
        });

Answer 11

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

一个缺点是它没有清楚地描绘页面边界。

Answer 12

enter image description here

在DreamWeaver中，有一个工具栏，几乎可以显示您想要的任何渲染选项：屏幕，打印，手持媒体，投影屏幕，电视媒体，设计时间样式表等。这就是我特别使用的方法：只需按一下按钮即可立即显示预览。

Answer 13

我使用宏重复发送按键和鼠标点击。在Windows下，AutoHotKey是一款出色的软件，在OS X下你可以阅读有关Automator排序an alternative AHK for OsX的内容。

在Windows下（在OS X下替换Ctrl by Cmd）“Ctrl-s /切换到Fx窗口，无论它在打开的窗口列表中的哪个位置/ Ctrl-r”绑定到1个未使用的键，都可以避免因无趣的任务而感到沮丧从RSI保存我的手臂：）

调试打印样式表的建议？

13 个答案: