Lesson 17 / 25

Debugging mobile

Use remote debugging, inspect elements on actual devices, and leverage browser console to troubleshoot responsive layout issues.

Debugging responsive issues

Common issues: Text too small or cramped. Images overflow or distort. Touch targets too small. Layout breaks at unexpected widths. Debugging: Use DevTools to inspect element styles. Check media queries in styles panel. Use Console to check viewport size.

Check viewport size in Console

Quick diagnostics directly in the browser console.

// Check viewport dimensions
console.log(`${window.innerWidth}x${window.innerHeight}`);

// Check if touch is supported
console.log('Touch supported:', window.ontouchstart !== undefined);

// Check device pixel ratio
console.log('Device pixel ratio:', window.devicePixelRatio);

Using Chrome DevTools mobile emulation

Ctrl+Shift+M toggles device mode. Test at specific breakpoints quickly.

JavaScript viewport debugging

Check viewport and device info in the console.

// Comprehensive viewport info
console.log({
  width: window.innerWidth,
  height: window.innerHeight,
  dpr: window.devicePixelRatio,
  isTouch: 'ontouchstart' in window,
  orientation: window.orientation,
  userAgent: navigator.userAgent
});