Chrome DevTools प्रोटोकॉल (CDP), रिमोट डीबगिंग प्रोटोकॉल (एपीआई) है. इसकी मदद से, डेवलपर किसी चल रहे Chrome ब्राउज़र से इंटरैक्ट कर सकते हैं. Chrome DevTools, सीडीपी का इस्तेमाल करके ब्राउज़र की स्थिति की जांच करने, उसके व्यवहार को कंट्रोल करने, और डीबग करने से जुड़ी जानकारी इकट्ठा करने में आपकी मदद करता है. सीडीपी का इस्तेमाल करने वाले Chrome एक्सटेंशन भी बनाए जा सकते हैं.
उदाहरण के लिए, यह एक सीडीपी कमांड है, जो location से तय की गई जगह पर, styleSheetId वाली स्टाइलशीट में दिए गए ruleText के साथ एक नया नियम डालता है.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
प्रोटोकॉल मॉनिटर ड्रॉअर टैब की मदद से, सीडीपी अनुरोध भेजे जा सकते हैं. साथ ही, DevTools से भेजे और पाए गए सभी सीडीपी अनुरोध और जवाब देखे जा सकते हैं.
पहले, मैन्युअल तरीके से कमांड बनाना मुश्किल था. खास तौर पर, कई पैरामीटर वाले कमांड बनाना. आपको ब्रैकेट और कोटेशन मार्क खोलने और बंद करने के साथ-साथ, कमांड के पैरामीटर भी याद रखने होते थे. इसके लिए, आपको CDP दस्तावेज़ देखना पड़ता था.
इस समस्या को हल करने के लिए, DevTools ने एक नया सीडीपी एडिटर लॉन्च किया है. इसका मुख्य मकसद:
- ऑटो-कंप्लीट निर्देश. अपने-आप पूरा होने की सुविधा की मदद से, उपलब्ध कमांड की सूची उपलब्ध कराने पर, सीडीपी कमांड इनपुट को आसानी से डाला जा सकता है.
- कमांड पैरामीटर अपने-आप भरने की सुविधा. उपलब्ध कमांड पैरामीटर की सूची के लिए, सीडीपी दस्तावेज़ देखने की ज़रूरत कम हो जाती है.
- पैरामीटर टाइप करना आसान बनाना. आपको सिर्फ़ उन पैरामीटर की वैल्यू भरनी हैं जिन्हें आपको भेजना है.
- बदलाव करें और फिर से भेजें. सीडीपी कमांड में तेज़ी से बदलाव करके, प्रोटोटाइप बनाने की स्पीड को बेहतर बनाएं.
अब देखते हैं कि यह नया एडिटर क्या-क्या ऑफ़र करता है और इसका इस्तेमाल कैसे किया जा सकता है!
अपने-आप पूरा होने की सुविधा
कमांड इनपुट बार में अब अपने-आप पूरा होने की सुविधा काम करती है. इससे, उन सीडीपी कमांड के नाम लिखने में मदद मिलती है जिनका ऐक्सेस आपके पास है. यह उन निर्देशों के लिए काफ़ी मददगार हो सकता है जो पैरामीटर स्वीकार नहीं करते.
स्ट्रिंग और नंबर पैरामीटर
इस नए एडिटर की मदद से, अब प्राइमिटिव पैरामीटर की वैल्यू में आसानी से बदलाव किया जा सकता है. एडिटर खोलने के लिए, निर्देश इनपुट के बगल में मौजूद 
आइकॉन पर क्लिक करें.
कमांड का नाम डालने के बाद, एडिटर आपको उससे जुड़े पैरामीटर अपने-आप दिखाता है. आपको यह जानने के लिए दस्तावेज़ देखने की ज़रूरत नहीं है कि कौनसे पैरामीटर किन कमांड के साथ इस्तेमाल किए जाते हैं. इसके अलावा, एडिटर पैरामीटर को एक तय क्रम में दिखाता है: पहले ज़रूरी पैरामीटर (लाल रंग में) और उसके बाद वैकल्पिक पैरामीटर (नीले रंग में).
वैकल्पिक पैरामीटर में वैल्यू जोड़ने के लिए, उसके नाम पर कर्सर घुमाएं और + बटन पर क्लिक करें. पैरामीटर को 'तय नहीं है' पर रीसेट करने के लिए, डिफ़ॉल्ट वैल्यू पर रीसेट करें बटन पर क्लिक करें.
Enum और बूलियन पैरामीटर
एनम या बूलियन पैरामीटर में बदलाव करते समय, आपको एक ड्रॉप-डाउन मेन्यू दिखेगा. इसमें, एनम के लिए संभावित वैल्यू या बूलियन के लिए सही या गलत विकल्प का विकल्प मिलेगा. इस सुविधा की मदद से, एनम पैरामीटर के लिए गलत वैल्यू टाइप करने की संभावना कम हो जाती है. साथ ही, यह सुविधा सटीक और आसान होती है.
कलेक्शन पैरामीटर
ऐरे पैरामीटर के लिए, ऐरे में वैल्यू को मैन्युअल तरीके से जोड़ा जा सकता है. पैरामीटर की लाइन पर कर्सर घुमाएं और + बटन पर क्लिक करें.
ऐरे के आइटम को एक-एक करके मिटाने के लिए, आइटम के बगल में मौजूद 'कचरादान' बटन पर क्लिक करें. ब्लॉक बटन की मदद से, ऐरे से सभी पैरामीटर भी हटाए जा सकते हैं. इस मामले में, कलेक्शन पैरामीटर को [] पर रीसेट किया जाता है.
ऑब्जेक्ट पैरामीटर
ऑब्जेक्ट पैरामीटर स्वीकार करने वाला कोई कमांड डालने पर, एडिटर इस ऑब्जेक्ट की कुंजियों की सूची दिखाता है. साथ ही, उनकी वैल्यू में सीधे तौर पर बदलाव किया जा सकता है. यह सभी तरह के नेस्ट किए गए पैरामीटर के लिए काम करता है.
जानें कि एडिटर में कमांड और पैरामीटर क्या करते हैं
क्या आपको कभी किसी पैरामीटर या निर्देश के मकसद के बारे में पता नहीं चला? अब किसी कमांड या पैरामीटर पर कर्सर घुमाने पर, जानकारी देने वाला टूलटिप पॉप-अप होगा. इसमें, ऑनलाइन दस्तावेज़ का लिंक भी शामिल होगा.
गलत पैरामीटर भेजने से पहले चेतावनी पाना
पहले, अगर आपको यह नहीं पता था कि किसी पैरामीटर की वैल्यू सही टाइप की है या नहीं और आपको गड़बड़ी का जवाब पढ़ने के लिए इंतज़ार करना पड़ता था, तो यह नया एडिटर आपके लिए है. अगर पैरामीटर आपकी डाली गई वैल्यू को स्वीकार नहीं कर पाता है, तो यह आपको रीयल-टाइम में गड़बड़ियां दिखाता है.
कोई कमांड फिर से भेजना
अगर आपको अभी भेजे गए कमांड के किसी पैरामीटर में बदलाव करना है, तो आपको उसे फिर से टाइप करने की ज़रूरत नहीं है. निर्देश में बदलाव करने और उसे फिर से भेजने के लिए, डेटाग्रिड में किसी आइटम पर दायां क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से बदलाव करें और फिर से भेजें को चुनें. इससे सीडीपी एडिटर अपने-आप फिर से खुल जाएगा और उसमें आपके चुने गए कमांड को पहले से भर दिया जाएगा.
किसी कमांड को JSON फ़ॉर्मैट में कॉपी करना
सीडीपी कमांड को JSON फ़ॉर्मैट में अपने क्लिपबोर्ड पर कॉपी करने के लिए, टूलबार में सबसे बाईं ओर मौजूद 
कॉपी आइकॉन पर क्लिक करें. इसके अलावा, ध्यान रखें कि अगर सीधे इनपुट बार में कोई निर्देश डाला जाता है, तो वह एडिटर में अपने-आप भर जाएगा. इसके अलावा, एडिटर में कोई बदलाव करने पर, वह इनपुट बार में भी दिखेगा.
नतीजा
DevTools टीम ने इस नए सीडीपी एडिटर को डिज़ाइन करने का मकसद, सीडीपी कमांड टाइप करने की प्रोसेस को आसान बनाना था. नए एडिटर का इस्तेमाल, दस्तावेज़ के साथ पैरामीटर देखने के लिए भी किया जा सकता है. साथ ही, इससे आपको सीडीपी कमांड भेजने का आसान तरीका भी मिलता है.
झलक वाले चैनल डाउनलोड करना
Chrome कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
- DevTools में ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के बारे में YouTube वीडियो में क्या नया है या DevTools के बारे में YouTube वीडियो में सलाह पर टिप्पणियां करें.