Closed Bug 1282019 Opened 8 years ago Closed 5 years ago

Better debugging for Print Preview (@media print)

Categories

(DevTools :: Responsive Design Mode, enhancement, P3)

enhancement

Tracking

(firefox50 affected)

RESOLVED DUPLICATE of bug 1534984
Tracking Status
firefox50 --- affected

People

(Reporter: nachtigall, Unassigned)

References

(Blocks 1 open bug)

Details

= Problem: =

Debugging Print Preview is a total pain now: It's "Coding CSS → Reload → Print Preview → Coding CSS" cycle now. And in "Print Preview" I cannot use the Inpector to investigate and change CSS properties. So it is very trial'n'error.


= Expected: =

Better developer tools for debugging Prints. Some customers have pixel perfect designs what their page is suppposed to look like when printed. 

There is the Web Developer Toolbar (e.g. https://www.theparticlelab.com/easy-print-css-coding-using-firebug-and-web-developer-toolbar/) but it is a bit aged and does not nicely integrate into the Devtools.

For Printing I'd want something like the "Responsive Design Mode" does. Print Preview is very similar, except that you have "A4" (EU) or "letter" paper sizes (US) and page breaks.

There is certainly some demand for this as seen in this Stackoverflow questions and Chrome seems to have something for this, but it does not look like the best UX: 
* http://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode
* http://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time

This request has also been raised twice in https://www.reddit.com/r/webdev/comments/3tl0f4/ask_rwebdev_what_could_firefoxs_devtools_do_better/ (Nov 2015) (I'm a little surprised that this outreach did not make it into bug reports, or I do not find them). Just search for "Print" on the page:

> I use Chrome for the emulation of print styles/print media queries, 
> that's a feature I'm missing in Firefox or I haven't found it yet.

> Also, emulating print media would be nice to be able to access 
> without going into the shift+F2 command bar.
(probably referring to "media emulate print" command in the Developer Toolbar)

I am filing this under "Responsive Design Mode" because I think that Print is just a less considered case of it. Please edit the bug if I am wrong here. Please also triage.
I know it's not really what you are looking for, but for something that's available today you can use the Developer Toolbar / GCLI[1] and enter "media emulate print".

[1]: https://developer.mozilla.org/en-US/docs/Tools/GCLI
Severity: normal → enhancement
Product: Firefox → DevTools
Blocks: rdm-ux
See Also: → 1534984

I think we can close this now that a button for toggling print simulation is available in the Rule View toolbar thanks to Bug 1534984. Please feel free to re-open if this is not the case.

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Resolution: FIXED → DUPLICATE
You need to log in before you can comment on or make changes to this bug.