Google I/O 2016 का समापन हो गया है. I/O में DevTools की अहम भूमिका थी. इसमें पॉल बाकौस, पॉल आयरिश, और सेथ थॉम्पसन ने DevTools के आने वाले समय के बारे में बताया. साल 2016 और उसके बाद के समय में, DevTools में क्या-क्या बदलाव होंगे, इस बारे में ज़्यादा जानने के लिए यहां दिया गया वीडियो देखें या आगे पढ़ें.
लेखन
DevTools का मकसद, वेब डेवलपमेंट लाइफ़साइकल के हर चरण को आसान बनाना है. शायद आपको पता हो कि DevTools की मदद से, किसी वेबसाइट को डीबग या उसकी प्रोफ़ाइल बनाई जा सकती है. हालांकि, हो सकता है कि आपको यह न पता हो कि साइट बनाने के लिए, इसका इस्तेमाल कैसे किया जाए. "कॉन्टेंट लिखना" का मतलब है साइट बनाना. आने वाले समय में, हमारा एक लक्ष्य यह है कि हम आपको कई डिवाइसों पर अपनी साइट को आसानी से इस्तेमाल करने, एक्सपेरिमेंट करने, और उसे एमुलेट करने की सुविधा दें.
डिवाइस मोड
DevTools की टीम, डिवाइस मोड के अनुभव को बेहतर बनाने के लिए लगातार काम कर रही है. Chrome 49 में, इस मोड को पहला बड़ा अपग्रेड मिला था. अपडेट के बारे में खास जानकारी पाने के लिए, मार्च की पोस्ट (मोबाइल-फ़र्स्ट वर्ल्ड के लिए नया डिवाइस मोड) देखें. हमारा मकसद, सभी फ़ॉर्म फ़ैक्टर पर आपकी साइट को देखने और उसका इस्तेमाल करने के लिए, आसान वर्कफ़्लो उपलब्ध कराना है.
मार्च में लेख पोस्ट करने के बाद, Canary में डिवाइस मोड से जुड़े कुछ अपडेट हुए हैं. यहां इन अपडेट के बारे में खास जानकारी दी गई है.
किसी पेज को किसी खास डिवाइस के तौर पर देखते समय, अपने पेज के आस-पास डिवाइस का हार्डवेयर दिखाकर, बेहतर अनुभव पाया जा सकता है.
डिवाइस ओरिएंटेशन मेन्यू की मदद से, नेविगेशन बार और कीबोर्ड जैसे सिस्टम के अलग-अलग यूज़र इंटरफ़ेस (यूआई) एलिमेंट चालू होने पर भी अपना पेज देखा जा सकता है.
डेस्कटॉप पर भी स्टोरी को बेहतर बनाया गया है. डिवाइस मोड की ज़ूम सुविधा की मदद से, उस स्क्रीन से बड़ी डेस्कटॉप स्क्रीन का इस्तेमाल किया जा सकता है जिस पर फ़िलहाल काम किया जा रहा है. जैसे, 4K (3840 पिक्सल x 2160 पिक्सल) स्क्रीन.
नेटवर्क पैनल पर स्विच करने के बजाय, सीधे डिवाइस मोड के यूज़र इंटरफ़ेस (यूआई) से नेटवर्क को कम किया जा सकता है.
सोर्स के बीच अंतर
किसी साइट की स्टाइल में बार-बार बदलाव करने पर, आपके किए गए बदलावों का ट्रैक रखना मुश्किल हो जाता है. इसे ठीक करने के लिए, DevTools, सोर्स पैनल के लाइन नंबर गटर पर विज़ुअल क्यू का इस्तेमाल करेगा, ताकि आप अपने बदलावों को ट्रैक कर सकें. मिटाई गई लाइनों को लाल रंग की लाइन से दिखाया जाता है. बदली गई लाइनों को बैंगनी रंग से हाइलाइट किया जाता है. साथ ही, नई लाइनों को हरे रंग से हाइलाइट किया जाता है.
क्विक सोर्स ड्रॉअर के नए टैब में, अपने बदलावों को ट्रैक भी किया जा सकता है:
पहली बार, क्विक सोर्स टैब की मदद से, सीएसएस नियमों के साथ-साथ अपने एचटीएमएल या JavaScript सोर्स कोड पर फ़ोकस किया जा सकता है. साथ ही, स्टाइल पैनल में किसी सीएसएस प्रॉपर्टी पर क्लिक करने पर, क्विक सोर्स टैब अपने-आप उस प्रॉपर्टी पर कूद जाता है और सोर्स में उसकी परिभाषा को हाइलाइट कर देता है.
इसे आज ही आज़माने के लिए, Chrome Canary में सोर्स के बीच अंतर एक्सपेरिमेंट को चालू करें.
Sass फ़ाइल में लाइव बदलाव करना
Sass फ़ाइल में बदलाव करने के वर्कफ़्लो में होने वाले कुछ बड़े सुधारों के बारे में यहां खास जानकारी दी गई है. ये सुविधाएं, एक्सपेरिमेंट के शुरुआती दौर में हैं. जब ये सुविधाएं आज़माने के लिए तैयार हो जाएंगी, तब हम आपको इस बारे में एक अलग पोस्ट में बताएंगे.
मूल रूप से, DevTools की मदद से Sass वैरिएबल को उसी तरह देखा और उनमें बदलाव किया जा सकेगा जिस तरह से आपने हमेशा उम्मीद की थी. Sass वैरिएबल से कंपाइल की गई वैल्यू पर क्लिक करें. ऐसा करने पर, 'क्विक सोर्स' का नया टैब, वैरिएबल की परिभाषा पर खुल जाएगा.
Sass वैरिएबल से कंपाइल की गई वैल्यू में बदलाव करने पर, आपका बदलाव Sass वैरिएबल को अपडेट करता है, न कि सिर्फ़ चुनी गई अलग-अलग प्रॉपर्टी को.
प्रोग्रेसिव वेब ऐप्लिकेशन
Google I/O 2016 में वेब और Chrome से जुड़ी बातचीत की सूची देखें. इससे आपको वेब डेवलपमेंट की दुनिया में एक बड़ी थीम दिखेगी: प्रोग्रेसिव वेब ऐप्लिकेशन.
प्रोग्रेसिव वेब ऐप्लिकेशन मॉडल के आने के साथ, DevTools में तेज़ी से बदलाव किए जा रहे हैं. इससे डेवलपर को बेहतर प्रोग्रेसिव वेब ऐप्लिकेशन बनाने के लिए ज़रूरी टूल मिल पाएंगे. हमें पता चला है कि इन आधुनिक ऐप्लिकेशन को बनाने और डीबग करने के लिए, अक्सर खास ज़रूरतें होती हैं. इसलिए, DevTools में प्रोग्रेसिव वेब ऐप्लिकेशन के डेवलपमेंट के लिए एक पूरा पैनल है. Chrome Canary खोलें. आपको दिखेगा कि 'संसाधन' पैनल की जगह 'ऐप्लिकेशन' पैनल आ गया है. संसाधन पैनल की सभी पिछली सुविधाएं अब भी मौजूद हैं. इसमें सिर्फ़ कुछ नए पैनल हैं, जिन्हें खास तौर पर प्रोग्रेसिव वेब ऐप्लिकेशन डेवलपमेंट के लिए डिज़ाइन किया गया है:
मेनिफ़ेस्ट पैनल में, आपको ऐप्लिकेशन की मेनिफ़ेस्ट फ़ाइल की जानकारी विज़ुअल के तौर पर दिखती है. यहां से, "होम स्क्रीन पर जोड़ें" वर्कफ़्लो को मैन्युअल तरीके से ट्रिगर किया जा सकता है.
सर्विस वर्कर पैनल की मदद से, मौजूदा पेज के लिए रजिस्टर किए गए सर्विस वर्कर की जांच की जा सकती है और उससे इंटरैक्ट किया जा सकता है.
'स्टोरेज खाली करें' पैनल की मदद से, सभी तरह का डेटा मिटाया जा सकता है, ताकि आपके पास एक खाली पेज देखने का विकल्प हो.
JavaScript
फ़ुलस्टैक वेब डेवलपमेंट में, फ़्रंटएंड और बैकएंड के बीच की सीमा को पार करना मुश्किल होता है. अगर आपको पता चलता है कि वेब ऐप्लिकेशन को डीबग करते समय, आपका बैकएंड 500 स्टेटस कोड दिखा रहा है, तो इसका मतलब है कि DevTools की मदद से समस्या को हल नहीं किया जा सकता. समस्या को डीबग करने के लिए, आपको संदर्भ बदलने होंगे और बैकएंड डेवलपमेंट एनवायरमेंट को चालू करना होगा.
हालांकि, Node.js में लिखे गए बैकएंड की वजह से, फ़्रंटएंड और बैकएंड के बीच की सीमाएं धुंधली होने लगी हैं. Node.js, V8 JavaScript इंजन पर काम करता है. यह वही इंजन है जो Google Chrome को चलाता है. इसलिए, हमने DevTools से Node.js को डीबग करने की सुविधा जोड़ी है. Node.js टीमों के लिए V8, DevTools, और Google Cloud Platform की मदद से, अब किसी Node.js ऐप्लिकेशन की जांच करने के लिए, DevTools की सभी बेहतरीन डीबगिंग सुविधाओं का इस्तेमाल किया जा सकता है. यह सुविधा, Node.js के नाइटली बिल्ड में पहले से ही उपलब्ध है. हालांकि, किसी बड़ी रिलीज़ में शामिल करने से पहले, DevTools इंटिग्रेशन को बेहतर बनाया जा रहा है. आने वाले समय में, DevTools से अपने Node.js ऐप्लिकेशन को डीबग करना उतना ही आसान हो जाएगा जितना कि node --inspect app.js पास करना और किसी भी Chrome विंडो में DevTools से कनेक्ट करना.
Node Inspector जैसे मौजूदा टूल, जीयूआई (ग्राफ़िक यूज़र इंटरफ़ेस) पर आधारित डीबगिंग अनुभव देते हैं. हालांकि, Node.js DevTools का नया इंटिग्रेशन, DevTools की नई डीबगिंग सुविधाओं के साथ अप-टू-डेट रहेगा. जैसे, असाइन किए गए स्टैक की डीबगिंग, ब्लैकबॉक्सिंग, और ES6 के साथ काम करना.