Mobile debugging

Responsive issues को debug करना

Common issues: Text बहुत छोटा या cramped। Images overflow या distort होती हैं। Touch targets बहुत छोटे हैं। Layout unexpected widths पर breaks होता है। Debugging: Element styles inspect करने के लिए DevTools का उपयोग करें। Styles panel में media queries check करें। Viewport size check करने के लिए Console का उपयोग करें।

Console में viewport size check करें

Browser console में सीधे quick diagnostics।

// 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);

Chrome DevTools mobile emulation का उपयोग

Ctrl+Shift+M device mode को toggle करता है। Quick specific breakpoints पर test करें।

JavaScript viewport debugging

Console में viewport और device info check करें।

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