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

注意:这个答案涵盖了几个版本的Chrome，滚动查看v52, v48, v46, v43和v42各自的更新更改。

Chrome v52 +:

打开开发人员工具(Windows: F12或Ctrl+Shift+I, Mac: Cmd+Opt+I) 点击自定义和控制DevTools汉堡菜单按钮，并选择更多工具>渲染设置(或更新版本的渲染)。选中渲染选项卡上的模拟打印媒体复选框，并选择打印媒体类型。

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

打开开发人员工具(CTRLSHIFTI或F12) 单击左上角的切换设备模式按钮(CTRLSHIFTM)。确保通过单击菜单(1)中的显示控制台来显示控制台(如果开发人员工具栏有焦点，ESC键将切换控制台)。在渲染选项卡上检查模拟打印媒体，可以通过在菜单(2)中选择渲染来打开。

Chrome v46 +:

打开开发人员工具(CTRLSHIFTI或F12) 点击左上角(1)的切换设备模式按钮。通过点击菜单按钮(2)>显示控制台(3)或按ESC键切换控制台(仅当开发人员工具栏有焦点时有效)，确保控制台显示。打开“Emulation (4) > Media(5)”选项卡，选中“CSS Media”并选择“print(3)”。

Chrome v43 +:

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

Chrome v42:

打开开发人员工具(CTRLSHIFTI或F12) 点击左上角(1)的切换设备模式按钮。通过点击显示抽屉按钮(2)或按ESC键切换抽屉，确保抽屉显示。在Emulation > Media下检查CSS Media并选择print(3)。

2015-04-30 07:53:38

注意:这个答案涵盖了几个版本的Chrome，滚动查看v52, v48, v46, v43和v42各自的更新更改。

Chrome v52 +:

打开开发人员工具(Windows: F12或Ctrl+Shift+I, Mac: Cmd+Opt+I) 点击自定义和控制DevTools汉堡菜单按钮，并选择更多工具>渲染设置(或更新版本的渲染)。选中渲染选项卡上的模拟打印媒体复选框，并选择打印媒体类型。

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

打开开发人员工具(CTRLSHIFTI或F12) 单击左上角的切换设备模式按钮(CTRLSHIFTM)。确保通过单击菜单(1)中的显示控制台来显示控制台(如果开发人员工具栏有焦点，ESC键将切换控制台)。在渲染选项卡上检查模拟打印媒体，可以通过在菜单(2)中选择渲染来打开。

Chrome v46 +:

打开开发人员工具(CTRLSHIFTI或F12) 点击左上角(1)的切换设备模式按钮。通过点击菜单按钮(2)>显示控制台(3)或按ESC键切换控制台(仅当开发人员工具栏有焦点时有效)，确保控制台显示。打开“Emulation (4) > Media(5)”选项卡，选中“CSS Media”并选择“print(3)”。

Chrome v43 +:

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

Chrome v42:

打开开发人员工具(CTRLSHIFTI或F12) 点击左上角(1)的切换设备模式按钮。通过点击显示抽屉按钮(2)或按ESC键切换抽屉，确保抽屉显示。在Emulation > Media下检查CSS Media并选择print(3)。

2015-04-30 07:53:38

Chrome 32 35+更改

(在Chrome 35+中，“仿真”选项卡默认存在。此外，控制台可从任何主选项卡。)

在DevTools中，进入“设置”->覆盖启用“在控制台抽屉中显示仿真视图” 关闭设置，转到“元素”标签按Esc调出控制台选择“仿真”页签，点击“屏幕” 向下滚动到“CSS媒体”，选择“打印”

这个选项在控制台选项卡中还不可用。

2014-01-16 08:38:21

Chrome v67 (mac):

按Cmd+opt+j打开开发工具点击…在右边，选择:More Tools >> Rendering 当渲染窗口显示在屏幕底部，模拟CSS媒体部分，并从下拉菜单中选择:“屏幕”。转到“文件>>打印”，你应该看到你想打印的视图。