Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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

  • 11 replies
  • 1 has this problem
  • 91 views
  • Last reply by Alman

more options

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)

more options

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.

more options

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

more options

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.

more options

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

more options

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

more options

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?

more options

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/

more options

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.

more options

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

more options

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.

more options

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: