Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
jasonjones5
Courses Plus Student 5,571 PointsHow effective is Chrome's developer tool for viewing alternate devices like mobile?
Hi, I've started using the above to get some idea of what my builds will look like on other devices, but I've no idea how representative they are. Is there a better way to do this for little/no cost?
5 Answers
Marcus Parsons
15,719 PointsWhile you're in Developer Tools, you can click the mobile icon on the far left side of the screen right beside the magnifying glass. This will toggle "Device Mode" on/off, and with Device Mode on, you can select from popular devices to see what your page looks like on that device or enter your own custom resolution. It will also allow you to see what your page would look like across different browsers by sending a spoof user agent string to the website you're visiting.
jasonjones5
Courses Plus Student 5,571 PointsThanks Marcus, had no idea about the user agent. Will have to put those in a file somewhere.
Marcus Parsons
15,719 PointsAwesome! If you want to go ahead and mark my answer as the Best Answer, we can close this question out unless there's anything else you want to ask right now?
jasonjones5
Courses Plus Student 5,571 PointsWhat I was really wondering was if the device view mode is exactly as it would appear on the device or just roughly. It seems to be a great tool but I'm still learning so don't want to fall into bad habits and have to redo stuff. If there's a better way I'll use it.
Marcus Parsons
15,719 PointsWe are talking about Google Chrome here, not some random browser, but those are the exact resolutions of devices. I believe it is the easiest and most reliable way of testing.
jasonjones5
Courses Plus Student 5,571 PointsFair point. The question was actually prompted by a broken interpretation of my site on a couple of devices and I didn't get why. Based on your comments it's more to do with my understanding of CSS/resets than the tool. Very useful, thanks.
Marcus Parsons
15,719 PointsAnytime, Jason. A useful and neat extension you can try out is the "Window Resizer" extension for Chrome. It let's you know the actual size of the window and the viewport as you resize the browser. It certainly helps when using media queries at different breakpoints.
Julian Silvestri
4,214 PointsBe wary of this link here. Check it out regarding the developer tools. https://developers.google.com/web/tools/chrome-devtools/device-mode/