Suggestions for Debugging Print Stylesheets

How do you debug printable CSS?

In Chrome 51:

Open devtools (CTRL + F12 or CTRL + SHIFT + I) and click on the ... menu, click More Tools > Rendering settings to open the Rendering tab of the developer console (alternatively, if the console is open just navigate to this tab).

In that tab, select and check the box for Emulate Media: print.

Faster way to develop and test print stylesheets (avoid print preview every time)?

You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.

UPDATE 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

To view a page in print mode:

1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))

2. Start typing Rendering and select Show Rendering.

3. For the Emulate CSS Media dropdown, select print.

---

UPDATE 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

UPDATE 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

1. Open Chrome DevTools
2. Hit esc on your keyboard
3. Click ⋮ (vertical ellipsis)
4. Choose Rendering
5. Tick Emulate print media

See screenshot below:

UPDATE 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.

UPDATE 24/05/2016

The naming of settings have changed once again:

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.

Print stylesheet hell - looking for suggestions for outstanding problems

After a few more days of pulling my hair out, I was able to get the printing working properly without having to hack around problems too much.

Basically I started by changing my mindset and approach. Whereas before I was trying to come up with a solution that worked for all of the browsers, I decided to start focusing on each individual browser one at a time. I started by creating an Internet Explorer-specific print stylesheet and only loading it if a user loaded the site with IE:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint-ie.css" />
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint.css" />
<!--<![endif]-->

Then I started working on getting printing to work properly for Internet Explorer. After a bunch of tweaks, I just happened to add the following to the IE print stylesheet:

html,body {margin:0 !important;padding:0 !important;}

This solved problems for IE 7, 8, and 9. I'm not sure why I had to set these styles again in my print stylesheet, as they were already set in another stylesheet that should have been applied while printing:

<link rel="stylesheet" type="text/css" media="all" href="/css/rich/footstepsofhistory.css" />

but they obviously weren't getting applied properly for some reason.

From there it was a breeze. I just had to make some minor modifications to the non-IE print stylesheet to get things working in Chrome, Firefox, and Safari, and then I was good to go.

A quick outline of lessons learned:

• Keep print stylesheets as simple as possible.
• If you are having weird layout problems, preserve your sanity by just creating an Internet Explorer-specific stylesheet. Heck, if you have to, create print stylesheets for each version of Internet Explorer. I am convinced that in some scenarios this is the only way to get printing to work properly in all browsers.
• Chrome has, by far, the best "live" CSS editing capability out there. If you are looking for a tool that allows you to dynamically preview CSS changes as you make them, go with Chrome.

How to test print output of browsers with online tools?

The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.

Using Chrome's Element Inspector in Print Preview Mode?

Note: This answer covers several versions of Chrome, scroll to see v52, v48, v46, v43 and v42 each with their updated changes.

Chrome v52+:

• Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
• Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions).
• Check the Emulate print media checkbox at the Rendering tab and select the Print media type.

Chrome v48+ (Thanks Alex for noticing):

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (CTRLSHIFTM).
• Make sure the console is shown by clicking Show console in menu at (1) (ESC key toggles the console if Developer Toolbar has focus).
• Check Emulate print media at the rendering tab which can be opened by selecting Rendering in menu at (2).

Chrome v46+:

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (1).
• Make sure the console is shown by clicking the menu button (2) > Show console (3) or pressing the ESC key to toggle the console (only works when Developer Toolbar has the focus).
• Open the Emulation (4) > Media (5) tabs, check CSS media and select print (3).

Chrome v43+:

• The drawer icon at step 2 has changed.

Chrome v42:

• Open the Developer Tools (CTRLSHIFTI or F12)
• Click the Toggle device mode button in the left top corner (1).
• Make sure the drawer is shown by clicking the Show drawer button (2) or pressing the ESC key to toggle the drawer.
• Under Emulation > Media check CSS media and select print (3).

---

Related Topics