वेब इंस्पेक्टर

ऐसा लेआउट जो सिर्फ़ फ़ोन पर टूटता है, कोई बटन जो दबाने पर कुछ नहीं करता, कोई H5 पेज जो सफ़ेद ही रह जाता है — कंप्यूटर पर F12 दबाइए और तुरंत वजह दिख जाती है। फ़ोन पर आम तौर पर बस alert डालना, दोबारा बिल्ड करना, और फिर देखना ही बचता है। वेब इंस्पेक्टर उन्हीं डेवलपर टूल्स को डिवाइस पर चल रहे असली पेज से सीधे जोड़ देता है: केबल लगाइए, और Elements, Console, Sources, Network और Storage आपके कंप्यूटर पर खुल जाते हैं; कोई वैल्यू बदलते ही डिवाइस तुरंत दोबारा रेंडर हो जाता है।

---

1. पैकेट कैप्चर के साथ काम का बँटवारा

आपको दोनों चाहिए, लेकिन ये अलग-अलग सवालों के जवाब देते हैं:

	पैकेट कैप्चर	वेब इंस्पेक्टर
जवाब देता है	नेटवर्क पर क्या गया	पेज ने क्या किया
दिखाता है	रिक्वेस्ट / रिस्पॉन्स, हेडर, बॉडी (डिक्रिप्ट की हुई)	DOM ट्री, लागू स्टाइल, कंसोल एरर, कॉल स्टैक, कुकी और स्टोरेज
सामान्य सवाल	यह एंडपॉइंट क्या लौटाता है, पैरामीटर सही हैं या नहीं	यह रिक्वेस्ट किस लाइन के जावास्क्रिप्ट ने भेजी, यह स्टाइल क्यों नहीं लगी

कैप्चर रिक्वेस्ट दिखाता है, लेकिन कभी नहीं दिखाता कि उसे किसने भेजा; इंस्पेक्टर Sources में ब्रेकपॉइंट लगाकर आपको ठीक उसी लाइन तक ले जाता है। दोनों एक ही सॉफ़्टवेयर में हैं, तो बीच में स्विच करने में कुछ खर्च नहीं होता।

---

2. एक बार की तैयारी

नीचे के तीन ब्लॉक एक-दूसरे के विकल्प हैं: जो आपके लक्ष्य से मेल खाता है वही कीजिए, और सिर्फ़ एक बार।

iOS डिवाइस

केबल जोड़िए, डिवाइस अनलॉक रखिए, और वेब इंस्पेक्टर का स्विच चालू कीजिए:

• Safari: सेटिंग्स → Safari → Advanced → Web Inspector
• Chrome: Chrome Settings → Content Settings → Web Inspector

यह वह क़दम है जो iOS पर सबसे ज़्यादा छूट जाता है। इसके बिना डिवाइस पहचाना तो जाता है, लेकिन पेज की सूची खाली रह जाती है।

Android डिवाइस

केबल जोड़िए और डेवलपर विकल्पों में USB डिबगिंग चालू कीजिए। Android एमुलेटर आम तौर पर बिना केबल भी मिल जाते हैं।

इस कंप्यूटर का ब्राउज़र

Chrome या Edge को --remote-debugging-port=9222 के साथ चलाइए, फिर पेज सूची में रिफ़्रेश दबाइए।

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

---

3. ऐप के अंदर का पेज भी? तो एक बात और

सिर्फ़ ब्राउज़र टैब चाहिए तो यह हिस्सा छोड़ दीजिए।

अपना ऐप: कोड में एक बार चालू कीजिए।

// Android: Application या Activity शुरू होने पर एक बार कॉल कीजिए
WebView.setWebContentsDebuggingEnabled(true);

// iOS 16.4 से: WKWebView को इंस्पेक्ट-योग्य बनाइए
webView.isInspectable = true

किसी और का ऐप, या कोड बदले बिना: डायलॉग में “ऐप के अंदर के पेज भी शामिल करें” टिक कीजिए, और चल रहे ऐप्स के अंदर के पेज भी सूची में जुड़ जाएँगे। टिक हटाइए, तो फिर सिर्फ़ ब्राउज़र टैब बचेंगे।

	शर्त	नोट
Android	Root किया हुआ डिवाइस	चल रहे ऐप्स पर WebView डिबगिंग चालू करता है, दोबारा पैकेज करने की ज़रूरत नहीं
iOS	सिर्फ़ डेवलपर-साइन किए ऐप्स	सिस्टम की सीमा — App Store से इंस्टॉल किए ऐप्स शामिल नहीं हो सकते

किसी भी तरीक़े में ऐप को दोबारा बिल्ड नहीं करना पड़ता, साइन नहीं करना पड़ता, और डिवाइस पर कोई मददगार प्रोग्राम इंस्टॉल नहीं होता। सेशन ख़त्म होने पर डिवाइस पहले जैसा हो जाता है।

---

4. डिबगिंग शुरू कीजिए

यह हो जाने पर, हर बार बस इतना करना है:

नया कैप्चर → लक्ष्य (यह कंप्यूटर / iOS / Android) → तरीक़ा “वेब इंस्पेक्टर” → रिफ़्रेश → पेज चुनिए → Inspect

• पेज उनके मालिक ऐप के हिसाब से समूहबद्ध दिखते हैं, तो एक नज़र में पता चल जाता है कि कौन-सा ऐप के अंदर का पेज है और कौन-सा ब्राउज़र टैब।
• Inspect दबाने पर आपके कंप्यूटर के ब्राउज़र में पूरे डेवलपर टूल्स खुल जाते हैं, जो उस डिवाइस के उसी पेज से जुड़े होते हैं।
• जितने चाहें एक साथ खोल सकते हैं — हर पेज के लिए एक विंडो, सब एक साथ चलते हुए।

डिबगिंग विंडो किस ब्राउज़र में खुलती है

Android और लोकल ब्राउज़र सेशन के लिए Chrome, Edge या Brave चाहिए (Trace Eagle ख़ुद इनमें से एक चला देता है); iOS सेशन किसी भी ब्राउज़र में ठीक काम करते हैं।

---

5. क्या-क्या दिखता है

वही पैनल जो आप रोज़ कंप्यूटर पर इस्तेमाल करते हैं, बस अब फ़ोन के उस पेज की ओर।

पैनल	क्या करता है
Elements	पेज का लाइव DOM ट्री, लागू स्टाइल, इनहेरिटेंस और बॉक्स मॉडल के साथ। कोई वैल्यू बदलिए, डिवाइस तुरंत दोबारा रेंडर हो जाता है — मोबाइल लेआउट बग पकड़ने का सबसे तेज़ तरीक़ा
Console	पेज ने जो भी एरर और लॉग दिए, सब यहाँ; साथ ही एक प्रॉम्प्ट जो उसी डिवाइस के उसी पेज में सीधे जावास्क्रिप्ट चला देता है
Sources	पेज ने जो स्क्रिप्ट और स्टाइलशीट लोड कीं, वे देखिए; ब्रेकपॉइंट लगाइए, कॉल स्टैक फ़ॉलो कीजिए, और जब गड़बड़ी हो ठीक उसी पल वैरिएबल देखिए
Network	पेज ने जो भी रिक्वेस्ट भेजी, वॉटरफ़ॉल में: स्टेटस, टाइप, शुरुआत की जगह, साइज़, टाइमिंग और कैश की स्थिति; नीचे कुल रिक्वेस्ट, ट्रांसफ़र हुआ डेटा, DOMContentLoaded और पूरा लोड टाइम भी
Storage	डोमेन के हिसाब से समूहबद्ध कुकी — expiry, Secure, HttpOnly और SameSite के साथ — बगल में localStorage और sessionStorage; लॉगिन-स्टेट की गड़बड़ी सुलझाने का सबसे तेज़ तरीक़ा

Android पर, डिवाइस की लाइव स्क्रीन पैनल के बगल में दिखती है और उसे माउस से क्लिक-स्क्रॉल किया जा सकता है — जाँच और इस्तेमाल एक ही स्क्रीन पर होता है, फ़ोन और कीबोर्ड के बीच बार-बार जाने की ज़रूरत नहीं।

---

6. सपोर्ट का दायरा

	यह कंप्यूटर	iOS	Android
ब्राउज़र टैब	✓	✓	✓
ऐप के अंदर के पेज (WebView / WKWebView / H5)	✓	✓	✓
एमुलेटर / सिम्युलेटर	—	✓	✓
एलिमेंट और स्टाइल लाइव देखना-बदलना	✓	✓	✓
कंसोल, ब्रेकपॉइंट और स्टेप-थ्रू	✓	✓	✓
पेज के लिए नेटवर्क वॉटरफ़ॉल	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
डिवाइस स्क्रीन पैनल के बगल में	—	—	✓
सेट करने के लिए कोई सर्टिफिकेट या प्रॉक्सी नहीं	✓	✓	✓

---

7. कुछ दिख नहीं रहा? पहले ये देखिए

लक्षण	अक्सर वजह	क्या करें
डिवाइस मिल गया, पेज सूची खाली	iOS का वेब इंस्पेक्टर बंद है, या स्क्रीन लॉक है	सेक्शन 2 के मुताबिक चालू कीजिए, अनलॉक रखिए, फिर रिफ़्रेश दबाइए
Android पर ऐप के अंदर के पेज नहीं दिखते	उस WebView में डिबगिंग कभी चालू नहीं हुई	अपना ऐप: setWebContentsDebuggingEnabled(true) जोड़िए; किसी और का ऐप: “ऐप के अंदर के पेज भी शामिल करें” टिक कीजिए (Root चाहिए)
iOS का कोई ख़ास ऐप कभी नहीं दिखता	सिस्टम की सीमा	App Store के बिल्ड शामिल नहीं हो सकते — सिर्फ़ डेवलपर-साइन किए ऐप्स ही चलते हैं
लोकल ब्राउज़र में कोई पेज नहीं दिखता	डिबगिंग पोर्ट के बिना शुरू हुआ था	Chrome / Edge को --remote-debugging-port=9222 के साथ दोबारा चलाइए, फिर रिफ़्रेश कीजिए
Inspect दबाने पर कुछ नहीं होता	कोई असमर्थित ब्राउज़र इस्तेमाल हो रहा है	Android और लोकल सेशन के लिए Chrome, Edge या Brave चाहिए

---

8. इसे कब इस्तेमाल करें

• कोई गड़बड़ी सिर्फ़ फ़ोन पर होती है: लेआउट, टच एरिया, फ़ॉन्ट रेंडरिंग।
• H5 पेज सफ़ेद रह जाता है या काम नहीं करता, और कंसोल एरर व कॉल स्टैक देखना है।
• यह जानना है कि किसी रिक्वेस्ट को किस स्क्रिप्ट ने भेजा — सिर्फ़ कैप्चर से यह नहीं पता चलता।
• लॉगिन या कैश से जुड़ी किसी समस्या को पकड़ रहे हैं और देखना है कि कुकी व स्टोरेज में असल में क्या है।
• ऐप में embed किए H5 को डिबग करना है — यहाँ आम टूल्स कुछ नहीं देते।

---

शुरू करें पर वापस जाएँ · संबंधित: जाँचें और डिकोड करें · iOS कैप्चर · Android कैप्चर