Preview a Website on All Devices Using Chrome Inspect

Prev Next

During a website redesign, or at any time, it is important to know how your website renders for various screen sizes and devices. Chrome has an extension within its Inspect toolbar that allows you to preview these from your desktop.

Instructions

  1. Navigate to your website

    Note:

    It is preferred that you do not log in.

  2. Right-click anywhere on the page and click the Inspect option in the context menu that appears:A homepage with a right-click context menu and the Inspect menu option highlighted.

  3. Press Ctrl + Shift + M on your keyboard, or click the Toggle device toolbar button (device icon) in the top-left corner of the Inspect panel:The Chrome Inspect console with the Toggle Device Toolbar icon highlighted.

  4. Your website will likely have shifted display to a default option; to change this, click on the Dimensions dropdown above the website display and select any option you wish to preview:The Chrome Inspect tool screen with the Dimensions drop-down menu expanded showing options.