调试打印样式表的建议?

我最近一直在为一个网站设计打印样式表，我意识到我不知道如何有效地调整它。为屏幕布局设置重载循环是一回事:

  • 更改代码
  • 点
  • 重新加载

但当你试图打印时，整个过程会变得更加艰巨:

  • 更改代码
  • 点
  • 重新加载
  • 打印
  • 斜视打印预览图像
  • 在预览中打开PDF以作进一步检查

我是不是错过了一些工具?WebKit的检查器有“假装这是分页媒体”复选框吗?Firebug (不寒而栗)可以做一些魔法吗?

101330 次浏览
小开

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

小开

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

使用@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激光打印。

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

小开

如果你有一个打印函数，将页面的内容重写到一个新的窗口，并引用打印样式表，你会更好地了解它在纸上的样子，你也可以用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();
});
小开
我使用宏来发送重复的按键和鼠标点击。 在Windows下，AutoHotKey是一个很棒的软件，在OS X下，你可以读到Automator sort of OsX的替代AHK.

在Windows下(在OS X下用Cmd替换Ctrl)“Ctrl-s /切换到Fx窗口，无论它在窗口打开的列表/ Ctrl-r”绑定到1个未使用的键避免无趣任务的挫折，最终将从肢体重复性劳损症中拯救我的手臂:)

小开

有一种简单的方法来调试你的打印样式表，而不需要切换HTML代码中的任何媒体属性(当然，正如指出的那样，它不能解决宽度/页的问题):

  • 使用Firefox + Web开发扩展。
  • 在Web开发人员菜单中，选择CSS /按媒体类型显示CSS /打印
  • 返回Web开发人员菜单，选择选项/持久化功能
现在你正在查看打印的CSS，你可以无限地重新加载你的页面。 一旦你完成了，取消选中“Persist Features”并重新加载，你将再次获得屏幕CSS

HTH。

小开

enter image description here

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

小开

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

  1. 打开DevTools检查器(mac: Cmd + 转变 + C, windows: Ctrl + 转变 + C)
  2. 点击位于DevTools面板左上角的切换设备模式图标切换设备模式按钮。(windows: Ctrl + 转变 + 米,麦克:Cmd + 转变 + 米)。
  3. 点击浏览器视口右上角的更多的覆盖 more overrides图标，打开devtools抽屉。

  4. 然后，在模拟抽屉中选择媒体，并选中CSS媒体复选框。

    enter image description here

这应该能奏效。

更新:DevTools中的菜单已经改变。 现在可以通过点击右上角的“三点”菜单> More Tools > Rendering Settings > simulation media > print.

来源:谷歌DevTools页面 *

小开

按照rflnogueira的回答，当前的Chrome设置(40.0.*)将如下所示:

chrome print css emulation

小开

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

enter image description here

小开

Chrome 48你可以在呈现选项卡中调试打印样式。

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

< p > < em >编辑< / em > < br > 对于Chrome 58，位置已更改为Web检查>菜单>更多工具>渲染

小开

Chrome的UI是不同的再一次作为v53。

我不需要经常使用这个功能，但每当我使用这个功能时，我总是要花很长时间才能弄清楚Chrome团队从我上次燃烧周期试图追踪它到哪里去了。

注意这是。菜单中开发工具面板 不的…菜单在Chrome浏览器窗格。

打印机预览as v53 on MacOS

现在向下滚动在渲染部分。它通常在底层。

小开

2019 -更新说明

  1. 打开Chrome inspector
    • From Mac => option + command + i
    • 从窗户 => F12
      • 李< / ul > < / >

    • 点击小3个点，customize and control devTools enter image description here

    • 选择More Tools

    • 选择Rendering

    • 滚动到底部Emulate CSS Media

    • 从向下箭头中选择print

enter image description here

小开

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

enter image description here

它的一个缺点是不能清楚地描绘页面边界。


提交答案