हाल ही में, कई अपडेट की गई सुविधाओं की वजह से, इसे Chrome DevTools में शामिल किया गया है. हाल ही में, इस पर कुछ छोटे और कुछ बड़े वर्शन शामिल किए गए हैं. हम एलिमेंट पैनल के अपडेट से शुरुआत करेंगे और कंसोल, टाइमलाइन वगैरह के बारे में बात करेंगे.
स्टाइल के जो नियम बंद किए गए हैं उन्हें टिप्पणी के तौर पर कॉपी किया गया
स्टाइल पैनल में सभी सीएसएस नियमों को कॉपी करने पर, अब वे स्टाइल भी शामिल होंगी जिन्हें आपने टॉगल करने के लिए बंद किया है. ये आपके क्लिपबोर्ड में तब मौजूद रहेंगे, जैसे आपने टिप्पणी में की थी. [crbug.com/316532]
सीएसएस पाथ के तौर पर कॉपी करें
'सीएसएस पाथ के तौर पर कॉपी करें' सुविधा, अब एलिमेंट पैनल में डीओएम नोड के लिए मेन्यू आइटम के तौर पर उपलब्ध है ('कॉपी करें' मेन्यू आइटम की तरह).
सीएसएस सिलेक्टर जनरेट करने की ज़रूरत, सिर्फ़ आपकी स्टाइलशीट या JavaScript तक सीमित नहीं है. ये WebDriver टेस्ट में, लोकेटर रणनीतियों के विकल्प भी हो सकती हैं. [crbug.com/277286]
शैडो डीओएम एलिमेंट स्टाइल देखें
शैडो रूट के चाइल्ड एलिमेंट की अब स्टाइल की जांच की जा सकती है. [crbug.com/279390]
कंसोल की कॉपी() ऑब्जेक्ट के लिए काम करती है
Command Line API का copy() तरीका अब ऑब्जेक्ट के लिए काम करता है. आगे बढ़ें और कंसोल पैनल में copy({foo:'bar'}) को आज़माएं. साथ ही, देखें कि अब क्लिपबोर्ड में ऑब्जेक्ट का स्ट्रिंग और फ़ॉर्मैट किया गया वर्शन कैसे है. [crbug.com/289348]
कंसोल के लिए रेगुलर एक्सप्रेशन फ़िल्टर
कंसोल पैनल में रेगुलर एक्सप्रेशन का इस्तेमाल करके, कंसोल मैसेज को फ़िल्टर करें. crbug.com/318308]
इवेंट लिसनर को आसानी से हटाएं
दस्तावेज़ में पहला माउसव्हील इवेंट लिसनर फिर से पाने के लिए, कंसोल पैनल में getEventListeners(document).mousewheel[0]; को आज़माएं. इसके बाद, $_.remove() आज़माएं; इवेंट लिसनर ($_ = सबसे हाल में आकलन किए गए एक्सप्रेशन की वैल्यू) को हटाने के लिए. crbug.com/309524]
सीएसएस से जुड़ी चेतावनियां हटाना
आपको "अमान्य सीएसएस प्रॉपर्टी वैल्यू" स्टाइल की चेतावनियां अब हटा दी गई हैं. ब्राउज़र हैक सहित असली दुनिया के सीएसएस के मुकाबले इसे और मज़बूत बनाने की कोशिश लगातार की जा रही है. crbug.com/309982]
पाई चार्ट में, टाइमलाइन की कार्रवाइयों की खास जानकारी दी गई है
टाइमलाइन पैनल में अब जानकारी वाले पैनल में एक पाई चार्ट दिखेगा. यह विज़ुअल तौर पर, रेंडरिंग की लागत का सोर्स दिखाता है. इससे आपको एक नज़र में अपनी रुकावटों को पहचानने में मदद मिलती है.
आपको पता चलेगा कि पॉपओवर में दिखने वाली ज़्यादातर जानकारी, अब आपके पैनल में उपलब्ध हो गई है. देखने के लिए, टाइमलाइन रिकॉर्डिंग शुरू करें और कोई फ़्रेम चुनें. इसके बाद, जानकारी वाले नए पैनल पर ध्यान दें जिसमें एक पाई चार्ट होता है. फ़्रेम व्यू में, आपको चुने गए फ़्रेम के लिए औसत FPS (1000ms/frame duration) जैसे दिलचस्प आंकड़े मिलेंगे. [crbug.com/247786]
इमेज का साइज़ बदलने से जुड़े इवेंट की जानकारी
टाइमलाइन पैनल में इमेज का साइज़ बदलने और डिकोड करने वाले इवेंट में, अब एलिमेंट पैनल में डीओएम नोड का लिंक शामिल किया जाता है.
इमेज के यूआरएल का लिंक, आपको संसाधन पैनल में इससे जुड़े संसाधन पर ले जाता है. crbug.com/244159]
जीपीयू फ़्रेम
जीपीयू पर मौजूद फ़्रेम अब सबसे ऊपर, मुख्य थ्रेड के फ़्रेम के ऊपर दिखते हैं. crbug.com/305863]
पॉपस्टेट सुनने वालों से जुड़ें
'popstate' अब सोर्स पैनल के साइडबार में, इवेंट लिसनर ब्रेकपॉइंट के तौर पर उपलब्ध है. [crbug.com/88112]
ड्रॉवर में उपलब्ध रेंडरिंग सेटिंग
पैनल खोलने से अब कई पैनल दिखते हैं, जिनमें से एक रेंडरिंग पैनल है. इसका इस्तेमाल पेंट रेक्टैंगल, FPS मीटर वगैरह दिखाने के लिए करें. यह सेटिंग > "कंसोल पैनल में 'रेंडरिंग' व्यू दिखाएं में डिफ़ॉल्ट रूप से चालू रहती है"
इमेज को डेटा यूआरएल के तौर पर कॉपी करें
संसाधन पैनल में मौजूद इमेज एसेट का कॉन्टेंट, अब डेटा यूआरआई (data:image/png;base64,iVBO...) के तौर पर कॉपी किया जा सकता है.
इसे आज़माने के लिए, फ़्रेम > [संसाधन] > इमेज में इमेज संसाधन ढूंढें और संदर्भ मेन्यू ऐक्सेस करने के लिए इमेज की झलक पर राइट क्लिक करें. इसके बाद, ‘इमेज को डेटा यूआरएल के रूप में कॉपी करें’ चुनें. crbug.com/321132]
डेटा यूआरआई को फ़िल्टर करना
अगर आपने कभी नहीं सोचा था कि वे डेटा से जुड़े हैं, तो अब डेटा यूआरआई को नेटवर्क टैब से फ़िल्टर करके बाहर रखा जा सकता है. फ़िल्टर आइकॉन चुनें
नेटवर्क टाइमिंग से जुड़ी गड़बड़ियां ठीक की गईं
अगर आपने देखा है कि आपकी इमेज डाउनलोड होने में 3,00,000 साल लग रहे हैं, तो हम माफ़ी चाहते हैं. ;) नेटवर्क संसाधनों के लिए ये गलत समय अब ठीक कर दिए गए हैं. crbug.com/309570]
नेटवर्क रिकॉर्डिंग के व्यवहार पर ज़्यादा कंट्रोल मिलता है
रिकॉर्डिंग नेटवर्क का व्यवहार थोड़ा अलग होता है. सबसे पहले, 'रिकॉर्ड करें' बटन, आपकी टाइमलाइन या सीपीयू प्रोफ़ाइल की तरह ही काम करता है. इसके अलावा, अगर आप DevTools खुले होने के दौरान पेज को फिर से लोड करते हैं, तो नेटवर्क रिकॉर्डिंग अपने-आप शुरू हो जाएगी. इसके बाद यह बंद हो जाएगा, इसलिए अगर आप पेज लोड होने के बाद नेटवर्क गतिविधि को कैप्चर करना चाहते हैं, तो इसे चालू करें. इससे, देर से मिलने वाले नेटवर्क अनुरोधों के बिना अपने वॉटरफ़ॉल को विज़ुअलाइज़ करना आसान हो जाता है. इससे नतीजों पर असर नहीं पड़ता है. crbug.com/325878]
DevTools थीम अब एक्सटेंशन के ज़रिए उपलब्ध हैं
उपयोगकर्ता स्टाइलशीट अब DevTools एक्सपेरिमेंट के ज़रिए उपलब्ध हैं. चेकबॉक्स: "कस्टम यूज़र इंटरफ़ेस (यूआई) थीम को अनुमति दें" की मदद से, Chrome एक्सटेंशन को DevTools पर कस्टम स्टाइल लागू करने की अनुमति मिलती है. उदाहरण के लिए, DevTools थीम एक्सटेंशन का सैंपल देखें. crbug.com/318566]
DevTools डाइजेस्ट के इस वर्शन में बस इतना ही, अगर आपने अभी तक नवंबर वर्शन नहीं देखा है, तो इसे देखें.