css - Suggestions for debugging print stylesheets?

Question

I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:

• change code
• command-tab
• reload

but that whole process gets much more arduous when you're trying to print:

• change code
• command-tab
• reload
• print
• squint at print-preview image
• open PDF in Preview for further inspection

Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?

Answer 1

There is an option for that in Chrome's inspector.

1. Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
2. Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
3. Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.

4. Then, select Media in the emulation drawer, and check the CSS media checkbox.

   

This should do the trick.

Update: The menus have changed in DevTools. It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

Source: Google DevTools page*