程序员经验分享-hwhale

关于调试打印样式表的建议？

2024-06-26

我最近一直在为一个网站制作打印样式表，我意识到我不知道如何有效地调整它。在屏幕布局上工作时有一个重新加载周期是一回事：

  • 更改代码
  • 命令选项卡
  • reload

但是当您尝试打印时，整个过程会变得更加困难：

  • 更改代码
  • 命令选项卡
  • reload
  • print
  • 眯着眼睛看打印预览图像
  • 在预览中打开 PDF 进行进一步检查

我在这里错过了哪些工具吗？ WebKit 的检查器是否有“假装这是分页媒体”复选框？ Firebug 有什么魔力吗（shudder） 可以做？


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

  1. Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
  2. Click on the Toggle device mode icon Toggle device mode button, located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
  3. Click on the More overrides more overrides icon in the top right corner of the browser viewport to open the devtools drawer.

  4. 然后，选择Media在仿真抽屉中，并检查CSS媒体复选框。

这应该可以解决问题。

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

Source: 谷歌开发者工具页面 https://developer.chrome.com/devtools*

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

printing

firebug

googlechromedevtools

webinspector

关于调试打印样式表的建议？ 的相关文章

  • 数据属性 CSS 选择器比类选择器更快吗？

    几个月前本文 http coding smashingmagazine com 2012 06 19 classes where were going we dont need classes 指出实际上可以在网站开发中完全避免类 我的问题

  • 文本区域标签垂直对齐：中间

    我试图将此文本区域的标签对齐在文本框的中间 但它不起作用 输出看起来像这样 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

  • 为什么在CSS中使用浮动时垂直对齐不能正常工作？

    我怎样才能使用vertical align也float in the div特性 这vertical align如果我不使用的话工作正常float 但如果我使用浮动 那么它不起作用 使用对我来说很重要float right对于最后一个 di

  • Flexbox 无法在 Safari 中工作，在 Web 检查器中被删除

    我在用着display flexbox对于包含多个正方形的 div 容器 使它们水平对齐 它在 Chrome 中工作正常 但在 Safari 8 0 中却不行 它被删除了 如下所示 grid overflow x hidden overfl

  • 拖动时如何改变光标？材质 CDK 拖放

    使用 Material CDK 库中的拖放行为 我尝试在拖动cdkDrag元素 例如 在这个堆栈闪电战 https stackblitz com edit angular b8kjj3光标是grab悬停时 我想把它改为grabbing拖动时

  • 匿名行内框是否包含空格？

    我阅读了 CSS2 1 规范 并在 匿名内嵌框 https www w3 org TR CSS22 visuren html anonymous部分 它显示了一个匿名内联框的示例 如下所示 p Some em emphasized em t

  • 带偏移量的 CSS 背景渐变

    我将渐变作为背景图像应用到我的身体上 然后我在顶部添加了 255px 偏移background position 0 255px 它看起来相当不错 除了一个小问题 当然渐变不是在页面底部结束 而是在下面 255px 处结束 有没有什么简单的

  • 检测 div 何时溢出

    我试图让我的网站根据屏幕的大小流动 我创建了这个 http jsfiddle net aboveyou00 7NeZz 1 http jsfiddle net aboveyou00 7NeZz 1 它运行得很好 当两个内部 div 适合时

  • 如何使用 AOS 触发向上滚动动画

    我正在使用 AOS 库 css 和 js 它可以帮助我创建每次用户向下滚动页面时触发的动画 我有一个问题 页面的顶部元素仅运行一次 因为 AOS 仅在向下滚动时触发它 我希望我的所有动画在每次用户向下和向上滚动时运行 我怎样才能做到呢 这是

  • XPS 文件中打印的重复图像

    首先 我想指出 我已将此作为错误向 Microsoft 提出 但他们目前不愿意修复它 我正在寻找一种解决方法或更好的方法来实现我想要做的事情 因为我们的客户认为这是一个相当重要的问题 The code 主窗口 xaml

  • 如何使CSS导航栏在窗口向下滚动时不移动？

    在我的网站上 我的背景图像始终保持居中 导航始终水平保持在同一位置 因此水平尺寸并不重要 它始终位于同一位置 我使用以下方法做到了这一点 nav list style none position fixed right 50 margin

  • 带 Bootstrap 选项卡的 Rails

    我有一个 Rails 4 应用程序 我正在尝试合并 Bootstrap 选项卡 阅读引导文档 它说这样做的一种方法不涉及任何js 我已经尝试了文档中的每种方法 但无法让它们在我的应用程序中工作 我目前的尝试是 ul class nav na

  • CSS 效果渲染具有“橡皮图章”效果的字体

    CSS中有没有有效的方法来渲染字体 使其看起来像橡皮图章 好像橡皮印章上的墨水覆盖在印刷材料上 更好的是将相同的效果应用于边框 就好像边框是橡皮图章的一部分一样 像这样 这与您正在寻找的内容很接近 它使用了覆盖伪元素以及mix blend

  • WeasyPrint HTML 到图像的转换：如何使图像大小适应内容？

    我需要将一些 HTML 转换为 Python 中的图像 我正在使用威易印刷 https weasyprint org 我希望图像大小能够适应内容 使用以下命令时 我得到的图像比内容大得多 A4 pip install weasyprint

  • 更改输入上的父 div [type=checkbox]：使用 css 检查[重复]

    这个问题在这里已经有答案了 我可以弄清楚如何在选中复选框时更改父 div 更改以下段落效果很好 在 Chrome 中尝试过这种方法但没有运气 HTML div div

  • 如何在CSS中水平对齐div

    我在一个容器内有三个子 div 我想水平对齐这些 div 我尝试使用CSSfloat财产 但圆圈正在变成椭圆形 标记代码 div class container info box clearfix div class circle div

  • Bootstrap 页脚不在底部

    我试图强制我的页脚位于网站底部 我不希望它在滚动时粘住 只是在向下滚动网页时出现在底部 目前 网页显示时页脚位于内容下方 我添加了这样的代码bottom 0 并发现它粘住了并且不适合我的网站 我还添加了这样的代码html body heig

  • 为什么视口宽度与实际显示宽度不匹配？

    Chrome 显示我的视口宽度为 1280px 然而 我的实际显示分辨率是2560x1600px 我使用的机器是13 3英寸的MacBook Pro 为什么视口不是 2560px 宽 使用没有任何区别 my display settings

  • 滚动条宽度：细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb

  • 如何在流体宽度表中使用省略号而不使每列大小相同？

    假设我的表中的列是id name description and phone The description列的长度为 1 255 个字符 但 id 最多只有 3 个字符 我希望列的大小适当 而不是每列的大小相同 我想要descriptio

随机推荐

  • 如何在 shell 中解码 URL 编码的字符串？

    我有一个文件 其中包含已编码的用户代理列表 例如 Mozilla 2F5 0 20 28Macintosh 3B 20U 3B 20Intel 20Mac 20OS 20X 2010 6 3B 20en 我想要一个 shell 脚本 它可以

  • admob 连接被拒绝

    我刚刚开始将 admob 添加到我的 Android 应用程序中 并开始使用 admob 网站上提供的横幅必需品示例 这是示例代码 public class BannerEssentials extends Activity Overrid

  • Azure DevOps管道“查看更改”显示错误的更改数量

    有人在构建中遇到过 查看xxx更改 中的数字错误这样的问题吗 我不知道为什么 但它不仅显示构建之间的提交 还显示其他所有内容 例如 我在发布之间进行了两次提交 但它显示了 300 多个更改 我的 git 显示如下 我希望 查看更改 仅显示

  • 如何在迭代时从地图中删除？

    迭代时如何从地图中删除 喜欢 std map

  • ROUTINE_NAME 和 SPECIFIC_NAME 之间有什么区别？

    在 INFORMATION SCHEMA ROUTINES 视图中 存在 ROUTINE NAME 和 SPECIFIC NAME 按照MSDN http msdn microsoft com en us library ms188757

  • WSO2 ESB - 代理参数的动态值（传输）

    我需要能够为代理参数指定动态值 实际上 我必须使用完整的 URL 指定每个参数 例如

  • 实现多个接口的 Service Fabric Actor 接口

    我正在构建一个应用程序 其中有多个不同的参与者类型 这些参与者类型对于某些不同的数据对象具有相同类型的行为 CRUD 为了更轻松地创建处理此问题的代码 我尝试创建一个这些参与者可以实现的接口 这意味着我有一个看起来像这样的参与者界面 pub

  • PostgreSQL、Npgsql 返回 42601：“$1”处或附近的语法错误

    我正在尝试使用 Npgsql 和 或 Dapper 来查询表 但我不断遇到Npgsql PostgresException 42601 syntax error at or near 1 这是我用 NpgsqlCommand 尝试的结果 u

  • 提交ajax表单并停留在同一页面不起作用

    我想将用户的评论存储在我的数据库中 当用户提交时 我不想将他们重定向到新页面 我有以下代码 但它不起作用 我的 HTML 代码

  • 从 blob 反序列化 java 对象

    首先 我很抱歉 我要问一些愚蠢的问题 我根本不懂java 也不知道我们是否可以问这样的问题 如果没有 删除我的主题 oracle中有一个存储blob的表 它是二进制的 我能够解码它 输出看起来像这样 sr com epam insure c

  • 我必须实现 Applicative 和 Functor 来实现 Monad

    我正在尝试实现一个 Monad 实例 作为一个更简单的示例 假设如下 data Maybee a Notheeng Juust a instance Monad Maybee where return x Juust x Notheeng

  • 如何在 C 中将 int 和数组保存在共享内存中？

    我正在尝试编写一个程序 让子进程在 Linux 上相互通信 这些进程都是从同一个程序创建的 因此它们共享代码 我需要它们能够访问两个整数变量以及一个整数数组 我不知道共享内存是如何工作的 我搜索过的每一个资源除了让我困惑之外什么也没做 任何

  • Spark中DataFrame、Dataset、RDD的区别

    我只是想知道有什么区别RDD and DataFrame Spark 2 0 0 DataFrame 只是一个类型别名Dataset Row 在阿帕奇火花 你能将其中一种转换为另一种吗 首先是DataFrame是从SchemaRDD 是的

  • java 未知深度的嵌套哈希图

    我有一个要求 我需要有一个嵌套的哈希图 但深度将在运行时决定 例如 如果在运行时 用户说 3 那么我的哈希图应该是这样的 HashMap

  • 在无形状中，有两个列表，其中一个包含另一个的类型类

    在无形中 我正在尝试编写一个需要两个 HList 的函数l1 and l2任意长度 具有以下属性 的长度l1 and l2是相同的 l2包含的确切类型l1 包装在常量外部类型构造函数中 So if l1 was 1 1 2 hello HN

  • 对数据绑定组合框进行排序的最佳方法是什么？

    我对此做了一些研究 似乎对数据绑定组合框进行排序的唯一方法是对数据源本身进行排序 在本例中为数据集中的数据表 如果是这种情况 那么问题就变成对数据表进行排序的最佳方法是什么 组合框绑定在设计器中设置初始化使用 myCombo DataSou

  • Python：如何即时生成代码？

    我遇到了一个问题 我必须动态生成程序然后执行它 我们怎样才能做到这一点 您可以使用 eval 函数从字符串执行代码 一个例子是 import math test r dir math eval test Output doc name pa

  • 如何在 Sublime Text 3 中设置语法的默认文件扩展名？

    我不是在询问将语法与文件扩展名相关联 而是在询问将文件扩展名与语法相关联 也就是说 在创建新文件后设置保存文件对话框中建议的文件扩展名 然后设置语法 然后单击 保存 您可以在保存对话框中更改扩展名 但最好不要每次都这样做 用于保存纯文本文件

  • 如何找到权重为 1、0、-1 且成本精确为 0 的多维路径

    我得到了一个有向图 其中有 n 个节点和边 向量的权重 每个向量的长度为 m 为数字 1 0 1 我想找到从一个节点到另一个节点 我们可以多次访问节点 的任何路径 或者说这样的路径不存在 使其权重之和等于仅由零组成的向量 我正在考虑暴力回溯

  • 关于调试打印样式表的建议？

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri

热门标签