Lately, in my work, the development frontend has increased considerably, and I've found in the position of having to make multiple Web content with very specific format for viewing on web version, as in print, as you imaginaréis's content statistical results, and reports, so that the printed version of the site charges a very important role.
Until relatively recently, this work was quite heavy, since there was hardly debugging tools for different CSS Media Types (and also considering that the vast majority were implementandos CSS2 ...).
From the first moment, I assumed that Google Chrome with Developer Tools, you would have some "ace" up his sleeve, to assist us, but it turned out that I found curious that option in the tools. After get to indigar by Google I discovered not only had a tool that makes it easier, it was a complete emulation of all Types of Media and of course including your complete set of tools as an inspector of HTML elements, modifying CSS styles live, etc ...
The problem with this is that the developers of Chromium (Google Chrome base version) have moved (hidden) repeatedly this functionality, and have managed to confuse more than one.
At this time (version 37.0.2062.120 m) are in: Google Developer Tools - Emulation
Chrome Developer Tools
Linux / Windows: ctrl + shift + j or F12
Mac: cmd + alt + j or F12
If it does not automatically open the Drawer, we press ESC.
In the Drawer Console, you will see a tab that says "Emulation", here is where they currently centralized Browser Emulation:
Devices: To emulate devices depending on model, resolution etc ...
Media: To emulate Media Types.
This feature can save us an incredible time when debugging code in web development, adding all the power you have the inspector of the Google Chrome Developer Tools, and real-time previewer.