debug print styles?

[Erik Krause]

Hello,

what is the recommended way to debug print styles (media rules) with
firebug?

best regards
Erik Krause

[Erik Krause]

Am 06.10.2014 15:45, schrieb Erik Krause:
> what is the recommended way to debug print styles (media rules) with
> firebug?

Not possible?

--
Erik Krause
http://www.erik-krause.de

[mozzy]

On Monday, October 13, 2014 12:25:44 PM UTC-7, Erik Krause wrote:

Am 06.10.2014 15:45, schrieb Erik Krause:
> what is the recommended way to debug print styles (media rules) with
> firebug?

Not possible?

Erik,

You beat me to the punch... by over a month... and I'm sorry to see that you got no response, and pinged again a few hours ago. Today must be the day for this issue!

I've been trying to figure that out tonight, and searching around, found all the stuff about high-resolution displays on phones and tablets, but the only debug technique I can find suggested is at StackOverflow, and the problem with the suggestion was pointed out by Victoria just minutes before I found that... the workaround causes all aspects of the browser to be expanded, including the chrome around the user area, and the whole of the debugger. So this results in the possibility of emulating the display, and possibly the media queries, but it is really hard to debug. Firebug does have features to adjust its own text size, etc., but I'm not convinced that makes it usable... switching the layout.css.devPixelsPerPx is too big of a hammer, it seems...

As Victoria suggests there, perhaps there should be a way to affect only the setting of a single tab, or at least of a single window, and best would be only the user area of the debugger.


Printers, are, of course, just the same as mobile devices, in having higher-resolution "screens", only their screens are typically also larger, making for a lot of pixels, and far too much "zoom factor" for it to be applied to the chrome and debugger areas as well.

I read something about a forthcoming version of Firefox containing lots of mobile debug tools, but whether those are only for debugging actual devices, or whether they would help solve this emulation problem, is unclear.

[mozzy]

Here's another StackOverflow link. It talks about the built-in Firefox debugger rather than Firebug. And it seems to have emulations for various "screen sizes", including "custom", but I haven't figured out how to set the parameters for "custom" to know if it will work for resolutions used by printers.

[mozzy]

Well, I discovered the documentation for the "responsive design" features here. And played with the scrolling ability to set new sizes, and for printer sizes, it is clear that the current interface is useless... dragging the controls off-screen to make them bigger scrolls the size viewer off screen the other direction... that interface widget should be located at the bottom right where the controls are rather than top left, or maybe both places, at least while the size is being adjusted. I began contemplating an active Javascript page repeatedly updating a reflection of the current size in the bottom right of the page, as a help to setting the desired size, and then I noticed in the documentation that the numbers will be directly editable in Firefox 33... so when is that to be released?  Today!  In fact, one of my copies of Firefox is already downloading it...

There is still the question of how to set dppx appropriately and locally to one page, hopefully combinable with the responsive design feature.

[mozzy]

Well, it doesn't set the dppx value, but you can get a zoom effect by adding the following to your CSS:

body { transform-origin: top left; transform: scale( N ); }

(replacing N with the scale factor you want).  This isn't a solution for debugging the print styles, unfortunately, but does let you preview what it might look like on the printer, in some instances.

[mozzy]

Well, one thing is for sure... you don't want to actually use an image that you scale up from small to big.  Big to small isn't so bad. Even for text, scaling up is bad... the letters don't get pixelated, but the letter spacing gets weird.

[Sebastian Zartner]

Sorry for the delay on this.

If you want to debug print styles, you may currently want to use the Web Developer extension in combination with Firebug or the DevTools. It can simulate the print preview via CSS > Display Styles By Media Type > Display Print Styles.
For support in Firebug you should follow issue 3056, for support in DevTools bug 819930.

Sebastian

[Erik Krause]

Am 20.10.2014 21:47, schrieb Sebastian Zartner:
> If you want to debug print styles, you may currently want to use the Web

> Developer<https://addons.mozilla.org/firefox/addon/web-developer/>

> extension in combination with Firebug or the DevTools. It can simulate the

> print preview via*CSS* >*Display Styles By Media Type* > *Display Print
> Styles*.

Web Developer currently doesn't work (as expected). Chris answered as
follows: "You are not doing anything wrong - this is a bug. Sorry about
that, but the code looks to be getting confused and only wanting to show
style sheets marked explicitly as print (and only print) style sheets."

So there is at least some hope for a solution...