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