我正在开发一个网站,需要在打印视图上工作。通常当我有布局问题时,我使用Chrome的元素检查器。但是,这在打印预览模式中不存在。
是否有一个Chrome插件或其他方式来改变你的浏览器本身的观看媒介,以查看一个页面的打印机会?我想它没有一个Chrome特有的解决方案,但那是我的主要浏览器,所以有一个浏览器内的解决方案会很好。
现在我只专注于打印预览媒体,但如果能够切换到任何支持的媒体类型(即所有/盲文/压花/手持/打印/投影/屏幕/语音/tty/电视)将是理想的。
我正在开发一个网站,需要在打印视图上工作。通常当我有布局问题时,我使用Chrome的元素检查器。但是,这在打印预览模式中不存在。
是否有一个Chrome插件或其他方式来改变你的浏览器本身的观看媒介,以查看一个页面的打印机会?我想它没有一个Chrome特有的解决方案,但那是我的主要浏览器,所以有一个浏览器内的解决方案会很好。
现在我只专注于打印预览媒体,但如果能够切换到任何支持的媒体类型(即所有/盲文/压花/手持/打印/投影/屏幕/语音/tty/电视)将是理想的。
当前回答
有了捷径,最快的方法就是
打开开发人员工具 Windows: F12或Ctrl+Shift+I 麦克:Cmd + Opt + I 打开命令菜单 Windows:按Ctrl + Shift + P 麦克:Cmd + Shift + P 键入打印并从上下文菜单中选择模拟CSS打印媒体类型
看看lmeurs给出的优秀且目前获得最多赞的答案,我认为这个解决方案也可能随着时间的推移保持稳定。
其他回答
在Chrome 48(也许还有更早的几个版本),这个函数似乎又移动了:
前几个步骤没有改变:
按F12打开开发人员工具 按“ESC”打开控制台
根据前面的回答,可以在“Emulation”选项卡下找到设置。如下图所示,它现在已经被移动到“渲染”选项卡,可以通过点击“控制台”选项卡左边的三个点来打开。
注意:这个答案涵盖了几个版本的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)。
Chrome v50:
方式1:
菜单>更多工具>渲染设置 (见图片) 下:渲染标签>模拟媒体“打印”
方式2:
打开控制台[esc] 控制台菜单>渲染
自从Chrome 32,你有CSS媒体选项在屏幕部分的抽屉仿真选项卡。
只需启用它,选择打印作为目标媒体类型,然后-看-你的页面呈现[几乎]它将打印的方式。
如果抽屉不可见,使用Esc键调出抽屉。
有了捷径,最快的方法就是
打开开发人员工具 Windows: F12或Ctrl+Shift+I 麦克:Cmd + Opt + I 打开命令菜单 Windows:按Ctrl + Shift + P 麦克:Cmd + Shift + P 键入打印并从上下文菜单中选择模拟CSS打印媒体类型
看看lmeurs给出的优秀且目前获得最多赞的答案,我认为这个解决方案也可能随着时间的推移保持稳定。