1187581 - Have a way to properly debug print previews

Status: RESOLVED DUPLICATE of bug 1534984

(DevTools :: General, defect)

Description

[Julien Wajsberg [:julienw]]

Printing output has several bugs (see for example bug 521204 and its dependencies) and being able to inspect and change CSS and see the result in real time could help a lot to workaround the issues.

Comment 1

[Robin Berjon]

I would kill to have this. Debugging print CSS is a complete throwback to the 90s in terms of developer experience. I just spent basically an hour changing random things until Firefox would kindly stop truncating my print view to just the one page (and just like it was in the 90s, in the end I'm still not sure what fixed it...).

This would fit great into the Responsive View tool. Is there a way to trigger rendering in a specific media?

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to Robin Berjon from comment #1)
> I would kill to have this. Debugging print CSS is a complete throwback to
> the 90s in terms of developer experience. I just spent basically an hour
> changing random things until Firefox would kindly stop truncating my print
> view to just the one page (and just like it was in the 90s, in the end I'm
> still not sure what fixed it...).
> 
> This would fit great into the Responsive View tool. Is there a way to
> trigger rendering in a specific media?

Are you trying to debug a print-only style sheet?  Or something else?

Comment 3

[Robin Berjon]

I'm debugging `@media print` for the print view, so not precisely a print-only sheet so much as print-only sections (if that makes any difference).

But ideally it shouldn't matter which way it's done. I'd love to just have a button in the developer tools to "Show as Print" that I could use to debug the print output live, rather than edit -> reload -> print -> show pdf -> find problem -> edit...

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to Robin Berjon from comment #3)
> I'm debugging `@media print` for the print view, so not precisely a
> print-only sheet so much as print-only sections (if that makes any
> difference).
> 
> But ideally it shouldn't matter which way it's done. I'd love to just have a
> button in the developer tools to "Show as Print" that I could use to debug
> the print output live, rather than edit -> reload -> print -> show pdf ->
> find problem -> edit...

Have you used the Developer Toolbar[1] before?

It has a command `media emulate print` to show the page with print stylesheets.  Does this help?

[1]: https://developer.mozilla.org/en-US/docs/Tools/GCLI#Opening_the_Developer_Toolbar

Comment 5

[Robin Berjon]

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #4)
> It has a command `media emulate print` to show the page with print
> stylesheets.  Does this help?

I had tried it (or a precursor?) quite a while ago but it didn't seem to do much at the time so I didn't look again. This is very cool, thanks!

Just a few notes:
  - ideally it would change the viewport to a paper size
  - it should trigger onbefore/afterprint (and matchMedia — it might do the latter, that's not a code path I hit on Firefox)
  - it would be sweet to have that in the UI

Thanks!

Comment 6

[Micah [:mtigley] (she/her)]

Marking this as a duplicate of Bug1534984, which has been fixed. Toggling print simulation for the page is available as a button in the Rule View toolbar in Nightly.

Comment 7

[Christoph]

The button added as :mtigley mentioned does not fully implement the requested features.

As Robin Berjon suggested, it would be really great, if the current Print Preview would be debugable using the Developer tools.

The Print Preview provides features as defining paper size, page orientation and so on. Additionally it shows page breaks.
All these features are not available when using the currently available print simulation.

It is possible to open the developer tools in the Print Preview, but the Inspector is not usable, as interaction with the website are not possible.