Suggestions for debugging print stylesheets?

Jim Puls picture Jim Puls · Mar 16, 2010 · Viewed 96.4k times · Source

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

Rafael Nogueira picture Rafael Nogueira · Jan 18, 2013

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 Toggle device mode button, located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
  3. Click on the More overrides 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.

    enter image description here

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*