打印样式表的建议？ [英] Suggestions for debugging print stylesheets?

问题描述

我最近一直在开发一个网站的打印样式表，我意识到，我有失去了有效的方法来调整它。在屏幕布局上进行重新加载循环是一件事情：

• 更改代码


• command-tab


• 重新载入

，但整个过程're try to print：

• 更改代码


• 命令标签


• 重新载入


• 打印


• 在打印预览图片时输入squint






这里有我缺少的工具吗？ WebKit的检查员有一个假装这是分页的媒体复选框？是否有Firebug（ shudder ）可以做的一些魔法？

解决方案

在Chrome的检查器。



1. 打开DevTools检查器（mac： Cmd + Shift + < strong>切换设备模式图标，位于DevTools的左上角面板。 （window： Ctrl + Shift + M ，mac： Cmd + Shift + M ）。


2. 点击更多覆盖
   

3. 然后，选择媒体

em>，然后选中 CSS media 复选框。






/ p>



更新：DevTools中的菜单已更改。
现在可以通过点击three-dots右上角>更多工具>渲染设置>模拟媒体>打印。





源： Google DevTools页面 *




I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:

• change code
• command-tab
• reload

but that whole process gets much more arduous when you're trying to print:

• change code
• command-tab
• reload
• print
• squint at print-preview image
• open PDF in Preview for further inspection

Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?

解决方案

There is an option for that in Chrome's inspector.

1. Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
2. Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
3. Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.

4. Then, select Media in the emulation drawer, and check the CSS media checkbox.

This should do the trick.

Update: The menus have changed in DevTools. It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

Source: Google DevTools page*

这篇关于打印样式表的建议？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！