你如何调试可打印的CSS？

Question

我一直使用Firebug和IE Developer Toolbar来调试棘手的CSS问题.但偶尔会出现一个棘手的错误,只有在你打印页面时才出现.

您使用哪些技术/工具来诊断此类问题？有没有办法在打印视图中更多地使用传统的CSS调试工具？

更新:我已经使用PDF打印机以避免浪费纸张; 我的问题是我无法右键单击打印的DOM.下面的一些其他答案非常有用,谢谢.:-)

Answer 1

刚刚发现一个注释李penkman了解Firefox的一个新功能在这里:按Shift-F2在Firefox打开浏览器控制台(不JavaScript控制台),然后输入media emulate print.工作绝对好!

更新于2018年9月:从Firefox 62开始,开发者控制台已经消失.现在似乎没有办法激活打印样式仿真.

遗憾的是,此功能与实际打印功能不同.[THIS](http://i.imgur.com/94mfKAt.png)启用了`media emulate print`选项,而[THIS](http://i.imgur.com/SpKLdZz.png)是实际的Firefox的打印预览. (8认同)
一旦我关注你实际上所说的事情而不是假设我知道,这对我来说非常有用.这不在F12工具的控制台中,它是开发人员工具栏.正是我在寻找什么. (6认同)
自Firefox 62起,开发人员工具栏已被删除:https://developer.mozilla.org/en-US/docs/Tools/GCLI.请参阅/sf/ask/3351397871/ (4认同)

Answer 2

在Chrome 51中:

打开devtools(CTRL + F12或CTRL + SHIFT + I)并单击...菜单,单击More Tools > Rendering settings以打开Rendering开发人员控制台的选项卡(或者,如果控制台已打开,只需导航到此选项卡).

在该选项卡中,选中并选中复选框Emulate Media: print.

Answer 3

我使用WebDeveloper插件和CSS - >按媒体类型显示CSS - >打印来查看打印时的CSS.Firebug的检查实用程序使用插件过滤的CSS.

可悲的是,该视图甚至与Firefox实际打印的内容并不相似(在打印时似乎也使用仅限屏幕的样式).在Firebug中编辑样式时,我没有找到比频繁使用打印预览选项更好的选项. (20认同)
它似乎只使用打印样式.一个很好的技巧是不仅要设置您的特定媒体类型,还要将所有其他样式表设置为media ="all,print".适合我:-) (3认同)

Answer 4

在 Firefox 69 中，我找到了一个按钮来模拟打印媒体。只需打开开发人员工具（F12）并单击检查器。切换按钮是下方屏幕截图突出显示部分中最左侧的图标，看起来像一张纸。

Answer 5

我在任务栏中使用了实时css编辑工具,它可以实时修改你的css,实时查看结果.

我还在你的网站上使用了大纲功能,其中div和鼠标悬停在你的网站上.找到div真的很有帮助.

有关打印问题,请转到CSS - >按媒体显示CSS样式 - >打印

在这一个中有很多其他工具,我可能使用了大约10%的工具.

试试也许你会发现一些有用的东西.