How to test print output of browsers with online tools? [duplicate]

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 1

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