CSS 调试打印样式表的建议？

Suggestions for debugging print stylesheets?

提问by Jim Puls

I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:

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

• change code
• command-tab
• reload

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

but that whole process gets much more arduous when you're trying to print:

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

• change code
• command-tab
• reload
• print
• squint at print-preview image
• open PDF in Preview for further inspection

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

Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?

这里有我遗漏的工具吗？WebKit 的检查员是否有“假装这是分页媒体”复选框？Firebug（不寒而栗）有什么魔法可以做吗？

回答by Rafael Nogueira

There is an option for that in Chrome's inspector.

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

1. Open the DevTools inspector (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. Click on the Toggle device modeicon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
3. Click on the More overridesicon in the top right corner of the browser viewport to open the devtools drawer.

4. Then, select Mediain the emulation drawer, and check the CSS mediacheckbox.

   

1. 打开DevTools检查器（MAC：Cmd+ Shift+ C，窗口：Ctrl+ Shift+ C）
2. 单击位于 DevTools 面板左上角的Toggle device mode图标。（Windows：Ctrl+ Shift+ M，Mac：Cmd+ Shift+ M）。
3. 单击浏览器视口右上角的更多覆盖图标以打开 devtools 抽屉。

4. 然后，在仿真抽屉中选择Media，并选中CSS media复选框。

   

This should do the trick.

这应该可以解决问题。

Update: The menus have changed in DevTools.It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

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

Source: Google DevTools page*

来源：Google DevTools 页面*

回答by Dawson

I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use @media screen to debug - @media print for final css

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

Modern browsers can give you a quick visual for what's going to happen at print time using inchesand ptsin a @media query.

现代浏览器可以给你一个快速的视觉什么回事使用在打印时发生英寸和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 */
 ...
}

Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with ptand inunits, and using the @media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to @media, you've got all the code you need for a linked CSS file using media = "print"attribute - just copy/paste the @media screen rules to the referenced file.

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

Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.

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

W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/

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

回答by minlare

Chrome 48you can debug print styles within the Renderingtab.

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

Click the menu icon top right of inspector and Rendering Settings.

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

Edit
For Chrome 58the location has changed to Web Inspector > Menu > More Tools > Rendering

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

回答by johntrepreneur

In Chrome v41, it's there, but in a slightly different spot.

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

回答by Capsule

There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):

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

• Use Firefox + Web Developer extension.
• In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
• Go back to Web Developer menu, choose Options / Persist Features

• 使用 Firefox + Web Developer 扩展。
• 在 Web Developer 菜单中，选择 CSS / Display CSS by Media Type / Print
• 返回 Web Developer 菜单，选择 Options / Persist Features

Now you are viewing the print CSS and you can reload your page indefinitely. Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.

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

HTH.

哈。

回答by TrophyGeek

Chrome's UI is different againas of v53.

从 v53 开始，Chrome 的 UI再次不同。

I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.

我不需要经常使用此功能，但每当我使用此功能时，我都需要花很长时间才能弄清楚自上次我烧毁周期试图追踪它以来，Chrome 团队将它移到了何处。

Notice it's the ... menu in Dev Tools panenotthe ... menu in Chrome Browser pane.

请注意，它是Dev Tools 窗格中的 ... 菜单，而不是Chrome 浏览器窗格中的 ... 菜单。

Now scroll downin the Rendering section. It's often below the fold.

现在向下滚动渲染部分。它通常低于折叠。

回答by Anil Vangari

Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:

根据 rflnogueira 的回答，当前的 Chrome 设置 (40.0.*) 将如下所示：

回答by Tatu Ulmanen

Just show the print stylesheet in your browser using media="screen"while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.

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

回答by jso1919

2019 - Updated instructions

2019 - 更新说明

1. Open Chrome inspector
   • From Mac=> option+ command+ i
   • From Windows=> F12

2. Click on the little 3 dots, customize and control devTools

3. Select More Tools

4. Select Rendering

5. Scroll to the bottom to Emulate CSS Media

6. Select printfrom the down arrow

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

2. 点击小3点， customize and control devTools

3. 选择 More Tools

4. 选择 Rendering

5. 滚动到底部 Emulate CSS Media

6. print从向下箭头中选择

回答by Blowsie

If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.

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

Heres an example of how this can be done with JavaScript / jquery

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