你如何调试可打印的 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/726825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you debug printable CSS?
提问by Dan Fabulich
I use Firebug and IE Developer Toolbar all the time to debug tricky CSS problems. But occasionally, a tricky bug comes up that only appears when you go to print the page.
我一直使用 Firebug 和 IE Developer Toolbar 来调试棘手的 CSS 问题。但偶尔会出现一个棘手的错误，它只会在您打印页面时出现。
What techniques/tools do you use to diagnose problems like this? Is there a way to get more use out of traditional CSS debugging tools in print view?
您使用哪些技术/工具来诊断此类问题？有没有办法在打印视图中更多地利用传统的 CSS 调试工具？
Updated: I already use a PDF printer to avoid wasting paper; my problem is that I can't right-click on the printed DOM. Some of the other answers below are quite helpful, thanks. :-)
更新：我已经使用了 PDF 打印机以避免浪费纸张；我的问题是我无法右键单击打印的 DOM。下面的一些其他答案非常有帮助，谢谢。:-)
采纳答案by Simon Sarris
In Chrome 51:
在 Chrome 51 中：
Open devtools (CTRL + F12or CTRL + SHIFT + I) and click on the ...menu, click More Tools > Rendering settingsto open the Renderingtab of the developer console (alternatively, if the console is open just navigate to this tab).
打开 devtools（CTRL + F12或CTRL + SHIFT + I）并单击...菜单，单击More Tools > Rendering settings以打开Rendering开发人员控制台的选项卡（或者，如果控制台已打开，只需导航到此选项卡）。
In that tab, select and check the box for Emulate Media: print.
在该选项卡中，选择并选中 框Emulate Media: print。
回答by Wolfgang Ulmer
Just found a comment by lee-penkmanabout a new feature in Firefox here: Press Shift-F2in Firefox to open the browser console (not the javascript console), then enter media emulate print. Works absolutely great!
刚刚发现一个注释李penkman了解Firefox的一个新功能在这里：按Shift-F2在Firefox打开浏览器控制台（不JavaScript控制台），然后输入media emulate print。绝对好用！
Update Sept. 2018: Starting with Firefox 62, the developer console has disappeared. There doesn't seem to be a way to activate print style emulation now.
2018 年 9 月更新：从 Firefox 62 开始，开发者控制台消失了。现在似乎没有办法激活打印样式仿真。
Update Nov. 2019: It seems that in Firefox 69, there is again a new button for print style emulation. See the other answer on this page: https://stackoverflow.com/a/58015662/195476
2019 年 11 月更新：似乎在 Firefox 69 中，再次有一个用于打印样式模拟的新按钮。请参阅此页面上的其他答案：https: //stackoverflow.com/a/58015662/195476
回答by tvanfosson
I use the WebDeveloper plugin and the CSS --> Display CSS by Media Type --> Print to view the CSS as it would when printed. Firebug's inspection utilities work with the CSS as filtered by the plugin.
我使用 WebDeveloper 插件和 CSS --> 按媒体类型显示 CSS --> 打印来查看 CSS，就像打印时一样。Firebug 的检查实用程序与由插件过滤的 CSS 一起使用。
回答by Michael B.
I use Firefox and the developer toolbar.
我使用 Firefox 和开发者工具栏。
I use the real time css edit tool in the task bar, it's pretty usefull to modify your css on the fly on see the results in real time.
我使用任务栏中的实时 css 编辑工具，实时修改您的 css 非常有用，可以实时查看结果。
I also use the outline feature, which the div and stuff like that on mouse over, on your website. Really helpful to find div.
我还在您的网站上使用了大纲功能，即鼠标悬停时的 div 和类似内容。找到div真的很有帮助。
For the print problem, go to CSS -> Display CSS style by media -> print
对于打印问题，转到 CSS -> 按媒体显示 CSS 样式 -> 打印
There are a lot of other tool available in this one, I probably use about 10% of it.
这个工具还有很多其他可用的工具，我大概使用了其中的 10%。
Try maybe you find something usefull.
试试也许你会发现一些有用的东西。
回答by Oleg Belousov
In chrome developer tools (F12 \ Ctrl(cmd on mac) + Shift + C): In the emulation tab (From Chrome 32 onward IMHO), there is a tab for 'Media'.
在 Chrome 开发人员工具中（F12 \ Ctrl（Mac 上的 cmd）+ Shift + C）：在仿真选项卡中（从 Chrome 32 起恕我直言），有一个“媒体”选项卡。
There you can check the media emulation checkbox and select the media you would like to emulate ('print', 'screen' etc.)
在那里您可以选中媒体模拟复选框并选择您想要模拟的媒体（“打印”、“屏幕”等）
回答by mzuther
In Firefox 69, I found a button to simulate print media. Just open the Developer Tools (F12) and click on Inspector. The toggle button is the leftmost icon that's in the highlighted section in the screenshot below, the one that looks like a sheet of paper.
在 Firefox 69 中，我找到了一个按钮来模拟打印媒体。只需打开开发人员工具（F12）并单击检查器。切换按钮是下方屏幕截图突出显示部分中最左侧的图标，看起来像一张纸。
回答by danblaker
How about just listing your print CSS last, and removing the "print" condition from your CSS link or import statement? Then you're debugging the print CSS in the browser window.
最后列出您的打印 CSS，然后从您的 CSS 链接或导入语句中删除“打印”条件怎么样？然后在浏览器窗口中调试打印 CSS。
回答by Gerfried
I always used web developer toolbar (as described in the other answers), but Firebug seems to miss some styles from time to time. So I added a Bookmark to my browser and added the following Javascript as URL of the bookmark. Now I can simply switch to print style by clicking the bookmark:
我总是使用 Web 开发人员工具栏（如其他答案中所述），但 Firebug 似乎不时错过一些样式。所以我在浏览器中添加了一个书签，并添加了以下 Javascript 作为书签的 URL。现在我可以通过单击书签简单地切换到打印样式：
javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()
The code above finds all stylesheet links, tests if it is media=print and if so it changes it to media=all (and hides all media=screen by replacing it with media=dontshow) and reloads the stylesheets by adding a time token to the URL. The basic reload script is from someone else, I added media part. This works great for me!
上面的代码查找所有样式表链接，测试它是否为 media=print，如果是，则将其更改为 media=all（并通过将其替换为 media=dontshow 来隐藏所有 media=screen）并通过添加时间标记来重新加载样式表网址。基本的重新加载脚本来自其他人，我添加了媒体部分。这对我很有用！
This would be the more readable version of the JavaScript URL above for explanation:
这将是上述 JavaScript URL 的可读性更强的版本以供解释：
javascript: (function() {
var h, a, f;
a = document.getElementsByTagName('link');
for (h = 0; h < a.length; h++) {
f = a[h];
if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
var g = f.href.replace(/(&|\?)forceReload=\d /, '');
if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
if (f.media.toLowerCase().match(/print/)) f.media = "all";
f.href = g(g.match(/\?/) ? '&' : '?')
'forceReload=' (new Date().valueOf());
}
}
})()
回答by evilpenguin
I use the Adobe PDF virtual printer, because it's the closest thing to a real printer you'd get, without wasting ink and paper.
我使用 Adobe PDF 虚拟打印机，因为它最接近真实打印机，而且不会浪费墨水和纸张。
Anyway, it's recommended to have a separate CSS for prints, with much simpler graphics and less of the images you use just for design purposes.
无论如何，建议为打印使用单独的 CSS，具有更简单的图形和更少的用于设计目的的图像。
