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?

cssprintingfirebuggoogle-chrome-devtoolsweb-inspector

Reputation: 81092

Suggestions for debugging print stylesheets?

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?

Upvotes: 248

Answers (13)

Rafa

Reputation: 3544

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

Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the ..., top right of the dev tools.
Navigate the menu to "more tools" and then "Rendering"
Scroll down until you find the "Emulate CSS Media Type" select box, and choose "Print"

This should do the trick.

Source: Google DevTools page* Updated to latest chrome, sorry for the 10 years wait.

Upvotes: 336

djvg

Reputation: 14265

In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.

One drawback is that it does not clearly delineate the page boundaries.

Upvotes: 0

Jonathan Sanchez

Reputation: 9384

2019 - Updated instructions

Open Chrome inspector
- From Mac => option + command + i
- From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow

Upvotes: 4

TrophyGeek

Reputation: 6099

Chrome's UI is different again as of v53.

I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.

Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.

Now scroll down in the Rendering section. It's often below the fold.

Upvotes: 14

minlare

Reputation: 2654

Chrome 48 you can debug print styles within the Rendering tab.

Click the menu icon top right of inspector and Rendering Settings.

Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering

Upvotes: 21

johntrepreneur

Reputation: 4694

In Chrome v41, it's there, but in a slightly different spot.

enter image description here

Upvotes: 18

Anil Vangari

Reputation: 570

Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:

chrome print css emulation

Upvotes: 8

Dawson

Reputation: 7597

I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use @media screen to debug - @media print for final css

Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the @media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to @media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the @media screen rules to the referenced file.

Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.

W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 79

Blowsie

Reputation: 40545

If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.

Heres an example of how this can be done with JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

Upvotes: 0

Sam

Reputation: 15508

enter image description here

In DreamWeaver there is a toolbar that shows virtually any rendering option you want: screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc. This is what I use especially because it: instantly shows a preview with 1 single press of a button.

Upvotes: -1

Capsule

Reputation: 6159

There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):

Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features

Now you are viewing the print CSS and you can reload your page indefinitely. Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.

HTH.

Upvotes: 16

FelipeAls

Reputation: 22171

I use macros to send keypress and mouse clicks repeatedly. Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.

Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)

Upvotes: -7

Tatu Ulmanen

Reputation: 124818

Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.

Upvotes: 5

Suggestions for debugging print stylesheets?

Answers (13)

Related Questions