有关调试打印样式表的建议?

CSS

GO阿飞

2020-03-24

我最近一直在为网站制作打印样式表,但我意识到我对有效的调整方法一无所知。具有重新加载周期以处理屏幕上的布局是一回事:

  • 变更密码
  • 命令标签
  • 重装

但是当您尝试打印时,整个过程变得更加艰巨:

  • 变更密码
  • 命令标签
  • 重装
  • 打印
  • 斜视打印预览图像
  • 在预览中打开PDF以进行进一步检查

我这里缺少工具吗?WebKit的检查器是否具有“假装这是页面媒体”复选框?Firebug(颤抖)能做些魔术吗?

第3683篇《有关调试打印样式表的建议?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
GO 2020.03.24

在此处输入图片说明

In DreamWeaver there is a toolbar that shows virtually any rendering option you want: screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc. This is what I use especially because it: instantly shows a preview with 1 single press of a button.

小小十三泡芙 2020.03.24

media="screen"在调试时使用浏览器显示打印样式表打印预览视图使用与普通浏览模式相同的渲染引擎,因此您可以使用该引擎获得准确的结果。

Stafan路易 2020.03.24

2019-更新说明

  1. 打开Chrome检查器
    • Mac => option+ command+i
    • Windows =>F12
  2. 点击三个小点, customize and control devTools 在此处输入图片说明

  3. 选择 More Tools

  4. 选择 Rendering

  5. 滚动到底部 Emulate CSS Media

  6. print从向下箭头中选择

在此处输入图片说明

Davaid阳光 2020.03.24

我使用宏重复发送按键和鼠标单击。在Windows下,AutoHotKey是一款出色的软件,在OS X下,您可以阅读有关Automator 的OsX替代AHK的信息

在Windows下(在OS X下用Cmd替换Ctrl),将“ Ctrl-s /切换到Fx窗口,无论它在打开的窗口列表中/ Ctrl-r”绑定到1个未使用的键,避免了无趣的任务带来的挫败感,最终将挽救我的手臂来自RSI :)

小哥GO 2020.03.24

按照rflnogueira的回答,当前的Chrome设置(40.0。*)将如下所示:

chrome打印css仿真

LEY蛋蛋 2020.03.24

有一种简便的方法可以调试打印样式表,而无需在HTML代码中切换任何媒体属性(当然,如前所述,它不能解决宽度/页面问题):

  • 使用Firefox + Web Developer扩展。
  • 在“ Web开发人员”菜单中,选择“ CSS” /“按媒体类型显示CSS” /“打印”
  • 返回“ Web开发人员”菜单,选择“选项” /“持久性功能”

现在,您正在查看打印CSS,并且可以无限期重新加载页面。完成后,取消选中“ Persist Features”并重新加载,您将再次获得屏幕CSS。

HTH。

十三 2020.03.24

在Chrome v41中,它存在,但是位置稍有不同。

在此处输入图片说明

GO 2020.03.24

使用Chrome 48,您可以在“ 渲染”标签中调试打印样式

单击检查器和“ 渲染设置”右上方的菜单图标

编辑
对于 Chrome 58,该位置已更改为 Web检查器>菜单>更多工具>渲染

宝儿 2020.03.24

Chrome浏览器的检查器中有一个选项。

  1. 打开DevTools检查器(mac:Cmd+ Shift+ C,Windows:Ctrl+ Shift+ C
  2. 单击位于DevTools面板左上角Toggle设备模式图标切换设备模式按钮(窗口:Ctrl+ Shift+ M,MAC:Cmd+ Shift+ M)。
  3. 单击浏览器视口右上角的更多替代” 更多替代图标以打开devtools抽屉。
  4. 然后,在仿真抽屉中选择“ 媒体 ”,然后选中“ CSS媒体”复选框。

    在此处输入图片说明

这应该可以解决问题。

更新:DevTools中的菜单已更改。 现在,可以通过单击右上角的“三点”菜单>“更多工具”>“渲染设置”>“模拟媒体”>“打印”来找到它。

资料来源:Google DevTools页面 *

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android