ब्राउज़र वेंडर को उनके ब्राउज़र में मिलने वाली समस्याओं के बारे में बताना वेब प्लैटफ़ॉर्म को बेहतर बनाने का एक ज़रूरी हिस्सा है!
एक अच्छी गड़बड़ी को दर्ज करना कठिन नहीं है, लेकिन इसमें थोड़ा काम करना पड़ता है. मकसद, टूटे हुए कॉन्टेंट को ढूंढना, उसकी असल वजह तक पहुंचना, और उसे ठीक करने का तरीका ढूंढना आसान बनाना है. जिन गड़बड़ियों में तेज़ी से बदलाव होता है उन्हें आसानी से ठीक से देखा जा सकता है.
पुष्टि करें कि यह एक बग है
पहला कदम यह पता लगाना है कि "सही" व्यवहार क्या होना चाहिए.
काम करने का सही तरीका क्या है?
MDN पर काम के एपीआई दस्तावेज़ देखें या मिलती-जुलती जानकारी ढूंढने की कोशिश करें. इस जानकारी से आपको यह तय करने में मदद मिल सकती है कि असल में कौनसा एपीआई काम नहीं करता है, वह कहां काम करता है, और उसका सही तरीका क्या है.
क्या यह किसी दूसरे ब्राउज़र में काम करता है?
ब्राउज़र के बीच अलग व्यवहार को आम तौर पर इंटरऑपरेबिलिटी की समस्या के तौर पर प्राथमिकता दी जाती है, खास तौर पर जब बग वाला ब्राउज़र अजीब हो. Chrome, Firefox, Safari, औरEdge के सबसे नए वर्शन पर टेस्ट करके देखें. इसके लिए BrowserStack जैसे टूल का इस्तेमाल किया जा सकता है.
अगर हो सके, तो देखें कि कहीं उपयोगकर्ता एजेंट स्निफ़िंग की वजह से पेज जान-बूझकर अलग तरह का व्यवहार तो नहीं कर रहा है. Chrome DevTools में User-Agent स्ट्रिंग को किसी दूसरे ब्राउज़र पर सेट करें.
क्या यह हाल ही में रिलीज़ हुए वीडियो में काम नहीं आया?
क्या यह पहले की उम्मीद के मुताबिक काम करता था, लेकिन हाल ही में ब्राउज़र रिलीज़ में काम नहीं कर पाया? ऐसे "रिग्रेशन" पर बहुत तेज़ी से काम किया जा सकता है. खास तौर पर, अगर आपने ऐसा वर्शन नंबर दिया हो जहां यह काम करता हो और ऐसा वर्शन जो काम न करता हो. BrowserStack जैसे टूल की मदद से ब्राउज़र के पुराने वर्शन और bisect-builds टूल (Chromium के लिए) की मदद से, बदलाव को बेहतर तरीके से खोजा जा सकता है.
अगर कोई समस्या रिग्रेशन की वजह से है और उसके दोबारा आने की समस्या हो सकती है, तो आम तौर पर इसकी असल वजह का पता लगाकर उसे तुरंत ठीक किया जा सकता है.
क्या दूसरे लोगों को भी यही समस्या दिख रही है?
अगर आपको समस्याएं आ रही हैं, तो संभावना है कि दूसरे डेवलपर भी हों. सबसे पहले, Stack Overflow पर बग खोजने का प्रयास करें. इससे आपको अमूर्त समस्या को किसी काम न करने वाले एपीआई में अनुवाद करने में मदद मिल सकती है. साथ ही, इससे आपको गड़बड़ी के ठीक होने तक कुछ समय के लिए समाधान ढूंढने में मदद मिल सकती है.
क्या इसकी शिकायत पहले की गई है?
जब आपको पता चल जाए कि बग क्या है, तो यह देखने का समय है कि ब्राउज़र बग डेटाबेस में खोज करके गड़बड़ी की पहले ही रिपोर्ट की जा चुकी है या नहीं.
- Chromium पर आधारित ब्राउज़र: https://crbug.com
- फ़ायरफ़ॉक्स: https://bugzilla.mozilla.org/
- Safari और WebKit पर आधारित ब्राउज़र: https://bugs.webkit.org/
अगर आपको कोई मौजूदा गड़बड़ी मिलती है जो समस्या के बारे में बताती है, तो गड़बड़ी पर स्टार का निशान लगाकर, उसे पसंदीदा के तौर पर मार्क करके या उस पर टिप्पणी करके अपनी सहायता जोड़ें. कई साइटों पर, खुद को कॉपी की सूची में जोड़ा जा सकता है और गड़बड़ी में बदलाव होने पर अपडेट पाए जा सकते हैं.
अगर आपको गड़बड़ी पर टिप्पणी करनी है, तो यह जानकारी शामिल करें कि गड़बड़ी से आपकी वेबसाइट पर किस तरह असर पड़ता है. "+1" स्टाइल वाली टिप्पणियां जोड़ने से बचें, क्योंकि बग ट्रैकर आम तौर पर हर टिप्पणी के लिए ईमेल भेजते हैं.
गड़बड़ी की शिकायत करें
अगर गड़बड़ी की पहले कोई रिपोर्ट नहीं की गई है, तो अब ब्राउज़र वेंडर को इस बारे में बताना चाहिए.
छोटा किया गया टेस्ट केस बनाना
Mozilla में छोटा किया गया टेस्ट केस बनाने के तरीके के बारे में एक बेहतरीन लेख दिया गया है. एक लंबी कहानी बताएं, जबकि समस्या के बारे में बताना एक अच्छी शुरुआत है, बग में लिंक किया गया डेमो देने से बेहतर कुछ नहीं होता जो समस्या दिखाता हो. तेज़ी से प्रोग्रेस की संभावना बढ़ाने के लिए, उदाहरण में समस्या दिखाने के लिए कम से कम ज़रूरी कोड होना चाहिए. कम से कम कोड सैंपल वह तरीका है जिससे आप अपनी गड़बड़ी के ठीक होने की संभावना बढ़ा सकते हैं.
टेस्ट केस को छोटा करने के लिए, यहां कुछ सलाह दी गई है:
- वेब पेज डाउनलोड करें,
<base href="https://original.url">जोड़ें, और पुष्टि करें कि बग स्थानीय तौर पर मौजूद है. अगर यूआरएल में एचटीटीपीएस का इस्तेमाल किया गया है, तो इसके लिए लाइव एचटीटीपीएस सर्वर की ज़रूरत हो सकती है. - ज़्यादा से ज़्यादा ब्राउज़र के नए बिल्ड पर लोकल फ़ाइलों की जांच करें.
- हर चीज़ को 1 फ़ाइल में छोटा करने की कोशिश करें.
- गड़बड़ी दूर होने तक कोड हटाएं (ऐसी चीज़ों से शुरू करते हुए दिखाना जो आपको ज़रूरी नहीं हैं).
- वर्शन कंट्रोल का इस्तेमाल करें, ताकि आप अपने काम को सेव कर सकें और गलत आइटम को पहले जैसा कर सकें.
छोटा किया गया टेस्ट केस होस्ट करना
अगर आपको छोटा किया गया टेस्ट केस होस्ट करने के लिए अच्छी जगह चाहिए, तो यहां कई अच्छी जगहें उपलब्ध हैं:
ध्यान रखें कि इनमें से कई साइटें किसी iframe में कॉन्टेंट दिखाती हैं. इस वजह से, हो सकता है कि सुविधाएं या बग अलग-अलग तरह से काम करें.
अपनी समस्या दर्ज करना
छोटा किया गया टेस्ट केस मिलने के बाद, उस गड़बड़ी को दर्ज किया जा सकता है. गड़बड़ी को ट्रैक करने वाली सही साइट पर जाएं और एक नई समस्या जोड़ें.
- Chromium पर आधारित ब्राउज़र - https://crbug.com/new
- Firefox - https://bugzilla.mozilla.org/
- Safari और WebKit पर आधारित ब्राउज़र - https://bugs.webkit.org/
समस्या के बारे में साफ़ तौर पर बताएं. साथ ही, यह भी बताएं कि समस्या ठीक करने के लिए क्या-क्या करना ज़रूरी है
सबसे पहले, साफ़ तौर पर जानकारी दें, ताकि इंजीनियर तुरंत समझ सकें कि समस्या क्या है और समस्या को निपटाने में उनकी मदद करें.
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)
ज़्यादा जानकारी के लिए, एमडीएन पर गड़बड़ी की रिपोर्ट लिखने के दिशा-निर्देश देखें.
बोनस: समस्या का स्क्रीनशॉट या स्क्रीनकास्ट जोड़ें
हालांकि, यह ज़रूरी नहीं है, लेकिन कुछ मामलों में समस्या का स्क्रीनशॉट या स्क्रीनकास्ट जोड़ने से मदद मिल सकती है. यह खास तौर पर तब मददगार होता है, जब गड़बड़ियों को ठीक करने के लिए कुछ अजीब चरणों की ज़रूरत हो सकती है. यह देख पाना अक्सर मददगार होता है कि स्क्रीनकास्ट या स्क्रीनशॉट में क्या होता है.
एनवायरमेंट की जानकारी शामिल करें
कुछ गड़बड़ियां सिर्फ़ खास ऑपरेटिंग सिस्टम या खास तरह के डिसप्ले (उदाहरण के लिए, लो-डीपीआई या हाई-डीपीआई) में ही दोबारा पैदा की जा सकती हैं. पक्का करें कि आपने हर टेस्ट एनवायरमेंट की जानकारी शामिल की हो.
गड़बड़ी सबमिट करें
आखिर में, गड़बड़ी सबमिट करें. फिर, बग के लिए किसी भी प्रतिक्रिया के लिए अपने ईमेल पर नज़र रखना न भूलें. आम तौर पर, जांच के दौरान और बग को ठीक करते समय, इंजीनियर के पास कुछ और सवाल हो सकते हैं. अगर उन्हें समस्या हल करने में परेशानी होती है, तो वे हमसे संपर्क कर सकते हैं.