How to Use DevTools Device Mode for Responsive Testing

· Category: VS Code & Developer Tools

Short answer

Device Mode simulates mobile viewports, touch events, and device pixel ratios. It helps developers test responsive designs without physical devices.

Steps

  1. Open DevTools and click the Toggle Device Toolbar icon (or press Ctrl+Shift+M).
  2. Select a preset device from the dropdown menu at the top.
  3. Rotate the device using the rotate button to test landscape orientation.
  4. Throttle the network and CPU from the Performance panel to simulate low-end devices.
  5. Use the device frame to approximate the visual border of popular phones.

Tips

  • Add custom device presets for your target audience's common screen sizes.
  • Enable "Show media queries" to visualize breakpoint ranges.
  • Touch emulation translates mouse clicks into touchstart events.

Common issues

  • Device Mode does not perfectly replicate OS-level behaviors like Safari rubber-banding.
  • Hover states behave differently on touch devices; test on real hardware when possible.