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