为了账号安全,请及时绑定邮箱和手机立即绑定

在打印预览模式下使用Chrome的Element Inspector?

/ 猿问

在打印预览模式下使用Chrome的Element Inspector?

在打印预览模式下使用Chrome的Element Inspector?

我正在开发一个网站,需要处理打印视图。通常,当我遇到布局问题时,我会使用Chrome的Element Inspector。但是,这在打印预览模式下不存在。

是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面?我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错。

现在我只专注于打印预览媒体,但是能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /电视)。


查看完整描述

3 回答

?
慕雪9262066

Chrome v52 +:

  • 打开开发人员工具(Windows:F12CtrlShiftI,Mac:CmdOptI

  • 单击自定义并控制DevTools汉堡包菜单按钮,然后选择更多工具>渲染设置(或在较新版本中渲染)。

  • 选中“ 渲染”选项卡上的“ 模拟打印介质”复选框,然后选择“ 打印介质类型”。

Chrome v48 +(感谢Alex注意到):

  • 打开开发人员工具(CTRLSHIFTIF12

  • 单击左上角的(切换设备模式)按钮(CTRLSHIFTM)。

  • 通过单击(1)菜单中的显示控制台确保显示控制台ESC如果开发人员工具栏具有焦点,则键切换控制台)。

  • 选中“渲染”选项卡上的“ 模拟打印介质 ”,可以通过选择(2)中的菜单中的“ 渲染”来打开该介质

Chrome v46 +:

  • 打开开发人员工具(CTRLSHIFTIF12

  • 单击左上角的“ 切换设备模式”按钮(1)。

  • 通过单击菜单按钮(2)> 显示控制台(3)或ESC按键切换控制台(仅在开发人员工具栏具有焦点时有效),确保显示控制台

  • 打开仿真(4)>媒体(5)选项卡,检查CSS媒体并选择打印(3)。

Chrome v43 +:

  • 步骤2中的抽屉图标已更改。

Chrome v42:

  • 打开开发人员工具(CTRLSHIFTIF12

  • 单击左上角的“ 切换设备模式”按钮(1)。

  • 通过单击“ 显示”抽屉按钮(2)或ESC按键切换抽屉,确保显示抽屉。

  • Emulation> Media下检查CSS媒体并选择print(3)。


查看完整回答
反对 回复 2019-07-31
?
慕容森

从Chrome 32开始,您可以在抽屉选项卡CSS mediaScreen部分中选择Emulation

只需启用它,选择print作为目标媒体类型,并且 - 看哪 - 您的页面几乎以其打印方式呈现。

使用Esc弹出抽屉,如果它是不可见的。


查看完整回答
反对 回复 2019-07-31
?
一只萌萌小番薯

从Chrome 48(以及之前的几个版本)开始,该功能似乎再次发生了变化:

前几个步骤没有变化:

  1. 按下F12以显示开发人员工具

  2. ESC打开控制台

根据之前的答案,可以在“仿真”选项卡下找到该设置。如下图所示,它现在已移至“渲染”选项卡,可通过单击“控制台”选项卡左侧的三个点来显示该选项卡。


查看完整回答
反对 回复 2019-07-31
  • 3 回答
  • 0 关注
  • 375 浏览
我要回答

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信