ब्राउज़र की गड़बड़ी को ठीक करने का तरीका

आपको ब्राउज़र में मिलने वाली समस्याओं के बारे में ब्राउज़र वेंडर को बताना वेब प्लैटफ़ॉर्म को बेहतर बनाने का एक ज़रूरी हिस्सा है.

गड़बड़ी की जानकारी देने वाला अच्छा बग फ़ाइल करना, जिसमें थोड़ी मेहनत लगती है. आपका मकसद यह होना चाहिए कि ब्राउज़र इंजीनियर, गड़बड़ी का पता लगा सकें और उसके मूल कारण तक पहुंच सकें. सबसे अहम बात यह है कि वे गड़बड़ी को ठीक करने का तरीका ढूंढ सकें. तेज़ी से बढ़ने वाले बग, तेज़ी से दोबारा बन जाते हैं. साथ ही, इनकी वजह से होने वाली समस्या के बारे में साफ़ तौर पर पता चलता है.

सबसे पहले, यह पता लगाना होगा कि "सही" व्यवहार कैसा होना चाहिए.

सही तरीका क्या है?

MDN पर, एपीआई से जुड़े काम के दस्तावेज़ देखें या इससे जुड़ी जानकारी ढूंढें. इस जानकारी से यह तय करने में मदद मिलती है कि कौनसा एपीआई काम नहीं कर रहा है, कहां काम नहीं कर रहा है, और उसका सही तरीका क्या है.

क्या यह किसी दूसरे ब्राउज़र में काम करता है?

आम तौर पर, ब्राउज़र के बीच अलग-अलग व्यवहार को इंटरऑपरेबिलिटी से जुड़ी समस्या के तौर पर प्राथमिकता दी जाती है. ऐसा तब होता है, जब गड़बड़ी वाला ब्राउज़र, बाकी ब्राउज़र से अलग हो. Chrome, Firefox, Safari, और Edge के नए वर्शन पर जांच करके देखें. इसके लिए, आपको BrowserStack जैसे टूल का इस्तेमाल किया जा सकता है.

अगर हो सके, तो देखें कि उपयोगकर्ता एजेंट को स्निफ़ करने की वजह से, पेज जान-बूझकर अलग तरह से काम तो नहीं कर रहा है. Chrome DevTools में, User-Agent स्ट्रिंग को किसी दूसरे ब्राउज़र पर सेट करने की कोशिश करें.

क्या हाल ही में रिलीज़ किए गए वर्शन में यह समस्या आई है?

क्या यह पहले की उम्मीद के मुताबिक काम करता था, लेकिन हाल ही में ब्राउज़र रिलीज़ के दौरान यह काम करना बंद कर देता है? ऐसे रेग्रेशन को तुरंत ठीक किया जा सकता है. खास तौर पर, अगर आपने उस वर्शन का नंबर दिया है जहां यह काम किया और उस वर्शन का नंबर दिया है जहां यह काम नहीं किया. ब्राउज़र के पुराने वर्शन की जांच करने के लिए, BrowserStack जैसे टूल का इस्तेमाल किया जा सकता है. बदलाव को खोजने के लिए, bisect-builds टूल (Chromium के लिए) जैसे टूल का इस्तेमाल करें.

अगर कोई समस्या, पहले ठीक होने के बाद फिर से आती है और उसे दोहराया जा सकता है, तो आम तौर पर उसकी मूल वजह का पता लगाकर उसे तुरंत ठीक किया जा सकता है.

क्या दूसरे लोगों को भी यही समस्या दिख रही है?

अगर आपको समस्याएं आ रही हैं, तो हो सकता है कि अन्य डेवलपर को भी समस्याएं आ रही हों. सबसे पहले, Stack Overflow पर गड़बड़ी खोजें. इससे आपको किसी ऐब्सट्रैक्ट समस्या को, काम न करने वाले एपीआई में अनुवाद करने में मदद मिल सकती है. साथ ही, जब तक गड़बड़ी ठीक नहीं हो जाती, तब तक आपको थोड़ी-बहुत दिक्कतों को दूर करने में भी मदद मिल सकती है.

क्या इसकी शिकायत पहले भी की गई है?

बग के बारे में पता चलने के बाद, ब्राउज़र के बग डेटाबेस को खोजकर यह देखें कि बग की शिकायत पहले से की गई है या नहीं.

अगर आपको कोई मौजूदा गड़बड़ी मिलती है, जिसमें समस्या के बारे में बताया गया है, तो गड़बड़ी को स्टार दें, पसंद करें या उस पर टिप्पणी करें. साथ ही, कई साइटों पर, आपके पास कॉपी के तौर पर ईमेल पाने वालों की सूची में खुद को जोड़ने का विकल्प होता है. इससे, गड़बड़ी ठीक होने पर आपको अपडेट मिलते रहेंगे.

अगर आपको गड़बड़ी के बारे में टिप्पणी करनी है, तो इस बारे में जानकारी शामिल करें कि गड़बड़ी से आपकी वेबसाइट पर क्या असर पड़ता है. "+1" वाली टिप्पणियां जोड़ने से बचें, क्योंकि गड़बड़ी ट्रैकर आम तौर पर हर टिप्पणी के लिए ईमेल भेजते हैं.

गड़बड़ी की शिकायत करना

अगर गड़बड़ी की शिकायत पहले नहीं की गई थी, तो ब्राउज़र वेंडर को इसके बारे में बताएं.

छोटा किया गया टेस्ट केस बनाना

Mozilla के पास एक छोटा टेस्ट केस बनाने के तरीके के बारे में एक बढ़िया लेख है. लंबी कहानी को छोटा करने के लिए, समस्या के बारे में जानकारी देना एक बेहतरीन शुरुआत है. हालांकि, गड़बड़ी के बारे में बताने के लिए, लिंक किया गया डेमो देना सबसे बेहतर तरीका है. समस्या को जल्द से जल्द हल करने के लिए, उदाहरण में समस्या को दिखाने के लिए ज़रूरी कम से कम कोड होना चाहिए. कम से कम कोड सैंपल वह है जिससे आपकी गड़बड़ी के ठीक होने की संभावना बढ़ सकती है.

टेस्ट केस को छोटा करने के लिए, यहां कुछ सलाह दी गई हैं:

  • वेब पेज डाउनलोड करें, <base href="https://original.url"> जोड़ें, और पुष्टि करें कि बग स्थानीय तौर पर मौजूद है. अगर यूआरएल एचटीटीपीएस का इस्तेमाल करता है, तो इसके लिए लाइव एचटीटीपीएस सर्वर की ज़रूरत पड़ सकती है.
  • ज़्यादा से ज़्यादा ब्राउज़र के नए वर्शन पर, लोकल फ़ाइलों की जांच करें.
  • सभी जानकारी को एक फ़ाइल में डालने की कोशिश करें.
  • कोड को तब तक हटाएं, जब तक गड़बड़ी ठीक न हो जाए. इसके लिए, सबसे पहले उन चीज़ों को हटाएं जो आपके हिसाब से ज़रूरी नहीं हैं.
  • वर्शन कंट्रोल का इस्तेमाल करें, ताकि आप अपने काम को सेव कर सकें और गलत काम को पहले जैसा कर सकें.

छोटा किया गया टेस्ट केस होस्ट करना

अगर आपको अपने छोटे किए गए टेस्ट केस को होस्ट करने के लिए कोई अच्छी जगह चाहिए, तो इसके लिए कई अच्छी जगहें उपलब्ध हैं:

ध्यान रखें कि इनमें से कई साइटें, कॉन्टेंट को iframe में दिखाती हैं. इससे, सुविधाओं या गड़बड़ियों के काम करने का तरीका अलग हो सकता है.

अपनी समस्या दर्ज करें

छोटा किया गया टेस्ट केस मिलने के बाद, उस गड़बड़ी की शिकायत की जा सकती है. गड़बड़ी ट्रैक करने वाली सही साइट पर जाएं और नई समस्या बनाएं.

समस्या के बारे में साफ़ तौर पर बताएं. साथ ही, यह भी बताएं कि इस समस्या तक पहुंचने के लिए क्या कदम उठाने होंगे

सबसे पहले, समस्या के बारे में साफ़ तौर पर बताएं, ताकि इंजीनियर तुरंत समझ सकें कि समस्या क्या है और उसे ठीक करने में मदद मिल सके.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

इसके बाद, समस्या को फिर से बनाने के लिए ज़रूरी चरणों के बारे में पूरी जानकारी दें. यहां आपका छोटा किया गया टेस्ट केस लागू होता है.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

आखिर में, अनुमानित और असल नतीजे के बारे में बताएं.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

ज़्यादा जानकारी के लिए, MDN पर गड़बड़ी की शिकायत लिखने के दिशा-निर्देश देखें.

बोनस: समस्या का स्क्रीनशॉट या स्क्रीनकास्ट जोड़ें

हालांकि, ऐसा करना ज़रूरी नहीं है, लेकिन समस्या का स्क्रीनशॉट या स्क्रीनकास्ट जोड़ने से अक्सर मदद मिलती है. यह सुविधा खास तौर पर तब मददगार होती है, जब कई चरणों या असामान्य गतिविधि के बाद गड़बड़ियां होती हैं. स्क्रीनकास्ट और स्क्रीनशॉट अक्सर बेहतर तरीके से दिखा सकते हैं कि ब्राउज़र इंजीनियर के साथ क्या हुआ.

एनवायरमेंट की जानकारी शामिल करना

कुछ गड़बड़ियां सिर्फ़ कुछ ऑपरेटिंग सिस्टम या कुछ खास तरह के डिसप्ले (उदाहरण के लिए, कम-डीपीआई या ज़्यादा-डीपीआई) पर ही दिखती हैं. इस्तेमाल किए गए किसी भी टेस्ट एनवायरमेंट की जानकारी शामिल करना न भूलें.

गड़बड़ी की जानकारी सबमिट करें

आखिर में, गड़बड़ी के बारे में बताएं. गड़बड़ी के जवाब पाने के लिए, अपने ईमेल पर नज़र रखें. आम तौर पर, जांच के दौरान, इंजीनियर से कुछ और सवाल पूछे जा सकते हैं. अगर उन्हें समस्या को फिर से पैदा करने में समस्या आती है, तो वे आपसे संपर्क कर सकते हैं.