How to add Google Pixel developer tools to Chrome?

I don't know how to add a custom Android UI device (like Nexus devices), but you can add a custom device:

• Open Chrome developer tools ( F12or Ctrl+ Shift+ I)
• Enable the device toolbar if it is not already open ( Ctrl+ Shift+ M)
• On the device toolbar, click the drop-down list for the device name and select "Edit & hellip;"
• In the "Emulated Devices" section, select the "Add custom device" button
• In the field "Device name" Google Pixel
  
  
• In the "Width" and "Height" fields, enter 412
  
  and 662
  
  respectively
• Leave "Device Pixel Ratio" and "User Agent String" blank and make sure the dropdown is set to "Mobile"
• Click the Add button

The Google Pixel will appear in the toolbar as a selectable device.

Warning:

• This does not add an Android UI, but should be a viewport representative for mobile development and testing (as measured on my device with default settings).
• It also does not account for the user changing the "Display Size" in the Google Pixel display settings, which can increase the size of the viewport.
• The viewport will be slightly shorter (less vertical pixels) in Chrome on Android when the page is loaded from the toolbar but scrolled. The values ​​above were measured without the toolbar.