From the course: Learning Chrome Web Developer Tools

View a page in Device Mode - Chrome Tutorial

From the course: Learning Chrome Web Developer Tools

Start my 1-month free trial

View a page in Device Mode

“

- [Instructor] For this course, I'll be working with the Binaryville site, which is a responsive site for a robot-themed fictitious company. I've been developing this site on my desktop computer, but I also need to do some testing to make sure it's going to work on mobile devices. Testing mobile layouts and interactions can be a challenge, especially if your site is designed with different layouts at different screen resolutions. Testing can require you to assemble multiple devices and test individually or using a synced server. For some parts of the development process though, it's quicker and less complicated to test using a simulator, which is software that's designed to behave like a certain device. Chrome DevTools lets me simulate the appearance and behavior of a site on smaller screen sizes that use touch input with Device Mode. To enter Device Mode, I click the Toggle Device Toolbar button near the top left of the DevTools. I can also toggle it with Command + Shift + M on Mac or Control + Shift + M on Windows. When I enter Device Mode, the display of my page changes to show an entire screenfull at a specified resolution. At the top of the page is a device toolbar, which gives me a few options for changing the display. By default, the page is displayed in Responsive mode, which allows me to resize the viewport and see the page at different device widths. Next to that, the toolbar shows the current width and height in pixels. I can change these numbers manually if I want to see a specific set of dimensions as well. The next dropdown allows me to change the zoom level. So I can see a full pixel representation on my screen or back off and get a better idea of what the site looks like on the device. On some computers and some versions of Chrome, the Device Mode uses a noticeable chunk of the processor as long as it's open. This can result in the computer fan running and even other tabs or apps responding more slowly. So when I'm done using Device Mode, I like to toggle it off until I need to use it again and I can do that the same way I opened it, by clicking the Device Mode button. Now I'm back to the default view of my website based on my browser window size and my monitor resolution.

Contents