हमने Chrome DevTools से जुड़ी समस्याओं वाला टैब कैसे बनाया

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

साल 2019 की आखिरी तिमाही में, Chrome DevTools की टीम ने DevTools में कुकी से जुड़े डेवलपर अनुभव को बेहतर बनाना शुरू किया. यह खास तौर पर इसलिए ज़रूरी था, क्योंकि Google Chrome और दूसरे ब्राउज़र ने कुकी के डिफ़ॉल्ट व्यवहार में बदलाव करना शुरू कर दिया था.

DevTools में पहले से मौजूद टूल के बारे में रिसर्च करते समय, हम अक्सर इस तरह की स्थिति में आते थे:

Console पैनल में समस्याएं

डीएलपीchromestatus.com इससे भी अहम बात यह है कि टेक्स्ट, DevTools में मौजूद अन्य जानकारी से लिंक नहीं कर रहा था. इस वजह से, यह समझना मुश्किल हो रहा था कि क्या हुआ. आखिर में, इन मैसेज में अक्सर यह बताने के लिए वेब डेवलपर पर पूरी तरह से निर्भर किया जाता था कि समस्या को कैसे ठीक करें या तकनीकी संदर्भ के बारे में जानें.

अगर अपने ऐप्लिकेशन के मैसेज के लिए भी कंसोल का इस्तेमाल किया जाता है, तो आपको ब्राउज़र के सभी मैसेज के बीच में उन्हें ढूंढने में कभी-कभी मुश्किल होगी.

इंसानों की तरह ही, अपने-आप होने वाली प्रोसेस के लिए भी कंसोल मैसेज से इंटरैक्ट करना मुश्किल होता है. उदाहरण के लिए, डेवलपर 'लगातार इंटिग्रेशन/लगातार डिप्लॉयमेंट' की स्थिति में, Chrome हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा देने वाला ऐप्लिकेशन) और Puppeteer का इस्तेमाल कर सकते हैं. कंसोल मैसेज सिर्फ़ स्ट्रिंग होते हैं. इसलिए, डेवलपर को कार्रवाई करने लायक जानकारी निकालने के लिए, रेगुलर एक्सप्रेशन या कोई दूसरा पार्सर लिखना पड़ता है.

समाधान: समस्या की स्ट्रक्चर्ड और काम की रिपोर्टिंग

हमें जो समस्याएं मिलीं उनका बेहतर समाधान ढूंढने के लिए, हमने सबसे पहले ज़रूरी शर्तों के बारे में सोचना शुरू किया. इसके बाद, हमने उन्हें डिज़ाइन दस्तावेज़ में इकट्ठा किया.

हमारा मकसद, समस्याओं को इस तरह से पेश करना है कि समस्या की जानकारी और उसे ठीक करने का तरीका साफ़ तौर पर पता चल सके. डिज़ाइन की प्रक्रिया से हमने महसूस किया कि हर समस्या के ये चार हिस्से होने चाहिए:

  • शीर्षक
  • ब्यौरा
  • DevTools में, उन संसाधनों के लिंक जिन पर असर पड़ा है
  • साथ ही, ज़्यादा दिशा-निर्देशों का लिंक

टाइटल छोटा और सटीक होना चाहिए, ताकि डेवलपर मुख्य समस्या को समझ सकें. साथ ही, अक्सर टाइटल से ही समस्या को ठीक करने का तरीका पता चलता है. उदाहरण के लिए, कुकी से जुड़ी समस्या अब इस तरह दिखती है:

दूसरी साइट की कुकी को 'सुरक्षित' एट्रिब्यूट के तौर पर मार्क करें, ताकि उन्हें दूसरी साइट के कॉन्टेक्स्ट में सेट किया जा सके

हर समस्या के ब्यौरे में ज़्यादा जानकारी होती है. इसमें क्या हुआ, उसे ठीक करने के लिए कार्रवाई करने से जुड़ी सलाह, और समस्या को समझने के लिए DevTools में मौजूद अन्य पैनल के लिंक शामिल होते हैं. हम web.dev पर, ज़्यादा जानकारी वाले लेखों के लिंक भी देते हैं, ताकि वेब डेवलपर इस विषय के बारे में ज़्यादा जान सकें.

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

समस्याओं वाले टैब के साथ डेवलपर के इंटरैक्शन को लंबे समय तक ध्यान में रखते हुए, हम डेवलपर के इंटरैक्शन के इस तरह के विकास की उम्मीद करते हैं:

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

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

एक साथ कई समस्याएं

लागू करना

इन ज़रूरतों को ध्यान में रखते हुए, टीम ने इस बारे में जांच शुरू की कि नई सुविधा को कैसे लागू किया जाए. Chrome DevTools के प्रोजेक्ट आम तौर पर तीन अलग-अलग तरह के होते हैं:

इसे लागू करने के लिए, तीन टास्क पूरे करने होते थे:

  • Chromium में, हमें उन कॉम्पोनेंट की पहचान करनी थी जिनमें वह जानकारी है जिसे हमें दिखाना है. साथ ही, हमें यह भी पक्का करना था कि स्पीड या सुरक्षा से समझौता किए बिना, DevTools प्रोटोकॉल के लिए यह जानकारी ऐक्सेस की जा सके.
  • इसके बाद, हमें Chrome DevTools प्रोटोकॉल (CDP) डिज़ाइन करना पड़ा, ताकि हम उस एपीआई के बारे में बता सकें जो DevTools फ़्रंटएंड जैसे क्लाइंट को जानकारी दिखाता है.
  • आखिर में, हमें DevTools के फ़्रंटएंड में एक ऐसा कॉम्पोनेंट लागू करना था जो CDP के ज़रिए ब्राउज़र से जानकारी का अनुरोध करता है और उसे सही यूज़र इंटरफ़ेस (यूआई) में दिखाता है, ताकि डेवलपर आसानी से जानकारी का विश्लेषण कर सकें और उससे इंटरैक्ट कर सकें.

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

यह काम खास तौर पर चुनौती भरा है, क्योंकि हमें सुरक्षा से जुड़े सभी पहलुओं को हमेशा ध्यान में रखना होता है. Chromium प्रोजेक्ट, चीज़ों को अलग-अलग प्रोसेस में बांटने के लिए बहुत काम करता है. साथ ही, जानकारी लीक होने से बचाने के लिए, उन्हें सिर्फ़ कंट्रोल किए गए कम्यूनिकेशन चैनलों के ज़रिए ही कम्यूनिकेट करने की अनुमति देता है. समस्याओं में संवेदनशील जानकारी हो सकती है. इसलिए, हमें यह ध्यान रखना होगा कि उस जानकारी को ब्राउज़र के उस हिस्से पर न भेजें जिसे इसकी जानकारी नहीं होनी चाहिए.

DevTools के फ़्रंटएंड में

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

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

इसे ध्यान में रखते हुए, हमारे UX डिज़ाइनर ने समझा कि हमें क्या करना है. इसके बाद, उन्होंने इन शुरुआती प्रपोज़ल का प्रोटोटाइप बनाया:

प्रोटोटाइप

सबसे सही समाधान के बारे में काफ़ी चर्चा करने के बाद, हमने डिज़ाइन को लागू करना शुरू किया. साथ ही, समस्याओं के टैब को धीरे-धीरे इस तरह से तैयार किया कि आज यह दिखता है.

समस्याओं वाले टैब को ढूंढने की सुविधा भी एक अहम फ़ैक्टर थी. पहले, DevTools की कई बेहतरीन सुविधाओं को तब तक नहीं खोजा जा सकता था, जब तक डेवलपर को यह पता न हो कि उन्हें क्या खोजना है. 'समस्याएं' टैब में हमने समस्याओं को कई अलग-अलग हिस्सों में हाइलाइट करने का फ़ैसला किया है, ताकि यह पक्का किया जा सके कि डेवलपर सभी अहम समस्याओं से बच सकें.

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

समस्याओं की सूचना

आखिर में, 'समस्याएं' टैब न सिर्फ़ अन्य DevTools पैनल से लिंक होता है, बल्कि किसी समस्या से जुड़े संसाधन भी 'समस्याएं' टैब पर वापस ले जाते हैं.

संबंधित समस्याएं

प्रोटोकॉल में

फ़्रंटएंड और बैकएंड के बीच का कम्यूनिकेशन, Chromium DevTools Protocol (CDP) नाम के प्रोटोकॉल पर काम करता है. सीडीपी को Chrome DevTools वेब ऐप्लिकेशन के बैक-एंड के तौर पर देखा जा सकता है. सीडीपी को कई डोमेन में बांटा गया है. हर डोमेन में कई निर्देश और इवेंट होते हैं.

समस्याओं वाले टैब के लिए, हमने ऑडिट डोमेन में एक नया इवेंट जोड़ने का फ़ैसला किया है. यह इवेंट, किसी नई समस्या का पता चलने पर ट्रिगर होता है. हम DevTools के खुले न होने पर भी होने वाली समस्याओं की शिकायत कर सकें, इसके लिए ऑडिट डोमेन में हाल ही की समस्याएं सेव की जाती हैं. DevTools के कनेक्ट होने के बाद, उन्हें भेज दिया जाता है. इसके बाद, DevTools उन सभी समस्याओं को इकट्ठा करके, उन्हें एक साथ दिखाता है.

CDP, Puppeteer जैसे अन्य प्रोटोकॉल क्लाइंट को भी समस्याएं पाने और उन्हें प्रोसेस करने की सुविधा देता है. हमें उम्मीद है कि सीडीपी पर भेजी गई स्ट्रक्चर्ड समस्या की जानकारी, लगातार चलने वाले मौजूदा इंटिग्रेशन इन्फ़्रास्ट्रक्चर में इंटिग्रेशन को चालू और आसान करेगी. इस तरह, पेज को डिप्लॉय करने से पहले ही समस्याओं का पता लगाया जा सकता है और उन्हें ठीक किया जा सकता है!

वह

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

इसके अलावा, हम यह भी सोच रहे हैं कि Chromium के बैक-एंड के अलावा, अन्य सोर्स से मिली समस्याओं को 'समस्याएं' टैब में कैसे इंटिग्रेट किया जाए.

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

समस्याओं को हल करने के लिए, हम यह पता लगाना आसान बनाना चाहते हैं कि पेज के किस हिस्से की वजह से समस्या हुई है. खास तौर पर, हम उन समस्याओं को अलग करने और फ़िल्टर करने के तरीकों पर काम कर रहे हैं जो आपके पेज (यानी पहले पक्ष) से जुड़ी हैं और उन समस्याओं से अलग हैं जो आपके एम्बेड किए गए संसाधनों से ट्रिगर होती हैं, लेकिन सीधे आपके कंट्रोल में नहीं होती हैं. जैसे, विज्ञापन नेटवर्क. पहले चरण के तौर पर, Chrome 86 में तीसरे पक्ष की कुकी से जुड़ी समस्याओं को छिपाया जा सकेगा.

अगर आपको समस्याओं वाले टैब को बेहतर बनाने के लिए कोई सुझाव है, तो गड़बड़ी की शिकायत करके हमें बताएं!

झलक वाले चैनल डाउनलोड करना

Chrome Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.