Elements: लाइव देखिए और बदलिए
पेज का जीवंत DOM ट्री, कंप्यूटेड स्टाइल, इनहेरिटेंस और बॉक्स मॉडल के साथ। कोई मान बदलिए और डिवाइस तुरंत दोबारा रेंडर करता है — मोबाइल लेआउट बग तक पहुँचने का सबसे तेज़ रास्ता।
फ़ोन के वेब पेज कंप्यूटर से डिबग करें
अपने ब्राउज़र में F12 दबाने जैसा ही — बस पेज असली iOS या Android डिवाइस पर चल रहा होता है: ब्राउज़र टैब हों या ऐप के अंदर लगा WebView / H5। एलिमेंट इंस्पेक्ट, कंसोल एरर, सोर्स ब्रेकपॉइंट, नेटवर्क रिक्वेस्ट, कुकी और लोकल स्टोरेज।
- ऐप के WebView की रिक्वेस्ट
- फ़ोन ब्राउज़र की रिक्वेस्ट
- डिवाइस स्क्रीन पैनल के बगल में
- ऐप में बदलाव नहीं
मोबाइल वेब डिबगिंग, बिना उस लंबे चक्कर के
नीचे जो कुछ है, वह फ़ोन पर पेज डिबग करने का रोज़मर्रा है। बायाँ कॉलम बताता है कि आमतौर पर यह कैसे होता है।
| आप जो करना चाहते हैं | सामान्य तरीका | वेब इंस्पेक्टर के साथ |
|---|---|---|
| लेआउट सिर्फ़ फ़ोन पर बिगड़ता है | फ़िक्स का अंदाज़ा लगाओ, दोबारा बिल्ड करो, तैनात करो, फिर देखो | एलिमेंट और CSS लाइव बदलिए और डिवाइस को तुरंत अपडेट होते देखिए |
| सफ़ेद स्क्रीन या बटन दबाने पर कुछ नहीं होता | फ़ोन पर कंसोल नहीं है, इसलिए alert और लॉग डालने पड़ते हैं | पेज ने जैसे एरर और लॉग दिए, बिलकुल वैसे ही कंसोल में |
| पता करना कि रिक्वेस्ट किस JavaScript लाइन ने भेजी | कैप्चर रिक्वेस्ट दिखाता है, भेजने वाला कोड कभी नहीं | Sources में ब्रेकपॉइंट और स्टेप-बाय-स्टेप, वेरिएबल सामने |
| देखना कि कुकी और localStorage में असल में क्या है | रिक्वेस्ट हेडर से अंदाज़ा लगाना | पूरी तालिकाएँ — नाम, मान, डोमेन, समाप्ति, Secure, HttpOnly, SameSite — और संपादन भी |
| ऐप के भीतर बसे H5 पेज को डिबग करना | ट्रैफ़िक में दबा रहता है, जुड़ने का कोई रास्ता नहीं | अपने ऐप के नीचे सूचीबद्ध: चुनिए और किसी भी पेज की तरह डिबग कीजिए |
| रिमोट डिबगिंग को चालू भर करना | हर प्लैटफ़ॉर्म के अलग स्विच, छिपे रास्ते, झंझट भरे कदम | एक ही डायलॉग: डिवाइस चुनिए, पेज चुनिए, डिबग दबाइए |
| ट्रैफ़िक और पेज की स्थिति एक साथ देखना | कैप्चर टूल और डिबगर, अलग-अलग और आपस में बेमेल | दोनों एक ही टूल में: डिक्रिप्ट हुई रिक्वेस्ट और उसे भेजने वाला कोड |
डिवाइस पर लगे असली डेवलपर टूल्स
कटा-छँटा व्यूअर नहीं — वही पैनल जो आप कंप्यूटर पर रोज़ इस्तेमाल करते हैं, फ़ोन पर चल रहे पेज से जुड़े हुए।
Console: एरर और लाइव REPL
पेज ने जो भी एरर और लॉग बनाए, सब यहाँ; साथ में एक प्रॉम्प्ट जो आपका JavaScript उसी डिवाइस के उसी पेज के भीतर चलाता है। alert() से डिबग करने का ज़माना गया।
Sources: ब्रेकपॉइंट और स्टेप-थ्रू
लोड हुई स्क्रिप्ट और स्टाइलशीट देखिए, ब्रेकपॉइंट लगाइए, कॉल स्टैक पर चलिए और ठीक उसी क्षण के वेरिएबल जाँचिए जब गड़बड़ होती है।
Network: हर रिक्वेस्ट, वॉटरफ़ॉल में
हर रिक्वेस्ट का स्टेटस, प्रकार, स्रोत, आकार, टाइमिंग और कैश स्थिति; साथ में कुल रिक्वेस्ट, ट्रांसफ़र बाइट, DOMContentLoaded और पूरा लोड समय।
Storage: कुकी, लोकल और सेशन
डोमेन के अनुसार कुकी, उनकी समाप्ति, Secure, HttpOnly और SameSite के साथ, और बगल में localStorage तथा sessionStorage — लॉगिन-स्टेट की गुत्थी सुलझाने की सबसे तेज़ जगह।
डिवाइस की स्क्रीन आपकी स्क्रीन पर
Android पर लाइव पेज पैनल के बगल में दिखता है और आप माउस से क्लिक तथा स्क्रॉल कर सकते हैं — फ़ोन और कीबोर्ड के बीच भागे बिना, एक ही स्क्रीन पर जाँच और संचालन।
दिखता कैसा है
असली फ़ोन पर लिए गए असली सेशन — कुछ भी सजाया हुआ नहीं।
क्या-क्या डिबग कर सकते हैं
फ़ोन, टैबलेट, एमुलेटर और सिम्युलेटर, साथ ही अपने कंप्यूटर का ब्राउज़र।
| यह कंप्यूटर | iOS | Android | |
|---|---|---|---|
| ब्राउज़र टैब | ✓ | ✓ | ✓ |
| ऐप के भीतर के पेज (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| एमुलेटर / सिम्युलेटर | — | ✓ | ✓ |
| एलिमेंट और स्टाइल लाइव देखना और बदलना | ✓ | ✓ | ✓ |
| कंसोल, ब्रेकपॉइंट और स्टेप-थ्रू | ✓ | ✓ | ✓ |
| पेज के लिए नेटवर्क वॉटरफ़ॉल | ✓ | ✓ | ✓ |
| कुकी / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| पैनल के बगल में डिवाइस की स्क्रीन | — | — | ✓ |
| न सर्टिफ़िकेट, न प्रॉक्सी सेटअप | ✓ | ✓ | ✓ |
शुरू करने से पहले, एक बार की तैयारी
नीचे के तीन ब्लॉक एक-दूसरे के विकल्प हैं: जो आपके लक्ष्य से मेल खाता है वही कीजिए, और सिर्फ़ एक बार।
iOS डिवाइस
केबल जोड़िए और डिवाइस अनलॉक रखिए। Safari के लिए सेटिंग्स → Safari → Advanced → Web Inspector चालू कीजिए; Chrome के लिए Chrome Settings → Content Settings → Web Inspector।
Android डिवाइस
केबल जोड़िए और डेवलपर विकल्पों में USB डिबगिंग चालू कीजिए। एमुलेटर आम तौर पर बिना केबल भी मिल जाते हैं।
इस कंप्यूटर का ब्राउज़र
Chrome या Edge को --remote-debugging-port=9222 के साथ चलाइए, फिर पेज सूची में रिफ़्रेश दबाइए।
ऐप के अंदर का पेज भी? तो एक बात और
सिर्फ़ ब्राउज़र टैब चाहिए तो यह छोड़ दीजिए। अपना ऐप: Android में एक बार setWebContentsDebuggingEnabled(true) कॉल कीजिए, iOS 16.4 से WKWebView पर isInspectable = true सेट कीजिए। किसी और का ऐप, या कोड बदले बिना: “ऐप के अंदर के पेज भी शामिल करें” टिक कीजिए — चल रहे ऐप्स के पेज भी सूची में आ जाएँगे। Android पर Root ज़रूरी है और iOS पर यह सिर्फ़ डेवलपर-साइन किए ऐप्स के साथ चलता है।
यह हो जाने पर, हर बार बस इतना
नया कैप्चर → लक्ष्य (यह कंप्यूटर / iOS / Android) → तरीक़ा “वेब इंस्पेक्टर” → रिफ़्रेश → पेज चुनिए → Inspect। ब्राउज़र में पूरे डेवलपर टूल्स खुल जाएँगे; जितने चाहें एक साथ खोल सकते हैं।
ऐप्स के भीतर छिपे पेज भी
ज़्यादातर ऐप आधे नेटिव और आधे वेब होते हैं। परेशान करने वाले बग अक्सर उन्हीं भीतरी H5 पेजों में बैठते हैं — और वहीं सामान्य टूल आपको कुछ नहीं देते।
अपने ऐप के अनुसार समूहबद्ध
पेज सूची ऐप के हिसाब से सजी होती है, इसलिए ऐप के भीतर का चेकआउट पेज और ब्राउज़र टैब पहली नज़र में अलग दिखते हैं और आप ठीक उसी पेज से जुड़ते हैं जो चाहिए।
बस एक चेकबॉक्स
«ऐप के भीतर के पेज भी शामिल करें» चुनते ही अभी खुले ऐप्स के भीतर चल रहे पेज सूची में जुड़ जाते हैं। हटा दीजिए, फिर सिर्फ़ ब्राउज़र टैब बचते हैं।
पीछे कुछ नहीं छूटता
न ऐप दोबारा बनाना, न कुछ साइन करना, न डिवाइस पर कोई हेल्पर इंस्टॉल करना। सेशन ख़त्म, और डिवाइस वैसा ही जैसा पहले था।
ट्रैफ़िक कैप्चर के साथ
पेज यहाँ डिबग कीजिए और उसी टूल में उसी ऐप का ट्रैफ़िक कैप्चर कीजिए — डिक्रिप्ट किया हुआ HTTPS, उन ऐप्स में भी जो सर्टिफ़िकेट पिन करते हैं या सिस्टम प्रॉक्सी को अनदेखा करते हैं।
मोबाइल वेब डिबगिंग: आम सवाल
फ़ोन पर एलिमेंट कैसे इंस्पेक्ट करें?
फ़ोन को USB से कंप्यूटर से जोड़िए, Trace Eagle खोलिए, नया कैप्चर → iOS या Android → विधि «वेब इंस्पेक्टर» चुनिए, पेज चुनकर डिबग दबाइए। कंप्यूटर पर पूरा Elements पैनल खुलेगा जिसमें डिवाइस के पेज का लाइव DOM और CSS होगा; वहाँ कोई मान बदलते ही फ़ोन का पेज तुरंत बदल जाता है।
क्या ऐप बदले बिना Android WebView डिबग कर सकते हैं?
हाँ। जो WebView पहले से डिबगिंग की अनुमति देते हैं, वे सीधे सूची में दिखते हैं। जो ऐप ऐसा नहीं करते, उनके लिए «ऐप के भीतर के पेज भी शामिल करें» चुनिए — तब अभी खुले ऐप्स के पेज सूची में जुड़ जाते हैं। इसके लिए रूट किया डिवाइस चाहिए, पर कुछ भी दोबारा बिल्ड, रीपैकेज या स्थायी रूप से इंस्टॉल नहीं होता।
iPhone या iPad का वेब पेज कैसे डिबग करें?
डिवाइस जोड़िए, अनलॉक कीजिए और सेटिंग्स → Safari → उन्नत → वेब इंस्पेक्टर चालू कीजिए (या Chrome सेटिंग्स → कॉन्टेंट सेटिंग्स → वेब इंस्पेक्टर)। फिर Trace Eagle में डिवाइस और पेज चुनकर डिबग दबाइए — Elements, Console, Sources, Network, Storage, Layers समेत पूरा वेब इंस्पेक्टर आपके कंप्यूटर के ब्राउज़र में खुल जाएगा।
क्या यह chrome://inspect जैसा ही है?
यह वही काम करता है और उससे कुछ ज़्यादा, एक ही डायलॉग में। ब्राउज़र का रिमोट डिबगिंग पेज सिर्फ़ Android पर Chromium लक्ष्यों को संभालता है; यहाँ iOS, Android और स्थानीय ब्राउज़र एक ही चयन सूची में हैं, पेज ऐप के अनुसार समूहबद्ध हैं, ऐप के भीतर के H5 पेज एक चेकबॉक्स से जुड़ जाते हैं, और साथ में वह कैप्चर सुविधा है जो उसी ऐप का HTTPS ट्रैफ़िक डिक्रिप्ट करती है।
क्या जेलब्रेक या रूट चाहिए?
सामान्य डिबगिंग के लिए नहीं: ब्राउज़र टैब और वे ऐप जो पहले से अनुमति देते हैं, सामान्य डिवाइस पर ही चलते हैं। रूट किया Android डिवाइस केवल उस अतिरिक्त विकल्प के लिए चाहिए जो तीसरे पक्ष के ऐप्स के पेज जोड़ता है; iOS पर कौन-से ऐप शामिल हो सकते हैं, यह सिस्टम तय करता है।
क्या सर्टिफ़िकेट, प्रॉक्सी या ऐप में SDK चाहिए?
तीनों में से कुछ नहीं। रिमोट वेब डिबगिंग USB कनेक्शन से चलती है: न प्रॉक्सी सेट करना है, न डिवाइस पर रूट सर्टिफ़िकेट डालना है, न ऐप में कोई SDK या लाइब्रेरी जोड़नी है।
यह ट्रैफ़िक कैप्चर से कैसे अलग है?
कैप्चर बताता है कि नेटवर्क पर क्या गया — रिक्वेस्ट, रिस्पॉन्स, हेडर और बॉडी, डिक्रिप्ट किए हुए। वेब इंस्पेक्टर बताता है कि पेज ने क्या किया — DOM, स्टाइल, कंसोल एरर, रिक्वेस्ट किस स्क्रिप्ट ने भेजी और उससे पहले कुकी तथा स्टोरेज में क्या था। Trace Eagle में दोनों हैं, इसलिए टूल बदले बिना आप आगे-पीछे जा सकते हैं।
डिबगिंग विंडो किस ब्राउज़र में खुलती है?
Android और स्थानीय ब्राउज़र के सेशन Chrome, Edge या Brave में खुलते हैं (Trace Eagle इनमें से एक अपने आप चला देता है); iOS सेशन किसी भी ब्राउज़र में काम करते हैं।
क्या यह एमुलेटर और सिम्युलेटर पर चलता है?
हाँ। Android एमुलेटर आमतौर पर बिना केबल पहचान लिए जाते हैं, और कंप्यूटर पर चल रहे iOS सिम्युलेटर भी — तरीका असली डिवाइस जैसा ही है।
क्या वेब इंस्पेक्टर मुफ़्त है?
हाँ। Trace Eagle की बाकी सुविधाओं की तरह यह macOS, Windows और Linux पर पूरी तरह मुफ़्त है, कोई फ़ीचर पेवॉल नहीं।