Chrome DevTools प्रोटोकॉल (सीडीपी), रिमोट डीबगिंग प्रोटोकॉल (एपीआई) है. इसकी मदद से, डेवलपर, चल रहे 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 से मिले सभी सीडीपी अनुरोध और रिस्पॉन्स देखे और पाए जा सकते हैं.
पहले, इसे हाथ से बनाना मुश्किल था. खास तौर पर, ऐसा कोई कमांड जिसमें कई पैरामीटर होते थे. आपको न सिर्फ़ ब्रैकेट और कोटेशन मार्क को खोलने और बंद करने का ध्यान रखना होता था, बल्कि आपको कमांड के पैरामीटर भी याद रखने होते थे. यही वजह है कि सीडीपी से जुड़े दस्तावेज़ देखे जा सकते हैं.
इस समस्या को हल करने के लिए, DevTools ने एक नया सीडीपी एडिटर पेश किया. इसके मुख्य लक्ष्य ये हैं:
- अपने-आप पूरा होने वाले निर्देश. अपने-आप पूरा होने की सुविधा की मदद से उपलब्ध कमांड की सूची देकर, सीडीपी कमांड इनपुट को आसान बनाएं.
- कमांड पैरामीटर में अपने-आप जानकारी भरें. उपलब्ध कमांड पैरामीटर की सूची देखने के लिए, सीडीपी दस्तावेज़ पढ़ने की ज़रूरत कम करें.
- पैरामीटर को टाइप करना आसान बनाएं. आपको बस उन पैरामीटर की वैल्यू डालनी होगी जिन्हें आपको भेजना है.
- बदलाव करें और फिर से भेजें. सीडीपी कमांड में बदलाव करने की प्रोसेस को तेज़ बनाकर, प्रोटोटाइप की स्पीड को बेहतर बनाएं.
आइए, अब देखते हैं कि यह नया एडिटर क्या ऑफ़र करता है और इस सुविधा का इस्तेमाल कैसे किया जा सकता है!
अपने-आप पूरा होने की सुविधा
अपने-आप पूरा होने की सुविधा से, अब कमांड इनपुट बार चालू किया जा सकता है. इसकी मदद से, उन सीडीपी कमांड के नाम लिखे जा सकते हैं जिनका ऐक्सेस आपके पास है. यह उन कमांड के लिए बहुत आसान हो सकता है जो पैरामीटर स्वीकार नहीं करते.
स्ट्रिंग और नंबर पैरामीटर
इस नए एडिटर की मदद से, अब आप शुरुआती पैरामीटर की वैल्यू में आसानी से बदलाव कर सकते हैं. एडिटर खोलने के लिए, कमांड इनपुट के बगल में मौजूद 
आइकॉन पर क्लिक करें.
कमांड का नाम डालने के बाद, एडिटर आपको उससे जुड़े पैरामीटर अपने-आप दिखाता है. कौनसे पैरामीटर किन निर्देशों के साथ काम करते हैं, यह जानने के लिए आपको दस्तावेज़ देखने की ज़रूरत नहीं है. इसके अलावा, एडिटर पैरामीटर को दिए गए क्रम में दिखाता है: ज़रूरी पैरामीटर पहले (लाल रंग में) और वैकल्पिक पैरामीटर इसके बाद (नीले रंग में).
किसी वैकल्पिक पैरामीटर में वैल्यू जोड़ने के लिए, उसके नाम पर कर्सर घुमाएं और + बटन पर क्लिक करें. पैरामीटर को 'तय नहीं किया गया है' पर रीसेट करने के लिए, डिफ़ॉल्ट वैल्यू पर रीसेट करें बटन पर क्लिक करें.
Enum और बूलियन पैरामीटर
enum या बूलियन पैरामीटर में बदलाव करते समय, आपको एक ड्रॉप-डाउन मेन्यू दिखेगा. इसमें बूलियन के लिए संभावित वैल्यू (enum के लिए) या सीधे तौर पर सही या गलत विकल्प चुनने की सुविधा मिलती है. यह सुविधा, enum पैरामीटर के लिए गलत वैल्यू टाइप करने की संभावना को कम करती है. साथ ही, इसे सटीक और आसान बनाए रखती है.
श्रेणी पैरामीटर
अरे पैरामीटर के लिए, अरे में मैन्युअल तौर पर वैल्यू जोड़ी जा सकती हैं. पैरामीटर की लाइन पर कर्सर घुमाएं और + बटन पर क्लिक करें.
किसी कैटगरी के आइटम को एक-एक करके मिटाने के लिए, आइटम के बगल में मौजूद बिन बटन पर क्लिक करें. आपके पास 'ब्लॉक करें' बटन का इस्तेमाल करके, अरे से सभी पैरामीटर को मिटाने का विकल्प भी होता है. इस मामले में, अरे पैरामीटर [] पर रीसेट हो जाता है.
ऑब्जेक्ट पैरामीटर
ऑब्जेक्ट पैरामीटर को स्वीकार करने वाला कोई निर्देश डालने पर, एडिटर इस ऑब्जेक्ट की कुंजियों की सूची बना देता है. इससे, सीधे उनकी वैल्यू में बदलाव किया जा सकता है. यह सभी तरह के नेस्ट किए गए पैरामीटर के लिए काम करता है.
जानें कि एडिटर में निर्देश और पैरामीटर क्या काम करते हैं
क्या आपको कभी पैरामीटर या निर्देश के मकसद को लेकर उलझन थी? अब किसी निर्देश या पैरामीटर पर कर्सर घुमाएं. ऐसा करते ही, जानकारी देने वाला एक टूलटिप पॉप-अप होगा. इसमें, ऑनलाइन दस्तावेज़ का लिंक भी होगा.
गलत पैरामीटर भेजने से पहले चेतावनी पाएं
पहले, अगर आपको यह नहीं पता होता था कि पैरामीटर की वैल्यू सही टाइप की है या नहीं और आपको गड़बड़ी के जवाब को पढ़ने के लिए इंतज़ार करना पड़ता था, तो यह नया एडिटर आपके लिए है. अगर पैरामीटर आपकी डाली गई वैल्यू को स्वीकार नहीं करता है, तो यह आपको रीयल-टाइम में होने वाली गड़बड़ियों को दिखाता है.
निर्देश फिर से भेजें
अगर आपको अभी-अभी भेजे गए निर्देश के किसी पैरामीटर में बदलाव करना है, तो आपको उसे दोबारा टाइप करने की ज़रूरत नहीं है. निर्देश में बदलाव करने और उसे फिर से भेजने के लिए, डेटाग्रिड में किसी आइटम पर राइट क्लिक करें और ड्रॉप-डाउन मेन्यू से बदलाव करें और फिर से भेजें चुनें. इससे सीडीपी एडिटर अपने-आप फिर से खुल जाएगा और आपके चुने गए निर्देश के मुताबिक, पहले से भरी हुई होगी.
किसी निर्देश को JSON फ़ॉर्मैट में कॉपी करें
JSON फ़ॉर्मैट में सीडीपी कमांड को अपने क्लिपबोर्ड पर कॉपी करने के लिए, टूलबार में बाईं ओर मौजूद 
कॉपी आइकॉन पर क्लिक करें. इसके अलावा, ध्यान रखें कि अगर इनपुट बार में सीधे कोई कमांड डाला जाता है, तो वह एडिटर को आसानी से पॉप्युलेट कर देगा. इसके अलावा, यह दूसरी तरह से भी काम को करेगा.
नतीजा
इस नए सीडीपी एडिटर को डिज़ाइन करने के पीछे DevTools टीम का लक्ष्य था, सीडीपी कमांड को आसानी से टाइप करना. नए एडिटर का इस्तेमाल, दस्तावेज़ों के साथ पैरामीटर देखने के लिए भी किया जा सकता है. साथ ही, इसकी मदद से सीडीपी कमांड आसानी से भेजे जा सकते हैं.
झलक दिखाने वाले चैनलों को डाउनलोड करें
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.