X
Tap here to go to the mobile version of the site.

Support Forum

How can I emulate media queries after Developer Toolbar has been removed?

Posted

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.

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

cor-el
  • Top 10 Contributor
  • Moderator
16996 solutions 153477 answers

Helpful Reply

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.

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. *https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar
jscher2000
  • Top 10 Contributor
8198 solutions 67056 answers

Helpful Reply

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)

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

Question owner

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.

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.

Question owner

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).

''cor-el [[#answer-1157936|said]]'' <blockquote> 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. *https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar </blockquote> Nope, doesn't work (Firefox 64).

Question owner

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).

''jscher2000 [[#answer-1157939|said]]'' <blockquote> Hi Alman, while this feature is on hiatus, a possible workaround is to run a script in the Web Console ... </blockquote> Doesn't work on my machine. Get a security exception (see image attached).

Modified by Alman

jscher2000
  • Top 10 Contributor
8198 solutions 67056 answers

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?

''Alman [[#answer-1180265|said]]'' <blockquote> Doesn't work on my machine. Get a security exception (see image attached). </blockquote> Hmm, can you share a link to a page where you see that problem?

Question owner

jscher2000 said

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?

Sure. I'll be glad to: https://about.gitlab.com/

''jscher2000 [[#answer-1180273|said]]'' <blockquote> ''Alman [[#answer-1180265|said]]'' <blockquote> Doesn't work on my machine. Get a security exception (see image attached). </blockquote> Hmm, can you share a link to a page where you see that problem? </blockquote> Sure. I'll be glad to: [https://about.gitlab.com/ https://about.gitlab.com/]
jscher2000
  • Top 10 Contributor
8198 solutions 67056 answers

Alman said

jscher2000 said
Hmm, 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.

''Alman [[#answer-1180346|said]]'' <blockquote> ''jscher2000 [[#answer-1180273|said]]'' <blockquote> Hmm, can you share a link to a page where you see that problem? </blockquote> Sure. I'll be glad to: [https://about.gitlab.com/ https://about.gitlab.com/] </blockquote> 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.
jscher2000
  • Top 10 Contributor
8198 solutions 67056 answers

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

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
cor-el
  • Top 10 Contributor
  • Moderator
16996 solutions 153477 answers

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.

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. *https://developer.mozilla.org/en/Tools/Storage_Inspector Some websites can also use CSP rules that prevent scripts from working properly.

Question owner

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:

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: