DevTools से जुड़ी ताज़ा खबरें
इस पोस्ट में मौजूद पहली खबर थोड़ी मेटा है – यह अपडेट ही है! हम समय-समय पर, Chrome DevTools से जुड़े अपडेट देते रहेंगे. हालांकि, महीने में कम से कम एक बार ही ऐसा किया जाएगा.
जब हम कहते हैं कि 'नई सुविधाएं', तो इसका मतलब है कि हम Chrome Canary में हाल ही में जोड़ी गई नई सुविधाओं के बारे में बात करेंगे. अगर आपको स्थिर वर्शन का इस्तेमाल करना है, तो यह भी ठीक है. हालांकि, अगर आप ज़्यादा जोखिम लेने वाले व्यक्ति हैं और आपको हमेशा अपडेट रहना है, तो ये पोस्ट आपके लिए हैं. नई सुविधाओं और गड़बड़ियों को ठीक करने के अलावा, आपको हर पोस्ट के आखिर में कम्यूनिटी के बारे में अहम जानकारी सेक्शन दिखेगा. इसमें, हमारे प्यारे उपयोगकर्ताओं के योगदान को हाइलाइट किया जाएगा.
देर न करते हुए, चलिए असल खबरों पर बात करते हैं.
DevTools में नई सुविधाएं
नेटवर्क और टाइमलाइन में फ़िल्म स्ट्रिप जैसे स्क्रीनशॉट
हमने एक हफ़्ते पहले ही, एक अहम नई सुविधा को एक्सपेरिमेंट से बाहर कर दिया है: नेटवर्क और टाइमलाइन, दोनों टैब में पेज के स्क्रीनशॉट कैप्चर करने की सुविधा.
फ़्रेम कैप्चर करने की सुविधा चालू करने के लिए, नेटवर्क पैनल में मौजूद छोटे कैमरे के आइकॉन पर क्लिक करें. इसके बाद, कैप्चर करने की सुविधा को ट्रिगर करने के लिए पेज को रीफ़्रेश करें. फ़िलहाल, हम WebPageTest जैसे अन्य टूल से कैप्चर किए गए स्क्रीनशॉट के अलावा, सिर्फ़ ऐसे फ़्रेम दिखाते हैं जो असल में पेंट से आए हैं.
किसी फ़्रेम पर दो बार क्लिक करने से, ज़ूम किया गया व्यू दिखता है. इसके बाद, नेविगेट करने के लिए बाएं/दाएं ऐरो का इस्तेमाल करें. किसी फ़्रेम पर कर्सर घुमाने से, पैनल और टाइमलाइन में लाइनें दिखती हैं. इससे यह पता चलता है कि फ़्रेम कब कैप्चर किया गया था. इससे, लोड होने के क्रम को समझने में मदद मिलती है. इससे, लोड करने से जुड़ी आम समस्याओं को डीबग करना आसान हो जाता है. जैसे, रेंडर करने से रोकने वाले वेब फ़ॉन्ट.
टाइमलाइन पैनल में, सबसे ऊपर मौजूद टूलबार में "स्क्रीनशॉट" चेकबॉक्स को टॉगल करके, स्क्रीनशॉट लेने की सुविधा चालू की जा सकती है. नेटवर्क पैनल की तुलना में, यहां चीज़ें थोड़ी अलग तरीके से काम करती हैं: इस मामले में, हम जितनी बार हो सके उतनी बार स्क्रीनशॉट कैप्चर करने की कोशिश करते हैं. भले ही, असल पेंट में कोई बदलाव न हुआ हो. ऐसा इसलिए किया जाता है, ताकि इन स्क्रीनशॉट को टाइमलाइन की अन्य पंक्तियों से जुड़ी लीनियर टाइमस्केल पर छोड़ा जा सके. झलक देखने के लिए, दो बार क्लिक करने की ज़रूरत नहीं होती. इसके बजाय, कर्सर घुमाने पर ज़ूम इन किए गए फ़्रेम दिखते हैं.
फ़ंक्शन और यूज़र एक्सपीरियंस के मामले में, दोनों सुविधाएं थोड़ी अलग हैं. इसलिए, हम आपको इन सुविधाओं को आज़माने के लिए बढ़ावा देना चाहते हैं. साथ ही, अगर आपका कोई सुझाव/राय या शिकायत है, तो crbug.com/new पर टिकट बनाकर या @ChromeDevTools को ट्वीट करके हमें बताएं.
नेटवर्क पैनल में नेटवर्क थ्रॉटलिंग
नेटवर्क धीमा करने की सुविधा, डिवाइस मोड के साथ जोड़ी गई थी. अब यह सुविधा नेटवर्क पैनल टूलबार में भी उपलब्ध है, ताकि आप एक ही जगह पर नेटवर्क ऑप्टिमाइज़ेशन पर फ़ोकस कर सकें.
हालांकि, यह नया होम सिर्फ़ एक मिरर है: यह अब भी डिवाइस मोड के बाहर उपलब्ध है, क्योंकि आपकी साइट को रिस्पॉन्सिव बनाने के लिए, खराब कनेक्टिविटी को सिम्युलेट करना अब भी बहुत ज़रूरी है.
आखिर में, क्या आप उन लोगों में से एक हैं जिन्होंने दिन भर काम करने के बाद, यह सोचा कि इंटरनेट कनेक्शन क्यों बंद हो गया है. इसके बाद, उन्हें पता चला कि उन्होंने नेटवर्क थ्रॉटलिंग की सुविधा बंद करना भूल गए थे? नेटवर्क थ्रॉटलिंग चालू होने पर, नेटवर्क पैनल टैब में अब चेतावनी वाला आइकॉन दिखता है.
अलग-अलग तरह की जानकारी
- क्या आपको नेटवर्क टाइमलाइन पर मौजूद वे अजीब सर्कल पसंद नहीं थे? हमने भी ऐसा ही किया. ये वे पल होते हैं जब नई फ़िल्म स्ट्रिप में कोई फ़्रेम कैप्चर किया गया था. अब कर्सर घुमाने पर, ये लाइनों के तौर पर दिखती हैं.
- डिवाइस मोड की मदद से, अब एक डिवाइस से दूसरे डिवाइस पर स्विच करने पर, स्क्रीन का ओरिएंटेशन नहीं बदलता
कम्यूनिटी हार्टबीट
Chrome DevTools का इस्तेमाल करना
ब्रेट लिटल ने यह छोटा सा शानदार टूरवॉक कोर्स रिलीज़ किया है. इसमें आपको DevTools की बुनियादी सुविधाओं के बारे में जानकारी मिलती है. साथ ही, इसमें ज़्यादा जानकारी वाले कई सुझाव और तरकीबें भी दी गई हैं. इसमें ज़रूर काम की जानकारी मिलती है. साथ ही, DevTools के ज़्यादा दस्तावेज़ों से भी फ़ायदा होता है!
DevTools IDE…?!
वेब डेवलपर और DevTools के प्रशंसक केनेथ ऑचबर्ग ने कुछ महीने पहले, कॉन्सेप्ट की पुष्टि करने वाला स्टैंडअलोन DevTools ऐप्लिकेशन बनाया था. इस हफ़्ते, उनकी ब्लॉग पोस्ट ने फिर से (हैकर) खबरों में जगह बनाई.
DevTools को एक बेहतरीन आईडीई में बदलना एक मज़ेदार आइडिया है. हमारी टीम के कई सदस्यों ने पहले भी इस बारे में सोचा है. हालांकि, यह एक बहुत बड़ा प्रोजेक्ट होगा.
आपकी क्या राय है? क्या DevTools IDE एक सपना है या इसे काम करते हुए देखा जा सकता है? यह कैसा दिखना चाहिए? टिप्पणियों में हमें बताएं!
आपसे जल्द मुलाकात होगी!
पॉल बाकौस और DevTools टीम