blocks|key|1587760|text|在Chrome+51中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1587761|​|1587762|📷|atomic|offset|length|1587763|1587764|打开devtools+(CTRL+%2B+F12或CTRL+%2B+SHIFT+%2B+I)并单击...菜单，单击More+Tools+>+Rendering+settings打开开发人员控制台的Rendering选项卡(或者，如果控制台是打开的，只需导航到此选项卡)。|style|CODE|1587765|在该选项卡中，选择并选中Emulate+Media:+print复选框。|1587766|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1086c91bdee7aa8f87540d5b4b8fd1b1.png|imageAlt^0|0|0|0|1|0|0|0|C|A|N|G|17|3|1F|V|2K|9|0|C|K|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@$G|11|H|12|1|13]]|A|$]]|$1|I|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@$G|16|H|17|L|M]|$G|18|H|19|L|M]|$G|1A|H|1B|L|M]|$G|1C|H|1D|L|M]|$G|1E|H|1F|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@$G|1H|H|1I|L|M]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]]]

In Chrome 51:

<a href="https://i.stack.imgur.com/mV2ra.png"><img src="https://i.stack.imgur.com/mV2ra.png" alt="Chrome developer tools"></a>

Open devtools (<code>CTRL + F12</code> or <code>CTRL + SHIFT + I</code>) and click on the <code>...</code> menu, click <code>More Tools &gt; Rendering settings</code> to open the <code>Rendering</code> tab of the developer console (alternatively, if the console is open just navigate to this tab).

In that tab, select and check the box for <code>Emulate Media: print</code>.

blocks|key|1372205|text|我使用WebDeveloper插件和CSS+-->+Display+CSS+by+Media+Type+-->+Print来查看打印出来的CSS。Firebug的检查实用程序与插件过滤的CSS一起工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1372206|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1587843|text|在Firefox69中，我发现了一个模拟打印媒体的按钮。只需打开开发人员工具(F12)并单击Inspector。切换按钮是最左边的图标，它位于下面屏幕截图中突出显示的部分，看起来像一张纸。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1587844|​|1587845|📷|atomic|offset|length|1587846|1587847|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5efb1088c0ea8ab87580caa8630b5967.png|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

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.

<a href="https://i.stack.imgur.com/3VdLo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3VdLo.png" alt="enter image description here"></a>

blocks|key|1587378|text|我使用火狐和developer+toolbar。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1587379|我使用任务栏中的实时css编辑工具，它非常有用，可以在飞行中修改css，并实时查看结果。|1587380|我还在你的网站上使用了大纲功能，比如div和鼠标经过的东西。找到div真的很有帮助。|1587381|对于打印问题，请转到CSS+->显示CSS+style+by+media+->+print|1587382|在这个工具中有很多其他可用的工具，我可能会使用其中的10%25。|1587383|也许你会发现一些有用的东西。|1587384|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/en-US/firefox/addon/60^0|6|H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

I use Firefox and the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="noreferrer">developer toolbar</a>.

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.

I also use the outline feature, which the div and stuff like that on mouse over, on your website. Really helpful to find div.

For the print problem, go to CSS -> Display CSS style by media -> print

There are a lot of other tool available in this one, I probably use about 10% of it.

Try maybe you find something usefull.

blocks|key|1372577|text|在chrome开发者工具中(F12+\Ctrl(mac上的cmd)%2B+Shift+%2B+C)：在仿真选项卡中(从Chrome32开始)，有一个“媒体”选项卡。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1372578|您可以在此处选中媒体模拟复选框，并选择要模拟的媒体(‘打印’、‘屏幕’等)。|1372579|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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'.

There you can check the media emulation checkbox and select the media you would like to emulate ('print', 'screen' etc.)

blocks|key|1372403|text|将打印CSS列在最后，并从CSS链接或导入语句中删除"+print“条件如何？然后在浏览器窗口中调试print+CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1372404|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1372124|text|我使用Adobe+PDF虚拟打印机，因为它是您能得到的最接近真实打印机的东西，而且不会浪费墨水和纸张。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1372125|无论如何，建议为打印使用单独的CSS，具有简单得多的图形和较少的仅用于设计目的的图像。|1372126|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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.

blocks|key|1372481|text|我总是使用web+developer工具栏(如其他答案中所述)，但Firebug似乎时不时地会错过一些样式。因此，我在浏览器中添加了一个书签，并添加了以下Javascript作为书签的URL。现在我可以简单地通过单击书签切换到打印样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1372482|javascript:(function(){var%2520h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h%2B%2B){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'%7C%7Cf.media=='screen')){var%2520g=f.href.replace(/(&%7C%255C?)forceReload=\d%2B/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g%2B(g.match(/\?/)?'&':'?')%2B'forceReload='%2B(new%2520Date().valueOf());}}})()|code-block|syntax|javascript|1372483|上面的代码查找所有样式表链接，测试它是否为media=print，如果是，则将其更改为media=all+(并通过将其替换为media=dontshow来隐藏所有media=screen+)，并通过向URL添加时间标记来重新加载样式表。基本的重载脚本来自其他人，我添加了媒体部分。这对我来说很有用！|1372484|以下是上面解释的JavaScript网址的可读性更好的版本：|1372485|javascript:+(function()+{
++++var+h,+a,+f;
++++a+=+document.getElementsByTagName('link');
++++for+(h+=+0;+h+<+a.length;+h%2B%2B)+{
++++++++f+=+a[h];
++++++++if+(f.rel.toLowerCase().match(/stylesheet/)+&&+f.href+&&+(f.media+==+'print'+%7C%7C+f.media+==+'screen'))+{
++++++++++++var+g+=+f.href.replace(/(&%7C\?)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());
++++++++}
++++}
})()|1372486|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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:

<pre><code>javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h&lt;a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&amp;&amp;f.href&amp;&amp;(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&amp;|%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(/\?/)?'&amp;':'?')+'forceReload='+(new%20Date().valueOf());}}})()
</code></pre>

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!

This would be the more readable version of the JavaScript URL above for explanation:

<pre><code>javascript: (function() {
 var h, a, f;
 a = document.getElementsByTagName('link');
 for (h = 0; h &lt; a.length; h++) {
 f = a[h];
 if (f.rel.toLowerCase().match(/stylesheet/) &amp;&amp; f.href &amp;&amp; (f.media == 'print' || f.media == 'screen')) {
 var g = f.href.replace(/(&amp;|\?)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(/\?/) ? '&amp;' : '?')
 'forceReload=' (new Date().valueOf());
 }
 }
})()
</code></pre>

blocks|key|1372248|text|如果您不想付款，请打印到Microsoft+XPS+Document+Writer。如果你有资金，也可以使用SnagIt+(网站上的免费试用)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1372249|entityMap|0|LINK|mutability|MUTABLE|url|http://www.techsmith.com/^0|1I|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Print to Microsoft XPS Document Writer if you don't want to pay money. Or use <a href="http://www.techsmith.com/" rel="nofollow noreferrer">SnagIt</a> if you've got the funds (free trial on site).

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.

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?

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. :-)

How do you debug printable CSS?

我一直使用Firebug和IE开发者工具栏来调试棘手的CSS问题。但偶尔会出现一个棘手的bug，只有在您打印页面时才会出现。您使用哪些技术/工具来诊断此类问题？有没有办法在打印视图中更多地使用传统的CSS调试工具？更新:我已经使用了PDF打印机，以避免浪费纸张；我的问题是我不能右击打印的DOM。下面的一些其他答案非常有帮助，谢谢。:-)

问如何调试可打印的CSS？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试可打印的CSS？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试可打印的CSS？
EN