调试打印样式表的建议?

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

更改代码点重新加载

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

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

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

当前回答

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

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

注意这是。菜单在开发工具窗格，而不是…菜单在Chrome浏览器窗格。

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

2017-02-16 21:02:56

其他回答

2019 -更新说明

打开Chrome检查器从Mac =>选项+命令+ i 从Windows => F12 点击小3点，自定义和控制devTools 选择更多工具选择呈现滚动到底部以模拟CSS媒体从向下箭头选择打印

2019-08-20 17:28:52

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

2015-02-12 17:05:32

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

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

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

2016-02-03 17:04:54

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