 Oh, hello there! I was testing how my website looks on a mobile device. Hmm, it is quite troublesome to keep testing on different devices, such as mobile and tablet during development, isn't it? Don't you find it time-consuming? Tell us in the comments below. You can save time by using DevTools device mode to simulate how your page looks and how it performs on a mobile device. First, click Toggle Device Toolbar to open the UI to start simulating a mobile viewport. Alternatively, you can use the Control Shift M on Windows or Command Shift M on macOS to toggle it. By default, the Device Toolbar opens in viewport with dimensions set to responsive. You can drag the handles to resize the viewport or enter specific width and height to wherever dimensions you need. Even better, there are four ways to help you switch between viewport sizes even quicker. First one, can you see the bar on the top with some preset sizes? Hover over them to view the values or click on them to update the viewport size instantly. On top of that, you can rotate the viewport to landscape orientation to find out how your page looks. One thing to note though, in case your screen size is too narrow, the rotate button will disappear. Second, if you have defined CSS breakpoints in your web page, you can show them on the top bar as well. For example, there are two media queries breakpoints on this page. You can identify them by clicking on the three-dot menu, select Show media queries to see them. Similarly, you can click a breakpoint to change the viewports width. Apart from that, DevTools provides a list of predefined common devices to help you emulate your page's layout. On the dimension dropdown, you can see these devices such as iPhone, Pixel or Nest Hub. Let's select Nest Hub for this demo. Time for a bonus tip, some devices have device frame. You can enable it via the three-dot menu and take a screenshot. Look at that, isn't that nice? Besides that, you can customize the device list or add a custom device. Select Edit from the dropdown menu. You can add or remove any device from the list. You can also create a new customized device. The dimension list will refresh according to your selection. Fourth, a less-known way to change the viewport size is to enable the ruler mode. Select Show rulers in the three-dot menu. Now, you can see the two rulers shown on the screen. You can click on the number to set the device width and height. Finally, another bonus tip just for you. You can use the throttling dropdown to simulate your page's performance on slow CPU and low bandwidth network. For example, the low-end mobile option emulates a slow CPU by six times and a slow 3G mode. Next, select Offline mode and refresh the page. In this case, you will see the offline Dino as expected. However, that's not always the case. There are websites that support offline content. For example, the Angular website has a solid offline experience. Most navigations still work even if the page is offline. In this case, you can use the offline option to test it. All right, now you don't need multiple devices. This emulator can save you time and simulate a mobile user experience of your website. For more device mode features in DevTools, go to google.geal-dev2-device-mode for the complete documentation. If you want to learn more about responsive design and building offline experiences, there are two courses on web.dev. The links are in my video description. Thanks again for watching. See you on the next DevTools Tips. Ciao!