css - 调试打印样式表的建议？

Question

我最近一直在为一个网站制作一个打印样式表，我意识到我对调整它的有效方法感到茫然。有一个重新加载周期来处理屏幕布局是一回事：

更改代码
命令选项卡
重新加载

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

更改代码
命令选项卡
重新加载
打印
斜视打印预览图像
在预览中打开 PDF 以进行进一步检查

有没有我在这里错过的工具？WebKit 的检查器是否有“假装这是分页媒体”复选框？Firebug (颤抖) 有什么魔法可以做的吗？

score 330 · Accepted Answer

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

打开 DevTools 检查器（mac：Cmd++ ，windows ：Shift++ ）CCtrlShiftC
单击位于 DevTools 面板左上角的Toggle device mode图标。（Windows：Ctrl++ ，Mac ：Shift++ ）。MCmdShiftM
单击浏览器视口右上角的More overrides图标以打开 devtools 抽屉。
然后，在仿真抽屉中选择媒体，并选中CSS 媒体复选框。

这应该可以解决问题。

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

来源：Google DevTools 页面*

score 76 · Accepted Answer

我假设您希望在不使用 HTML 到 PDF 方法的情况下尽可能多地控制打印窗口...使用@media screen 进行调试 - @media print 用于最终 css

现代浏览器可以使用英寸和pts中的@media query.

@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 技术可以让您快速查看将要发生的事情并进行相应的调整。Firebug（或同等产品）绝对会加快这个过程。当您将更改添加到@media 时，您已经获得了使用media = "print"属性链接 CSS 文件所需的所有代码 - 只需将 @media 屏幕规则复制/粘贴到引用文件即可。

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

W3C 参考：http: //www.w3.org/TR/css3-mediaqueries/

score 21 · Accepted Answer

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

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

编辑Chrome 58的位置已更改为
Web Inspector > Menu > More Tools > Rendering

score 19 · Accepted Answer

19

在 Chrome v41 中，它就在那里，但位置略有不同。

在此处输入图像描述

于 2015-03-20T21:07:34.357 回答

score 16 · Accepted Answer

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

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

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

HTH。

score 13 · Accepted Answer

自 v53 起， Chrome 的 UI再次不同。

我不需要经常使用此功能，但每当我这样做时，我都需要永远弄清楚 Chrome 团队自从我上次烧掉循环试图追踪它以来将它移到了哪里。

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

现在在“渲染”部分向下滚动。它通常在首屏下方。

score 8 · Accepted Answer

8

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

铬打印 css 仿真

于 2015-02-12T17:05:32.530 回答

score 5 · Accepted Answer

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

score 4 · Accepted Answer

2019 - 更新说明

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

score 0 · Accepted Answer

如果您有一个打印功能，可以将页面内容重写到新窗口并引用您的打印样式表，您将更好地了解它在纸上的外观，并且您将能够对其进行调试也有萤火虫之类的。

下面是如何使用 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();
        });

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

在此处输入图像描述

在 DreamWeaver 中有一个工具栏，几乎可以显示您想要的任何渲染选项：屏幕、打印、手持媒体、投影屏幕、电视媒体、指定时间样式表等。这是我使用的特别是因为它：立即显示带有 1 的预览单按一个按钮。

score -7 · Accepted Answer

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

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

css - 调试打印样式表的建议？

13 回答 13

Related

Reference