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