How can I emulate media queries after Developer Toolbar has been removed?
The title says it all:
After the Developer Toolbar has been removed in Firefox v62, how do I emulate media queries, like "print"? And how do I reset this setting?
Just for your information in case your are in doubt about my question: While the Developer Toolbar was active, the Developer Toolbar command for setting media emulation to print was "media emulate print". The command for resetting the media type was "media reset".
Your answer is appreciated.
Modified by Alman
All Replies (11)
There might be an alternative available.
I think that if you select a specific @media rule in the Style Editor that Firefox would render the page with these rules. This would only work if the website has @media rules.
Hi Alman, while this feature is on hiatus, a possible workaround is to run a script in the Web Console that flips the media properties so the screen display shows print output. I posted some initial functions here and would appreciate your testing and commenting on them:
https://gist.github.com/jscher2000/f29d5d12713fa9afb40029bdb55e9c99
Thread for input to the developers: https://discourse.mozilla.org/t/how-to-media-emulate-print-without-developer-toolbar-gcli/30975 (Oh, I think you found this one already)
Modified by jscher2000 - Support Volunteer
Thanks! I appreciate your answers.
I'll check for the workarounds on the GitLab documentation and see how they behave.
But, the best solution would be to be able to emulate any kind of device again.
cor-el said
There might be an alternative available. I think that if you select a specific @media rule in the Style Editor that Firefox would render the page with these rules. This would only work if the website has @media rules.
Nope, doesn't work (Firefox 64).
jscher2000 said
Hi Alman, while this feature is on hiatus, a possible workaround is to run a script in the Web Console ...
Doesn't work on my machine. Get a security exception (see image attached).
Modified by Alman
Alman said
Doesn't work on my machine. Get a security exception (see image attached).
Hmm, can you share a link to a page where you see that problem?
jscher2000 said
Alman saidDoesn't work on my machine. Get a security exception (see image attached).Hmm, can you share a link to a page where you see that problem?
Sure. I'll be glad to: https://about.gitlab.com/
Alman said
jscher2000 saidHmm, can you share a link to a page where you see that problem?Sure. I'll be glad to: https://about.gitlab.com/
Um, hmm, the first style sheet is from Google Fonts, and this gives a security error:
document.styleSheets[0].cssRules
The second style sheet is from FontAwesome and that works fine. I notice its link tag has crossorigin="anonymous", which the first one doesn't have, so perhaps that explains the difference. But maybe not. The error message doesn't have enough detail.
What a headache. I think the only way around is try/catch but maybe a programmer knows better than I do.
Okay, I revised the script to log those errors to the console. Since you seem to be using this more than me, perhaps you'll spot a pattern to it.
https://gist.github.com/jscher2000/f29d5d12713fa9afb40029bdb55e9c99
You may have to create a third-party cookie exception for some involved domains to avoid such cross domain security errors. You can temporarily try to enable all third-party cookies to see if that makes it work and for what domains cookies are created. See also the Storage Inspector.
Some websites can also use CSP rules that prevent scripts from working properly.
So, it looks to be kind of much workload for Jefferson.
Nonetheless, we need back an option to select which media type to use. Currently we cannot test whether print or speech styles apply correctly.
I still suggest to add a ComboBox to Developer Tools:
