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>
Have you tried with [Print Friendly](https://chrome.google.com/webstore/detail/ohlencieiipommannpdfcmfdpjjmeolj) Google Chrome extension.

Its a nice extension which adds a button and generates pdf of the web page on a click.
Hope that might be easier than your current process.