साल 2019 की आखिरी तिमाही में, Chrome DevTools टीम ने कुकी से जुड़े DevTools में डेवलपर के अनुभव को बेहतर बनाना शुरू किया. यह खास तौर पर इसलिए अहम था, क्योंकि Google Chrome और अन्य ब्राउज़र ने कुकी के डिफ़ॉल्ट व्यवहार को बदलना शुरू कर दिया था.
DevTools पहले से मौजूद टूल पर रिसर्च करते समय, हमें अक्सर ऐसी स्थिति का सामना करना पड़ा:
🔍 कंसोल में चेतावनियों और गड़बड़ी के मैसेज से भरे थे, जिनमें तकनीकी जानकारी थी और कभी-कभी chromestatus.com के लिंक भी थे. सभी मैसेज करीब-करीब बराबर रूप से अहम लग रहे थे, जिससे यह पता लगाना मुश्किल हो गया कि किस पर पहले ध्यान देना है. सबसे अहम बात यह है कि टेक्स्ट, DevTools में ज़्यादा जानकारी से लिंक नहीं था. इसलिए, यह समझना मुश्किल था कि क्या हुआ. और आखिर में, मैसेज अक्सर पूरी तरह वेब डेवलपर के लिए रह जाते हैं कि वे समस्या को ठीक करने का तरीका जानें या तकनीकी संदर्भ के बारे में भी जानें.
अगर अपने खुद के ऐप्लिकेशन से मैसेज पाने के लिए भी कंसोल का इस्तेमाल किया जाता है, तो कभी-कभी ब्राउज़र के सभी मैसेज के बीच मैसेज ढूंढने में आपको परेशानी होगी.
इंसानों की तरह, अपने-आप होने वाली प्रोसेस के लिए भी कंसोल मैसेज से इंटरैक्ट करना मुश्किल होता है. उदाहरण के लिए, डेवलपर लगातार इंटिग्रेशन/लगातार डिप्लॉयमेंट की स्थिति में, Chrome हेडलेस और Puppeteer का इस्तेमाल कर सकते हैं. कंसोल मैसेज सिर्फ़ स्ट्रिंग होते हैं. इसलिए, कार्रवाई करने लायक जानकारी निकालने के लिए, डेवलपर को रेगुलर एक्सप्रेशन या कोई अन्य पार्सर लिखना होगा.
समाधान: समस्या की सिलसिलेवार तरीके से और कार्रवाई करने के लिए ज़रूरी रिपोर्टिंग
जिन समस्याओं का हमें पता चला उनका बेहतर समाधान ढूंढने के लिए, हमने सबसे पहले ज़रूरी शर्तों के बारे में सोचना शुरू किया और उन्हें डिज़ाइन दस्तावेज़ में इकट्ठा किया.
हमारा मकसद है कि समस्याओं को इस तरह से पेश किया जाए जिससे समस्या साफ़ तौर पर पता चले और उसे ठीक कैसे किया जाए. हमारी डिज़ाइन प्रोसेस से हमें पता चला कि हर समस्या में ये चार हिस्से शामिल होने चाहिए:
- टाइटल
- ब्यौरा
- DevTools में ऐसे संसाधनों के लिंक जिन पर असर पड़ा है
- और आगे के दिशा-निर्देशों के लिए एक लिंक
टाइटल का इस्तेमाल छोटा और सटीक होना चाहिए, ताकि डेवलपर मुख्य समस्या को समझ सकें. साथ ही, टाइटल को अक्सर हल करने के बारे में भी बताया जाता है. उदाहरण के लिए, कुकी की समस्या में अब यह लिखा होता है:
क्रॉस-साइट कुकी को 'सुरक्षित' के तौर पर मार्क करें, ताकि उन्हें क्रॉस-साइट कॉन्टेक्स्ट में सेट करने की अनुमति दी जा सके
हर समस्या के ब्यौरे में पूरी जानकारी दी जाती है, जो बताती है कि क्या हुआ. साथ ही, इसे ठीक करने के तरीके के बारे में कार्रवाई करने वाली सलाह मिलती है. साथ ही, समस्या को संदर्भ में समझने के लिए, DevTools के अंदर मौजूद दूसरे पैनल के लिंक मिलते हैं. हम web.dev पर ज़्यादा जानकारी देने वाले लेखों के लिंक भी देते हैं, ताकि वेब डेवलपर इस विषय के बारे में ज़्यादा जानकारी पा सकें.
हर समस्या का एक अहम हिस्सा ऐसे संसाधन जिन पर असर हुआ है सेक्शन है, जो DevTools के अन्य हिस्सों से लिंक होता है और आगे की जांच को आसान बनाता है. कुकी से जुड़ी समस्या वाले उदाहरण के लिए, नेटवर्क के ऐसे अनुरोधों की सूची मौजूद होनी चाहिए जिनसे समस्या ट्रिगर हुई. साथ ही, अनुरोध पर क्लिक करने से सीधे नेटवर्क पैनल पर पहुंचा जा सकता है. हमें उम्मीद है कि यह न सिर्फ़ सुविधाजनक है, बल्कि इस बात पर भी ज़ोर देता है कि किसी खास तरह की समस्या को डीबग करने के लिए, DevTools में कौनसे पैनल और टूल इस्तेमाल किए जा सकते हैं.
लंबे समय तक 'समस्याएं' टैब के साथ डेवलपर इंटरैक्शन को ध्यान में रखते हुए, हम डेवलपर इंटरैक्शन के इस तरह से बेहतर होने की कल्पना करते हैं:
- पहली बार किसी खास समस्या का सामना करने पर, एक वेब डेवलपर समस्या को गहराई से समझने के लिए लेख को पढ़ेगा.
- दूसरी बार समस्या आने पर, हम उम्मीद करते हैं कि समस्या के बारे में दी गई जानकारी से डेवलपर को समस्या के बारे में याद दिलाने के लिए काफ़ी होगा. साथ ही, उन्हें तुरंत समस्या की जांच करने और उसे हल करने के लिए कार्रवाई करने की अनुमति मिल जाएगी.
- कई बार समस्या का सामना करने के बाद, हमें उम्मीद है कि डेवलपर को समस्या का टाइप पहचानने के लिए, समस्या का टाइटल काफ़ी होगा.
एग्रीगेशन वाला एक और अहम पहलू है, जिसे हम बेहतर बनाना चाहते हैं. उदाहरण के लिए, अगर एक ही कुकी की वजह से एक ही समस्या कई बार होती है, तो हम कुकी की रिपोर्ट सिर्फ़ एक बार करना चाहते थे. मैसेज की संख्या को काफ़ी कम करने के अलावा, यह अक्सर समस्या की असल वजह का ज़्यादा तेज़ी से पता लगाने में मदद करता है.
लागू करने की प्रक्रिया
इन ज़रूरतों को ध्यान में रखते हुए, टीम ने इस बात का पता लगाना शुरू कर दिया कि इस नई सुविधा को कैसे लागू किया जाए. Chrome DevTools के प्रोजेक्ट आम तौर पर तीन अलग-अलग क्षेत्रों में होते हैं:
- Chromium, Google Chrome के पीछे C++ में लिखा गया ओपन-सोर्स प्रोजेक्ट
- DevTool फ़्रंटएंड, जो Chrome DevTools के JavaScript को लागू करने का तरीका है
- Chrome DevTools प्रोटोकॉल (सीडीपी), वह लेयर जो दोनों नेटवर्क को कनेक्ट करती है
लागू करने के बाद तीन टास्क शामिल किए गए:
- Chromium में, हमें उन कॉम्पोनेंट की पहचान करनी थी जिनमें वह जानकारी है जिसे हम दिखाना चाहते हैं. साथ ही, हमें उस जानकारी को DevTools प्रोटोकॉल में ऐक्सेस करना था, वह भी तेज़ी या सुरक्षा से समझौता किए बिना.
- इसके बाद हमें Chrome DevTools प्रोटोकॉल (CDP) डिज़ाइन करना पड़ा, ताकि वह एपीआई तय कर सके जो क्लाइंट को यह जानकारी दिखाता है. जैसे, DevTools फ़्रंटएंड.
- आखिर में, हमें Dev टूल के फ़्रंटएंड में एक कॉम्पोनेंट लागू करना था जो सीडीपी के ज़रिए ब्राउज़र से जानकारी पाने का अनुरोध करता है. साथ ही, उसे सही यूज़र इंटरफ़ेस (यूआई) में दिखाता है, ताकि डेवलपर आसानी से जानकारी को समझ सकें और उसके साथ इंटरैक्ट कर सकें.
ब्राउज़र पर, हमने सबसे पहले यह देखा कि कंसोल मैसेज को कैसे मैनेज किया जाता है. ऐसा इसलिए, क्योंकि इन समस्याओं का व्यवहार काफ़ी हद तक काफ़ी मिलता-जुलता है. आम तौर पर, CodeSearch की मदद से इस तरह के एक्सप्लोरेशन शुरू किए जा सकते हैं. इससे आपको Chromium प्रोजेक्ट के पूरे सोर्स कोड को ऑनलाइन खोजने और एक्सप्लोर करने की सुविधा मिलती है. इस तरह, हमें कंसोल मैसेज को लागू करने के बारे में पता चला. साथ ही, हम समस्याओं को हल करने की ज़रूरी शर्तों के हिसाब से एक साथ काम करने वाले, लेकिन बेहतर तरीके से बना सकते हैं.
सुरक्षा से जुड़े सभी पहलुओं को ध्यान में रखने की वजह से, यह काम खास तौर पर चुनौती भरा काम है. Chromium प्रोजेक्ट, चीज़ों को अलग-अलग प्रोसेस में अलग-अलग करने में बहुत मदद करता है. साथ ही, जानकारी को लीक होने से रोकने के लिए, यह काम सिर्फ़ कंट्रोल वाले कम्यूनिकेशन चैनलों से ही बातचीत करता है. समस्याओं में संवेदनशील जानकारी हो सकती है, इसलिए हमें यह ध्यान रखना होगा कि वह जानकारी ब्राउज़र के किसी ऐसे हिस्से पर न भेजी जाए जिसे इसके बारे में पता नहीं होना चाहिए.
DevTools फ़्रंटएंड में
DevTools खुद एक वेब ऐप्लिकेशन है, जिसे JavaScript और सीएसएस में लिखा गया है. यह बहुत कुछ दूसरे वेब ऐप्लिकेशन की तरह है - हालांकि, यह 10 साल से ज़्यादा समय से इस्तेमाल हो रहा है. और निश्चित रूप से इसका बैक-एंड मूल रूप से ब्राउज़र से सीधे संपर्क का चैनल है: Chrome DevTools प्रोटोकॉल.
'समस्याएं' टैब के मामले में, हमने पहले उपयोगकर्ता की कहानियां बताई और हमने यह सोचा कि इस समस्या को हल करने के लिए डेवलपर को क्या करना होगा. हमारा मानना है कि 'समस्याएं' टैब से जांच की शुरुआत होती है. इस टैब की मदद से, लोगों को ज़्यादा जानकारी दिखाने वाले पैनल से लिंक किया जाता है. हमने DevTools के सबसे नीचे अन्य टैब के साथ 'समस्याएं' टैब रखने का फ़ैसला किया, ताकि डेवलपर के नेटवर्क या ऐप्लिकेशन पैनल जैसे अन्य DevTools कॉम्पोनेंट से इंटरैक्ट करने के दौरान भी यह खुला रहे.
इस बात को ध्यान में रखते हुए, हमारे UX डिज़ाइनर ने यह समझा कि हमारा लक्ष्य क्या है. इसलिए, उसने इन शुरुआती प्रस्तावों को प्रोटोटाइप किया:
सबसे अच्छे समाधान पर काफ़ी चर्चा करने के बाद, हमने डिज़ाइन को लागू करना शुरू किया और फ़ैसलों को दोहराया, ताकि मौजूदा 'समस्याएं' टैब में धीरे-धीरे समस्या आ सके.
एक और बहुत ज़रूरी वजह थी 'समस्याएं' टैब को खोजना. पहले, Devtools की कई बेहतरीन सुविधाएं सिर्फ़ डेवलपर को नहीं मिलती थीं, क्योंकि डेवलपर यह नहीं जानता था कि उसे खास तौर पर क्या देखना है. 'समस्याएं' टैब की मदद से, हमने कई अलग-अलग इलाकों में समस्याओं को हाइलाइट करने का फ़ैसला किया, ताकि डेवलपर ज़रूरी समस्याओं को हल करने से न चूकें.
हमने कंसोल पैनल में एक सूचना जोड़ने का फ़ैसला लिया है, क्योंकि कुछ कंसोल मैसेज को अब समस्याओं की वजह से हटा दिया गया है. हमने DevTools विंडो के सबसे ऊपर दाईं ओर, चेतावनियों और गड़बड़ियों की जानकारी देने वाले काउंटर में एक आइकॉन भी जोड़ा है.
आखिर में, 'समस्याएं' टैब सिर्फ़ दूसरे DevTools पैनल से लिंक नहीं होता, बल्कि किसी समस्या से जुड़े संसाधन भी 'समस्याएं' टैब से वापस लिंक किए जाते हैं.
प्रोटोकॉल में
फ़्रंटएंड और बैकएंड के बीच कम्यूनिकेशन, Chromium DevTools प्रोटोकॉल (सीडीपी) नाम के प्रोटोकॉल पर काम करता है. सीडीपी को Chrome DevTools के तौर पर वेब ऐप्लिकेशन का बैक-एंड माना जा सकता है. सीडीपी को कई डोमेन में बांटा गया है. हर डोमेन में कई कमांड और इवेंट होते हैं.
समस्याएं टैब के लिए, हमने ऑडिट डोमेन में एक नया इवेंट जोड़ने का फ़ैसला किया है. यह नई समस्या आने पर ट्रिगर होता है. यह पक्का करने के लिए कि हम DevTools के अभी तक नहीं खुलने के दौरान आने वाली समस्याओं की रिपोर्ट भी कर सकते हैं, ऑडिट डोमेन हाल ही की समस्याओं को सेव करता है और DevTools के कनेक्ट होते ही उन्हें भेज देता है. इसके बाद, DevTools समस्या की सभी जानकारी इकट्ठा करता है.
सीडीपी, Puppeteer जैसे दूसरे प्रोटोकॉल क्लाइंट को भी समस्याओं की जानकारी पाने और उन्हें प्रोसेस करने की सुविधा देता है. हमें उम्मीद है कि सीडीपी को भेजी गई समस्या से जुड़ी व्यवस्थित जानकारी से, डेटा को इंटिग्रेट करने के मौजूदा इन्फ़्रास्ट्रक्चर में इंटिग्रेशन करना आसान हो जाएगा और यह इंटिग्रेशन आसान हो जाएगा. इस तरह, पेज के डिप्लॉय होने से पहले ही, समस्याओं का पता लगाया जा सकता है और उन्हें ठीक किया जा सकता है!
वह
सबसे पहले, कई सारे मैसेज को कंसोल से 'समस्याएं' टैब पर ले जाना पड़ता है. इसमें कुछ समय लगेगा. खास तौर पर, जब हम जोड़ी गई हर नई समस्या के लिए साफ़ तौर पर और कार्रवाई करने लायक दस्तावेज़ उपलब्ध कराना चाहते हैं. हमें उम्मीद है कि आने वाले समय में डेवलपर, कंसोल के बजाय 'समस्याएं' टैब में समस्याओं के बारे में जानना चाहेंगे!
इसके अलावा, हम इस पर विचार कर रहे हैं कि Chromium के बैक-एंड के अलावा, अन्य सोर्स की समस्याओं को 'समस्याएं' टैब में कैसे इंटिग्रेट करें.
हम 'समस्याएं' टैब को व्यवस्थित रखने और इसे इस्तेमाल करने के तरीके को बेहतर बनाने के तरीके ढूंढ रहे हैं. इस साल के लिए खोज, फ़िल्टर, और बेहतर एग्रीगेशन हमारी सूची में हैं. रिपोर्ट की गई समस्याओं की बढ़ती संख्या को व्यवस्थित करने के लिए, हम समस्या की कैटगरी पेश कर रहे हैं. उदाहरण के लिए, इससे सिर्फ़ वे समस्याएं दिखाई जा सकेंगी जो आने वाले समय में हटाए जाने से जुड़ी समस्याओं के बारे में हैं. हम स्नूज़ करने की एक सुविधा जोड़ने के बारे में भी सोच रहे हैं. इस सुविधा का इस्तेमाल करके, डेवलपर कुछ समय के लिए समस्याओं को छिपा सकता है.
समस्याओं को कार्रवाई करने लायक बनाए रखने के लिए, हम यह पता लगाना आसान बनाना चाहते हैं कि पेज के किस हिस्से से समस्या हुई. खास तौर पर, हम उन समस्याओं और आपके पेज (यानी पहले पक्ष) की समस्याओं को अलग करने और फ़िल्टर करने के तरीकों पर काम कर रहे हैं जो आपके जोड़े गए रिसॉर्स से ट्रिगर हुई हैं, लेकिन जो सीधे तौर पर आपके कंट्रोल में नहीं हैं, जैसे कि विज्ञापन नेटवर्क कंपनी. सबसे पहले, Chrome 86 में तीसरे पक्ष की कुकी से जुड़ी समस्याओं को छिपाया जा सकता है.
अगर आपके पास 'समस्याएं' टैब को बेहतर बनाने के लिए कोई सुझाव है, तो गड़बड़ी की शिकायत करके हमें बताएं!
झलक दिखाने वाले चैनलों को डाउनलोड करें
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.