调试打印样式表的建议?

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

更改代码点重新加载

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

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

我是不是错过了一些工具?WebKit的检查器有“假装这是分页媒体”复选框吗?Firebug(战栗)能施展什么魔法吗?

当前回答

如果你有一个打印函数，将页面的内容重写到一个新的窗口，并引用打印样式表，你会更好地了解它在纸上的样子，你也可以用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();
        });

2011-02-28 11:32:13

其他回答

这里有一个如何用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();
        });

2011-02-28 11:32:13

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

打开DevTools检查器(mac: Cmd + Shift + C, windows: Ctrl + Shift + C) 单击位于DevTools面板左上角的Toggle设备模式图标。(windows: Ctrl+Shift+M, mac: Cmd+Shift+M)。单击浏览器视口右上角的More overrides图标，打开devtools抽屉。然后，在“模拟”抽屉中选择“媒体”，并选中“CSS媒体”复选框。

这应该能奏效。

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

来源:谷歌DevTools page*

2013-01-18 13:55:39

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

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

2021-04-08 16:21:16

我使用宏来发送重复的按键和鼠标点击。在Windows下，AutoHotKey是一个很棒的软件，在OS X下，你可以读到Automator，这是OsX的替代AHK。

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

2011-02-28 19:30:39

Chrome的UI从v53开始就不一样了。

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