Question

我使用（像往常一样）@media print规则来指定网页的打印应该如何与在线版本不同。这很有效，但测试真的很难。我通常要做的是以下步骤：

为screen和print创建不同的样式。
以屏幕模式启动页面
打印页面，例如到PDF打印机。
查看结果。
尝试找出行为错误的规则。

我想做什么（但无法使用任何浏览器）：

为screen和print创建不同的样式。
以屏幕模式启动页面
进入预览打印模式（例如Opera，Firefox可用）
使用Firebug（Firefox）或Dragonfly（Opera）等可用工具检查DOM和当前样式。
动态更改CSS，重新加载页面，然后再次查看结果和DOM。

是否有任何浏览器或浏览器，插件和流程组合可以获得类似的结果？如果您有如何更改文件组织的想法，只需进行最少的更改即可获得所需结果，欢迎您。

Answer 1

Chrome开发者工具具有此功能。

打开要测试的网页的Chrome开发者工具。
如果尚未打开，请打开抽屉。（按 Esc 。）
打开仿真标签。
点击左侧菜单中的媒体。
检查 CSS媒体，然后从选择框中选择打印

来源：https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

Answer 2

名为“Web Developer”的Firefox插件（https://addons.mozilla.org/en-US/firefox/addon/web-developer/）有一个“按媒体类型显示CSS”选项。

Answer 3

您是否尝试使用Print Friendly Google Chrome扩展程序。

这是一个很好的扩展，可以添加一个按钮并在点击时生成网页的pdf。希望这可能比您当前的流程更容易。

Answer 4

如果您指定打印＆amp;屏幕CSS规则在单独的文件中，您可以使用Chrome开发人员工具轻松完成此操作。加载页面并打开开发人员工具。在“元素”视图中，编辑media =“print”行，使其显示media =“all”。

例如，如果您链接样式表，如：

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

更改：

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

阅读：

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

现在，您将在浏览器窗口中将打印样式应用于副本。您可以像使用任何其他网页一样导航样式和元素。

Answer 5

当打印布局需要修改通用样式时，我发现这种做法对于打印样式很有帮助。

创建使用@media print {}构建打印样式的打印样式表
最后应用该样式表
在处理打印样式时，暂时注释掉构成打印样式的行
以习惯的方式使用Firebug和Web Developer
取消注释媒体包围

类似的东西：

    
/* @media print { */

    #sidebar {display:none;}

/* } */

Answer 6

我找到了一个与Using Rails 3.1 assets pipeline to conditionally use certain css启发的问题不同的解决方案。以下是它的工作原理：

在主HTML文件中使用以下针对样式表的指令：

<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

隔离样式表中
的所有规则
- 适用于屏幕和打印（样式表：application.css）
- 仅适用于屏幕（样式表：screen.css）
- 仅适用于打印（样式表：print.css）

在测试打印网页时，切换主HTML文件中的样式表：

<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

注意media="print|screen"的第二行和第三行中的开关。

结果，您现在可以调用主HTML文件，并查看在正常条件下打印出来的样子。您通常使用的所有工具（Firefox Firebug，Chrome开发者工具，Opera DragonFly ......）都可以正常工作，因此您可以检查DOM，查看框，动态更改CSS，然后重新加载页面

对我来说效果很好，如果我会遇到一些弊端，我会回来并注明这一点。

如何使用在线工具测试浏览器的打印输出？

6 个答案: