有关调试打印样式表的建议？

238

我最近一直在为网站设计打印样式表，但我意识到我对有效的调整方法一无所知。具有重新加载周期以处理屏幕上的布局是一回事：

  • 更改密码
  • 命令标签
  • 重装

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

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

我这里缺少工具吗？WebKit的检查器是否具有“假装此页面媒体”复选框？Firebug（颤抖）能做些魔术吗？

css  printing  firebug  google-chrome-devtools  web-inspector 
— 吉姆·普尔斯
source
4
支持它的浏览器（例如Firefox）的“打印预览”功能如何？我已经（大多数情况下准确地）调试了一些网页以进行打印。
— HalilÖzgür11年
2
— 2012年
3
在Firefox中，使用Shift + F2打开“开发人员工具栏”，键入“媒体仿真打印”（或“ emu” + Tab +“打印”），按Enter。
— Marcello Nuccio
@MarcelloNuccio这应该是一个答案。stackoverflow.com/a/28873496/1696030得到了一些积极的比较。“开发人员工具栏”是一个命令行界面，因此有点误导。
— Volker E.

Answers:

327

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

  1. 打开DevTools检查器（mac：Cmd+ Shift+ C，Windows：Ctrl+ Shift+ C）
  2. 单击位于DevTools面板左上角的Toggle设备模式图标切换设备模式按钮。（窗口：Ctrl+ Shift+ M，MAC：Cmd+ Shift+ M）。
  3. 单击浏览器视口右上角的“ 更多替代” 更多替代图标，以打开devtools抽屉。

  4. 然后，在仿真抽屉中选择“ 媒体 ”，然后选中“ CSS媒体”复选框。

    在此处输入图片说明

这应该可以解决问题。

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

资料来源：Google DevTools页面 *

— 拉斐尔·诺盖拉（Rafael Nogueira）
source
5
谢谢，那是我一直在寻找的东西，找不到它了：/快捷方式不再起作用了。我只在右下角做F12 +齿轮图标，然后设置在“替代”标签下，
— Aurelien
18
不幸的是，它不是100％准确的：(
— maazza
9
在Chrome中32.0.1700.14 beta-m Aura，缺少“模拟CSS媒体[打印]” ：(
— Rocket Hazmat 2013年
11
此答案需要更正。从Chrome 48开始，打印样式表仿真器不再位于“仿真”下，而位于“呈现”下。
— chharvey
13
检查器中的三点菜单（右侧）>更多工具>渲染设置>模拟媒体>打印
— allicarn
74

我假设您希望在不使用HTML到PDF的情况下尽可能多地控制打印窗口...使用@media屏幕进行调试-@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/

— 道森
source
只是想评论说这种方法非常聪明。稍微调整窗口大小以“切换”打印样式要比使用打印预览功能容易得多。尽管有时仍然需要这样做以实现IE兼容性，但这对于打印样式的初始迭代非常有用。
— chucknelson 2011年
@查克。谢啦。嘿，我意识到我的演示是脱机的，所以为此创建了一个小提琴。jsfiddle.net/dNEmT
— Dawson
20

使用Chrome 48，您可以在“ 渲染”标签中调试打印样式。

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

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

— 宣讲
source
4
Chrome 49：F12（开发人员控制台）-> ESC（控制台）->渲染->模拟打印介质
— user1477388 2016年
19

在Chrome v41中，它存在，但是位置稍有不同。

在此处输入图片说明

— 约翰特雷普纳
source
3
在V53它的渲染选项卡上，而不是在底部有一个为模拟媒体复选框，这将使一个下拉菜单，你可以选择打印，类似于提供屏幕截图
— 詹姆士·格雷
16

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

  • 使用Firefox + Web Developer扩展。
  • 在“ Web开发人员”菜单中，选择“ CSS” /“按媒体类型显示CSS” /“打印”
  • 返回“ Web开发人员”菜单，选择“选项” /“持久性功能”

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

HTH。

— 胶囊
source
7
呈现的效果与打印预览大不相同。也许这是我的CSS中的一个怪癖。无论如何，它不能解决问题。谢谢。
— heartpunk 2011年
是的，对我来说也完全不同。我遵循了这个jsfiddle（jsfiddle.net/2wk6Q/3），并且打印预览显示页面具有红色边距，但这完全不同。
— duality_ 2013年
1
我必须说，这种“解决方法”最适合我。也许我很幸运，这就是为什么本机打印屏幕和Web开发人员打印屏幕之间只有微小差异的原因，但是它一定可以帮助我找出为什么会出现差距以及最重要的原因-我可以使用Firebug遍历代码，看看会发生什么上
— 埃里克Čerpnjak
13

Chrome浏览器的用户界面是不同又为V53的。

我不需要经常使用此功能，但是每当我使用此功能时，我便会花很长的时间来弄清Chrome团队自上次刻录循环以查找它以来，将其移至何处。

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

从Mac OS v53开始的打印机预览

现在，在“渲染”部分中向下滚动。它通常处于折叠之下。

— TrophyGeek
source
1
您刚刚为我节省了print.css调试的日子。你真棒！
— zazvorniki
5

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

— 塔图·乌尔曼宁（Tatu Ulmanen）
source
14
除非正常的浏览模式没有页面，所以我不知道内容将如何流动。普通浏览模式的宽度为一定数量的像素，而页面的宽度为一定数量的英寸或厘米。屏幕和打印之间存在与实现无关的根本差异。我想在这些之间进行调试。
— Jim Puls
1
在chrome上，仅使用此建议，呈现效果就大不相同。不行
— heartpunk
“页面”宽度并不是很难确定的，它的高度确实很困难。浏览器和打印机都将在11in头痛中发挥作用。网页是连续的长度。如果不能保证输出设备的类型和浏览器，我认为您不会每次都碰到它。使用HTML到PDF的方法是可行的，但这超出了您的问题范围。
— 道森
3

2019-更新说明

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

  2. 点击三个小点， customize and control devTools 在此处输入图片说明

  3. 选择 More Tools

  4. 选择 Rendering

  5. 滚动到底部 Emulate CSS Media

  6. print从向下箭头中选择

在此处输入图片说明

— jso1919
source
0

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

这是一个如何使用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();
        });
— 吹牛
source
2
这种方法的问题在于，如果用户只是在浏览器中选择“打印...”，则此javascript函数将永远不会被调用。
— 刘坚
您不需要向用户显示打印功能，可以根据需要将其仅用于调试目的
— Blowsie 2011年
这是针对浏览器已经完成的工作的过度设计的解决方案。只需对样式表分别使用media="print"和 media="screen"，并使用浏览器菜单或按键组合来调用打印预览。（在这种情况下，与打开弹出窗口没有什么不同）。如果您只是调试，请将该 media="screen"属性应用于打印样式，直到完成调试为止。
— ORyan 2015年
-1

在此处输入图片说明

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

— 山姆
source
1
众所周知，但这将需要使用与我们开发的渲染引擎不同的渲染引擎，并且仍然需要重载。谢谢。
— heartpunk 2011年
1
早在2011年，它就是仅在有限平台上的专有的，只能购买的软件，您需要付费才能获得调试开放式Web所需的功能。
— Volker E.
-7

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

在Windows下（在OS X下用Cmd替换Ctrl）“绑定到1个未使用的键”的“ Ctrl-s /切换到Fx窗口，无论它在打开的窗口的列表中/ Ctrl-r”都避免了无趣的任务带来的挫败感，最终将挽救我的手臂来自RSI :)

— 费利佩·阿尔斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.