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