+6 votes
349 views
in Android by (6.6k points)
Debug code through emulation for Devices and Media Types in Google Chrome

1 Answer

+7 votes
by (201k points)
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 
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.
Ask a Question
Welcome to WikiTechSolutions where you can ask questions and receive answers from other members of the community.

You can ask a question without registration.

Categories

...