# Mobile debugging — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/debugging-mobile

> Remote debugging का उपयोग करें, actual devices पर elements को inspect करें, और responsive layout issues को troubleshoot करने के लिए browser console का leverage करें।

## 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।

```javascript
// 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 करें।

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