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

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

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

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

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

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

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

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

अगर हो सके, तो देखें कि उपयोगकर्ता एजेंट को स्निफ़ करने की वजह से, पेज जान-बूझकर अलग तरह से काम तो नहीं कर रहा है. 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 पर गड़बड़ी की शिकायत लिखने के दिशा-निर्देश देखें.

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

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

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

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

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

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