Question: I have used (as usual) `@media print` rules to specify how the print of a web page should be different to the online version. This works quite well, but the test is really difficult. What I usually has to do are the following steps:

1. Create the different style for `screen` and `print`.
2. Start your page in the screen mode
3. Print the page e.g. to a PDF printer.
4. Look at the result.
5. Try to find the rules that behave wrong.

What I would like to do (but was not able to do it with any browser):

1. Create the different style for `screen` and `print`.
2. Start your page in the screen mode
3. Go into the preview print mode (e.g. for Opera, Firefox available)
4. Use the available tools like Firebug (Firefox) or Dragonfly (Opera) to inspect the DOM and the current styles.
5. Change the CSS on the fly, reload the page, and look at the result and the DOM again.

Is there any browser or combination of browser, plugin and process available to get similar results? If you have ideas how to change the organizations of the files, with the most minimal changes to get the wished result, you are welcome.

Answer: 
Chrome Developer Tools has this feature.

1. Open Chrome Developer Tools for the page you want to test.
2. Open the **Drawer** if not already open. (Press `Esc`.)
3. Open the **Emulation** tab.
4. Click **Media** in the left menu.
5. Check **CSS media** and select **print** from the select box

Source: <https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types>
I have found a different solution to my problem inspired by [Using Rails 3.1 assets pipeline to conditionally use certain css](https://stackoverflow.com/questions/7134034/using-rails-3-1-assets-pipeline-to-conditionally-use-certain-css). Here is how it works:

* Use in the main HTML file the following directives for stylesheets:

```
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

```
* isolate all rules in your stylesheets that are

	+ appropriate for screen and print (Stylesheet: `application.css`)
	+ appropriate only for screen (Stylesheet: `screen.css`)
	+ appropriate only for print (Stylesheet: `print.css`)
* During test of the print-out of your web page, switch the stylesheets in your main HTML file:

```
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

```

Notice the switch in the second and third line for `media="print|screen"`.

As the result, you are now able to call your main HTML file, and see how it will look if you print it out under normal conditions. All the tools you normally use (Firefox Firebug, Chrome Developer Tools, Opera DragonFly, ...) will work as normally, so you are able to check your DOM, see the boxes, change CSS on the fly and just reload your page then.

Works pretty well for me, if I will stumble over some drawbacks, I will come back and notate that as well.