It used to be possible to switch the media type via GCLI before it got removed in bug 1462398.

See https://discourse.mozilla.org/t/how-to-media-emulate-print-without-developer-toolbar-gcli/30975 for a thread from users requesting this to be added back.

If we do want to add it back, then let's use this bug.

Technically speaking, we can simply salvage the code that was removed from GCLI.
In order to make this simple, I've extracted it from the Mercurial history. Here it is:

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const {Ci} = require("chrome");
const l10n = require("gcli/l10n");

function getContentViewer(context) {
  let {window} = context.environment;
  return window.QueryInterface(Ci.nsIInterfaceRequestor)
               .getInterface(Ci.nsIDocShell)
               .contentViewer;
}

exports.items = [
  {
    name: "media",
    description: l10n.lookup("mediaDesc")
  },
  {
    item: "command",
    runAt: "server",
    name: "media emulate",
    description: l10n.lookup("mediaEmulateDesc"),
    manual: l10n.lookup("mediaEmulateManual"),
    params: [
      {
        name: "type",
        description: l10n.lookup("mediaEmulateType"),
        type: {
          name: "selection",
          data: [
            "braille", "embossed", "handheld", "print", "projection",
            "screen", "speech", "tty", "tv"
          ]
        }
      }
    ],
    exec: function(args, context) {
      let contentViewer = getContentViewer(context);
      contentViewer.emulateMedium(args.type);
    }
  },
  {
    item: "command",
    runAt: "server",
    name: "media reset",
    description: l10n.lookup("mediaResetDesc"),
    exec: function(args, context) {
      let contentViewer = getContentViewer(context);
      contentViewer.stopEmulatingMedium();
    }
  }
];

Backed out changeset 4fef2150bef9 (bug 1534984) for DevTools Failures in devtools/client/responsive.html/test/browser/browser_toolbox_swap_browsers.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=238824721&repo=autoland&lineNumber=19035

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=4fef2150bef9f1274c59862511b619756ee8381e

Backout:
https://hg.mozilla.org/integration/autoland/rev/c637aef263704c185f45ebf58f17dbb3c689b2bf

https://treeherder.mozilla.org/#/jobs?repo=try&revision=866790866bfbb0386fde03f62af9c25526d53f73

https://treeherder.mozilla.org/#/jobs?repo=try&revision=1e423fee9a9865914e0a9658962b623d71aadd31

https://hg.mozilla.org/mozilla-central/rev/165b1912cabc

Great that this landed. Thanks Micah. Here's a GIF to illustrate.

Thanks for this merge!

I would have preferred, though, if that button had a drop down attached next to it. Hence, a screen reader's experience could have been also tested.

|▒|▼|

|screen|
|print |
|speech|

This should have read:

|▒|▼|
|screen|
|print |
|speech|

(In reply to Axel from comment #12)

Thanks for this merge!

I would have preferred, though, if that button had a drop down attached next to it. Hence, a screen reader's experience could have been also tested.

I appreciate this suggestion - we'll keep this in mind for further work on simulation.

Added the following to the release notes:

A button has been added to the rules panel of the Page Inspector that allows you to toggle display of any print media queries ({{bug(1534984)}}).

Added information in two places within the inspector documentation. First, I updated the images at the top of the page to show the new UI, and then added a video in a section labeled: View @media rules for Print further down the page that shows the toggle in practice.

Looks good. Thanks Irene!