开发和测试打印样式表的更快方法(避免每次打印预览)? [英] Faster way to develop and test print stylesheets (avoid print preview every time)?

问题描述

这是我现在的流程:

1. 保存对 print.css 的更改
2. 打开浏览器并刷新页面.
3. 右键单击并选择打印">打印预览"(Firefox，但适用于任何浏览器)

让我烦恼的是第 3 步，我想知道是否可以使用插件或其他东西将其从流程中删除.只需选择将页面作为印刷媒体查看，然后只需刷新即可查看更改.

你如何测试你的打印样式表?刷新后总是点击打印预览吗?

解决方案

您可以使用

更新 28/06/2016

关于 Chrome DevTools 的 Google Developers 文档和模拟媒体"选项已针对 Chrome >51 更新:

更新 24/05/2016

设置的命名再次更改:

<块引用>

要在打印预览模式下查看页面，请打开 DevTools 主菜单，选择更多工具 > 渲染，然后启用模拟 CSS 媒体strong> 复选框，下拉菜单设置为打印.

This is my process right now:

1. Save changes to print.css
2. Open browser and refresh page.
3. Right-click and choose Print > Print Preview (Firefox, but any browser really)

It's step 3 that bugs me and I'm wondering if it's possible to cut it out of the process with a plugin or something. Just choose to view a page as print media, and then simply refresh to see the changes.

How do you test your print stylesheets? Do you always click print preview after a refresh?

解决方案

You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.

UPDATE 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

To view a page in print mode:
1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))
2. Start typing Rendering and select Show Rendering.
3. For the Emulate CSS Media dropdown, select print.

---

UPDATE 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

UPDATE 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

1. Open Chrome DevTools
2. Hit esc on your keyboard
3. Click ⋮ (vertical ellipsis)
4. Choose Rendering
5. Tick Emulate print media

See screenshot below:

UPDATE 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.

UPDATE 24/05/2016

The naming of settings have changed once again:

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.

这篇关于开发和测试打印样式表的更快方法(避免每次打印预览)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！