Main features of Google Chrome’s Chrome Developer Tools
Google Chrome’s Developer Tools has a feature called device mode that’s loaded with helpful tools for testing and debugging responsive designs.
- Mobile device emulation: Device mode has accurate models for popular smartphones and tablets (e.g. iPhone, Galaxy, BlackBerry, Kindle, Nexus, and a ton more) that simulates how your responsive designs look and function on touchscreens. It even spoofs the UA string to match the particular device you’re testing so that you’re getting a very precise design preview of your work.
- Touch events emulation: This feature allows you to experience your designs as if you were interacting with them on your smartphone or tablet.
- Media queries inspector: This is a ridiculously useful feature that shows you all your media query breakpoints. Clicking on a breakpoint resizes your design’s preview, so you no longer have to manually resize your browser window.
- Mobile network simulation: mobile internet connectivity is different from our machine’s high-speed broadband connection. Also, many parts of the world still don’t have access to faster mobile internet technologies like LTE. Device mode can show you how your designs perform on EDGE, 3G, LTE, DSL, and WiFi to help you identify potential web performance problems.