How to Preview Your Website on Different Devices Using Google Chrome

With responsive design, you can build a website that looks as good on a phone as it does on a desktop. But how do you test your design across devices?

When you create a website, you want it to be responsive and adapt to different screen sizes. One way to test this is by using Google Chrome’s built-in developer tools.

Chrome’s DevTools allows you to debug different aspects of your website. This includes changing and previewing the HTML source code and CSS. It also allows you to debug client-side JavaScript code, and view network traffic.

DevTools also has an option to preview your website on different devices. This includes different types of mobile devices, iPads, tablets, and more.

To open the Device toolbar on Google Chrome, you need to open the Chrome Developer Tools window:

  1. Open the website.
  2. Right-click on the page and click on inspection.

  3. The Chrome DevTools window will open. It may open to the side or bottom of your browser, or as a new window.

  4. On the top left of the window, there are two icons. Click on the icon that shows multiple devices of different sizes.

  5. The screen will change to show you what the website would look like on a mobile device.

How to Switch Between Different Devices

Use the dropdown at the top of the device toolbar to switch between different devices.

  1. The very top of the toolbar will display what type of device you are currently viewing your website in. Click on the dropdown to choose another device from the list.

  2. Instead of choosing an existing device, you can choose to view the website in responsive mode. Click on the dropdown and select the responsive option.
  3. Next to the dropdown, you can also choose to enter a custom width and height of a device.

  4. Instead of typing in a width and height, you can also click and drag the corners of the window to adjust the size.


How to Add a Custom Device

If you would like to save a custom width and height, you can add a custom device. The device toolbar will then display your new device in the dropdown for devices.

  1. Click on the dropdown that lists all devices.
  2. click on Edit.
  3. Under the Settings sidebar, make sure you have the devices tab selected. Here, you can also view a list of more devices that you can choose from.
  4. click on Add custom device.
  5. Enter a name, width, and height for the device. Make sure you also select the device type, such as whether it is a mobile or desktop device. If you expand the User agent client hints option, you can add other details such as the device model, brand, or version.

  6. click on add.
  7. Go back to the dropdown that lists all devices. You will see your new custom device on the list.

  8. You can edit these details again later by going back to the custom device page. Click on the edit button next to your device’s name to start editing.

It’s very useful to be able to preview your website on different devices and screen sizes, for several reasons.

Firstly, you can test the performance of your website on different devices. Some mobiles may have faster network speeds or CPU throttling than others.

The device toolbar allows you to toggle between different network speed options. This allows you to test the speed of any calls to a server, or to test the loading and rendering of data on your website.

Additionally, you can also view what the design looks like on a particular device, from a UI point of view. If you are using CSS media queries, you can use this tool to check that they’re working as you expect.

You can use Google Chrome’s DevTools window to test how your website adapts to different screen sizes and to ensure your website is responsive. You can also use it to test the performance of your website, and if your media queries are working as expected.

You can also use Google Chrome’s DevTools for other purposes. You can use it to debug any CSS issues by changing the CSS under the Styles tab of the Element window. This allows you to view any CSS changes straight away, which can speed up your coding workflow.

Google Searchbar

How to Use Google Chrome to Debug CSS

Read Next

Leave a Comment

%d bloggers like this: