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: 
The Firefox pluging called "Web Developer" ( <https://addons.mozilla.org/en-US/firefox/addon/web-developer/>) has a "Display CSS By Media Type" option.
Here is a practice that I have found helpful with styling for print when the print layout needs to be a modification of the generic styling. 

1. Create a print style sheet that uses @media print { } to frame the print styles
2. Apply that style sheet last
3. While working on print styles, temporarily comment out the lines that frame your print styles
4. Use Firebug and Web Developer in you accustomed way
5. Uncomment the media bracketing

Something like: 

```

/* @media print { */

    #sidebar {display:none;}

/* } */

```