在打印预览模式下使用Chrome的元素检查器？

 

我正在开发一个网站，需要在打印视图上工作。 通常当我有布局问题时，我使用Chrome的元素检查器。 但是，这在打印预览模式下不存在。

是否有Chrome浏览器插件或其他方式在Chrome浏览器中更改您的浏览媒体，以便像打印机一样查看页面？ 我想这并不是一个Chrome特定的解决方案，但那是我的主要浏览器，所以最好有一个浏览器内解决方案。

现在我只关注打印预览介质，但它能够更改为任何支持的介质类型（即全部/盲文/压印/手持/打印/投影/屏幕/语音/ tty /电视）。

注意：这个答案涉及铬的几个版本中，滚动查看V52，V48，V46，V43和V42每一个与他们的更新变化。

Chrome v52 +：

  • 打开开发工具（Windows：F12或Ctrl + Shift + I，Mac：Cmd + Opt + I）
  • 单击自定义并控制DevTools汉堡包菜单按钮，然后选择更多工具>渲染设置（或在新版本中渲染）。
  • 在“渲染”选项卡上选中“模拟打印介质”复选框，然后选择“打印介质类型”。

    • Chrome v52 +

    Chrome v48 +（感谢Alex注意到）：

  • 打开开发工具（CTRLHIFTI或F12）
  • 点击左上角的切换设备模式按钮（CTRLSHIFTM）。
  • 确保通过单击（1）菜单中的显示控制台来显示控制台（如果开发人员工具栏具有焦点，则按ESC键切换控制台）。
  • 在（2）的菜单中选择Rendering（渲染），可在打开的渲染选项卡上检查Emulate打印介质。

    • Chrome v48 +

    Chrome v46 +：

  • 打开开发工具（CTRLHIFTI或F12）
  • 点击左上角的切换设备模式按钮（1）。
  • 确保通过单击菜单按钮（2）>显示控制台（3）或按ESC键切换控制台（仅在开发人员工具栏具有焦点时才能使用）显示控制台。
  • 打开Emulation（4）> Media（5）选项卡，检查CSS媒体并选择打印（3）。

    • Chrome v46 +支持

    Chrome v43 +：

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

    • 在Chrome v43上模拟打印介质查询

    Chrome v42：

  • 打开开发工具（CTRLHIFTI或F12）
  • 点击左上角的切换设备模式按钮（1）。
  • 确保通过单击显示抽屉按钮（2）或按下ESC键切换抽屉来显示抽屉。
  • 在仿真>媒体下，检查CSS媒体并选择打印（3）。

    • 在Chrome v42上模拟打印介质查询

    Chrome 32 35+更改

    （在Chrome 35+中，默认情况下会显示“仿真”选项卡。此外，控制台可从任何主选项卡获得。）

  • 在DevTools中，进入设置 - >覆盖
  • 启用“在控制台抽屉中显示仿真视图”
  • 关闭设置，进入'元素'选项卡
  • 点击Esc打开控制台
  • 选择标签“仿真”，点击“屏幕”
  • 向下滚动到“CSS Media”，选择“打印”

    • 此选项在控制台选项卡中尚未（尚未？）可用。

    启用覆盖

    自Chrome 32以来，您在抽屉“ Emulation选项卡的“ Screen部分中拥有CSS media选项。

    只需启用它，选择print作为目标媒体类型，并且 - 请注意 - 您的页面几乎将以打印方式呈现。

    如果不可见，使用Esc调出抽屉。

    链接地址: http://www.djcxy.com/p/3457.html

    上一篇: Using Chrome's Element Inspector in Print Preview Mode?

    下一篇: Disabling Chrome cache for website development