css - 开发和测试打印样式表的更快方法(避免每次打印预览)？

Question

这是我现在的流程:

1. 保存对 print.css 的更改
2. 打开浏览器并刷新页面。
3. 右键单击并选择“打印”>“打印预览”(Firefox，但实际上是任何浏览器)

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

您如何测试打印样式表？您总是在刷新后单击打印预览吗？

Answer 1

您可以使用 Chrome Media Type Emulation在帖子中接受 See print css in the browser .

2017 年 11 月 21 日更新

可以在此处找到更新的 DevTools 文档: 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.

---

2016 年 2 月 29 日更新

DevTools 文档已移动，上面的链接提供了不准确的信息。有关媒体类型仿真的更新文档可在此处找到: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.

2016 年 12 月 4 日更新

不幸的是，关于打印仿真的文档似乎没有更新。然而，打印媒体模拟器已经(再次)移动:

1. 打开 Chrome 开发者工具
2. 按键盘上的 esc
3. 点击⋮(竖省略号)
4. 选择渲染
5. 勾选模拟打印媒体

请看下面的截图:

2016 年 6 月 28 日更新

围绕 Chrome DevTools 和“模拟媒体”选项的 Google 开发者文档已针对 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.

2016 年 5 月 24 日更新

设置的命名再次更改:

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.