Chrome Canary में इस महीने कई सुविधाएं जोड़ी गई हैं. टाइमलाइन में इकट्ठा की गई जानकारी की मदद से, जानें कि तीसरे पक्ष की कौनसी स्क्रिप्ट आपकी साइट की परफ़ॉर्मेंस पर असर डालती हैं. साथ ही, नए कलर पैलेट की मदद से एक जैसे रंग चुनने का तरीका, पसंद के मुताबिक बनाई जा सकने वाली नेटवर्क प्रोफ़ाइलों की मदद से कॉन्फ़्रेंस वाई-फ़ाई को सिम्युलेट करने का तरीका, और नए मुख्य मेन्यू और बेहतर टूलटिप की मदद से, DevTools यूज़र इंटरफ़ेस (यूआई) का ज़्यादा से ज़्यादा फ़ायदा पाने का तरीका जानें.
परफ़ॉर्मेंस से जुड़ी समस्याओं को बेहतर तरीके से हल करना: टाइमलाइन में इकट्ठा की गई जानकारी
आज की वेबसाइटों पर, हम तीसरे पक्षों के ज़्यादा से ज़्यादा बीकन, आंकड़ों, सोशल, font-loading, और विज्ञापन सेवाओं का इस्तेमाल कर रहे हैं. कभी-कभी कुछ ज़्यादा भी. ऐसा न हो, इसके लिए हम टाइमलाइन में इकट्ठा की गई जानकारी दिखाने की सुविधा ला रहे हैं. इससे आपको समस्या के बारे में जानकारी मिलेगी.
एग्रीगेट की गई जानकारी टैब में, सिर्फ़ ज़्यादा समय लेने वाले फ़ंक्शन या पूरे कॉल ट्री पर फ़ोकस किया जा सकता है. इसके बाद, चुने गए डेटा को डोमेन, सब-डोमेन या अलग-अलग यूआरएल के हिसाब से बांटा जा सकता है. उदाहरण के लिए, पेज लोड होने की ऊपर दी गई टाइमलाइन में, अब धीमे होने की समस्या को आसानी से तीसरे पक्ष की स्क्रिप्ट को एट्रिब्यूट किया जा सकता है. ये स्क्रिप्ट, facebook.net या twitter.com जैसे डोमेन से आती हैं.
नया और खास मुख्य मेन्यू
मुख्य टूलबार को व्यवस्थित करने के लिए, हमने ड्रॉअर, सेटिंग, और डॉकिंग आइकॉन को एक नए मेन्यू में ले जाया है.
खास तौर पर, डॉकिंग करना बहुत आसान हो गया है. पिछले आइकॉन को दबाकर रखने के बजाय, हर डॉकिंग पोज़िशन का अपना आइकॉन होता है.
डॉकिंग के अलावा, हमने फ़ाइल को तुरंत खोजने की सुविधा, शॉर्टकट, और सहायता (जो हमारे नए होम पेज पर ले जाती है) जोड़ी है.
बेहतर टूलटिप की मदद से DevTools के बारे में जानें
DevTools में हमारे पास कई बटन हैं और हम जानते हैं कि उनमें से सभी बटन के काम के बारे में अपने-आप जानकारी नहीं मिलती. हमने अब कार्रवाइयों और उनके शॉर्टकट को ढूंढना आसान बना दिया है. इसके लिए, हमने सिस्टम के नेटिव टूलटिप को कस्टम और प्लैटफ़ॉर्म के हिसाब से काम करने वाले टूलटिप से बदल दिया है.
नए टूलटिप ज़्यादा तेज़ी से दिखते हैं. साथ ही, इनमें कीबोर्ड शॉर्टकट भी शामिल होते हैं (अगर कोई शॉर्टकट उपलब्ध हो).
नेटवर्क थ्रॉटलिंग की कस्टम प्रोफ़ाइल बनाना
अगर नेटवर्क थ्रॉटलर के डिफ़ॉल्ट विकल्प आपके काम के नहीं हैं और आपको "कॉन्फ़्रेंस वाई-फ़ाई" विकल्प चाहिए या पुराने समय की यादों को ताज़ा करने के लिए, "110 बाउड" लाइन का इस्तेमाल करना है, तो हमारे पास आपके लिए एक अच्छी खबर है. हमने एक नया सेटिंग पैनल जोड़ा है. इसकी मदद से, इनमें से कोई भी काम किया जा सकता है.
अपने-आप लागू होने वाले, मटीरियल, और पसंद के मुताबिक कलर पैलेट
चाहे आपको मैजिक के रंग फिर से बनाने हों या मौजूदा कलर पैलेट का इस्तेमाल करना हो, बेहतर कलर पिकर की मदद से अपनी साइट के लिए एक जैसा कलर पैलेट चुना जा सकता है.
पैलेट के बगल में मौजूद छोटे स्विचर आइकॉन पर क्लिक करके, इनमें से कोई विकल्प चुना जा सकता है:
- पेज के रंग — यह पैलेट, आपकी सीएसएस में मौजूद रंगों से अपने-आप जनरेट होता है. इसलिए, अगर आपको किसी मौजूदा साइट को बड़ा करना है, तो यह एक बेहतरीन विकल्प है.
- Material Design — Material Design पैलेट में, पहले से ही खूबसूरत रंग मौजूद होते हैं. यह नया प्रोजेक्ट शुरू करने के लिए एक बेहतरीन विकल्प है. फ़िलहाल, आपको सभी प्राइमरी कलर दिखेंगे. हालांकि, हम जल्द ही सभी शेड उपलब्ध कराएंगे.
- पसंद के मुताबिक — यह आपका अपना प्लैटफ़ॉर्म है. पिकर में से कोई रंग चुनकर नए रंग जोड़ें. इसके बाद, पैलेट के बगल में मौजूद "प्लस" आइकॉन पर क्लिक करें. उन्हें खींचकर क्रम में लगाएं. साथ ही, 'हटाएं' जैसे ज़्यादा विकल्प देखने के लिए, राइट क्लिक करें.
हमें अपनी राय दें और बताएं कि हम रंगों की कहानी को और कैसे बेहतर बना सकते हैं.
बाकी के सबसे अच्छे
- fetch() API का इस्तेमाल करके किए गए अनुरोध, अब नेटवर्क पैनल में दिखते हैं
- पैनल का लेआउट अपने-आप बनने की सुविधा से यह पक्का होता है कि DevTools
के पैनल का साइज़ बदलने पर, वे नई जगह की सीमाओं के हिसाब से अडजस्ट हो जाएं. - एलिमेंट और डिवाइस मोड की जांच करें में नए आइकॉन का एक सेट है.
- डीओएम पैनल में मौजूद एट्रिब्यूट अब अलग-अलग रंग में दिखते हैं. भले ही, नोड को हाइलाइट किया गया हो. (पहले वे सभी सफ़ेद थे.)
- छिपे हुए एलिमेंट (चुने गए डीओएम नोड पर "h" दबाकर चालू किए जाते हैं) अब बाईं ओर स्लेटी रंग के गोले के आकार में इंडिकेटर दिखाते हैं. डीओएम ब्रेकपॉइंट भी नीले रंग के गोले के आकार में ऐसा ही करते हैं. यह नारंगी इंडिकेटर की तरह ही है, जो पहले से ही :hover जैसे एलिमेंट स्टेटस को लागू करने के लिए मौजूद है.
हमेशा की तरह, Twitter पर हमें अपनी राय दें या यहां टिप्पणी करें. साथ ही, crbug.com/new पर गड़बड़ियां सबमिट करें.
अगले महीने तक!
पॉल बाकौस और DevTools टीम