नमस्ते, DevTools डाइजेस्ट के पिछले एडिशन में, हमें असाइनोक्रोनस कॉल स्टैक और कुछ अन्य सुविधाओं के बारे में जानकारी मिली थी. इस वर्शन में, हमें नेटवर्क पैनल को बेहतर तरीके से फ़िल्टर करने की सुविधा (शब्द अपने-आप पूरा होने की सुविधा के साथ), शैडो DOM कॉन्टेंट में बदलाव करने की सुविधा, CodeMirror 4 के अपडेट वगैरह दिखेंगे.
नेटवर्क पैनल को फ़िल्टर करना
अब डोमेन जैसे कुछ फ़ील्ड के हिसाब से संसाधनों को फ़िल्टर किया जा सकता है. फ़िल्टर का एक फ़ॉर्मैट यह है: Domain:website.com. फ़िल्टर करने के अलावा, आपको फ़िल्टर की मान्य वैल्यू के लिए, ऑटोकंप्लीट के सुझाव भी मिलते हैं. ये सुझाव, क्वेरी टाइप करते ही रीयल टाइम में अपडेट होते हैं. यह तब काम आता है, जब आपको किसी खास डोमेन से दिखाए जाने वाले सभी संसाधनों को ढूंढना हो. [crbubg.com/258421]
शैडो DOM कॉन्टेंट में बदलाव करना
DevTools में, एलिमेंट पैनल में हमेशा से ही सामान्य एचटीएमएल में बदलाव किया जा सकता है. अब ये सुविधाएं, शैडो डीओएम के एलिमेंट में भी उपलब्ध हैं. [crbug.com/348991]
CodeMirror 4.0 पर अपग्रेड करना
Codeमिर, स्रोत पैनल के हिस्से के रूप में इस्तेमाल किए जा रहे JavaScript आधारित टेक्स्ट एडिटर को वर्शन 4 में अपग्रेड कर दिया गया है. इस वजह से, कई नई सुविधाएं जोड़ी गई हैं. crbug.com/356878]
सीएसएस-प्रॉपर्टी के लिए तुरंत खोज करना
अब स्टाइल पैनल में मौजूद नए खोज बॉक्स से, प्रॉपर्टी के नाम, वैल्यू या नियम चुनने वाले टूल खोजे जा सकते हैं. क्वेरी टाइप करते ही, नतीजे रीयल-टाइम में हाइलाइट हो जाते हैं. [crbug.com/278852]
कंसोल मैसेज के बगल में मौजूद टाइमस्टैंप
एक के बाद एक कई मैसेज लॉग करते समय, यह देखना मददगार हो सकता है कि मैसेज किस समय लॉग किया गया. इसे DevTools एक्सपेरिमेंट की मदद से चालू किया जा सकता है. [crbug.com/131714]
हीप स्नैपशॉट के लिए मेमोरी के आंकड़ों का ब्रेकडाउन
रिकॉर्ड किया गया हीप स्नैपशॉट देखते समय, आंकड़ों के पाई चार्ट पर ध्यान दें. इससे, आपको यह जानकारी विज़ुअल और रंग-कोड में मिलती है कि JavaScript के किस हिस्से में सबसे ज़्यादा मेमोरी खर्च हो रही है. फ़िलहाल, यह सुविधा प्रयोग के तौर पर उपलब्ध है. इसे आज़माने के लिए, “हीप स्नैपशॉट के आंकड़े” चालू करें. [crbug.com/346335]
console.log का मूल सोर्स देखें, न कि रैप किया गया वर्शन
हो सकता है कि आपके पास console.log wrapper फ़ंक्शन हो, लेकिन माफ़ करें, console में आपके सभी मैसेज util.js:46 जैसे किसी फ़ंक्शन से आते हैं. अब DevTools की मदद से, अपनी मूल जगहों की जानकारी का समाधान किया जा सकता है. वह फ़ाइल डालें जिसमें कंसोल लॉग मैसेज को “खास नामों वाले सोर्स से आगे बढ़ें” इनपुट बॉक्स में रैप किया गया हो, ताकि DevTools को ब्लैकबॉक्स किया जा सके. इसके बाद, लॉग स्टेटमेंट का सही सोर्स दिखाया जा सके. [crbug.com/231007]
कुछ और छोटी, लेकिन असरदार सुविधाएं
डाइनैमिक तौर पर JavaScript इवेंट लिसनर जोड़ने या हटाने के बाद, एलिमेंट पैनल में इवेंट लिसनर पैनल को रीफ़्रेश करें. [crbug.com/341044]
Ctrl+का इस्तेमाल करके, Console इनपुट पर फ़ोकस किया जा सकता है. यह सुविधा, DevTools में सिर्फ़ कीबोर्ड वर्कफ़्लो के लिए काम की हो सकती है. [crbug.com/144943]वैल्यू (बिंदीदार, डैश वाली, डबल, ग्रूव) के लिए, बॉर्डर-स्टाइल ऑटोकंप्लीट सुझाव को स्पेसिफ़िकेशन के हिसाब से अपडेट किया गया है. [crbug.com/349998]
डिफ़ॉल्ट सेटिंग को पहले जैसा करें और फिर से लोड करें बटन **सेटिंग पैनल में जोड़ दिया गया है. यह वही काम करता है जो टिन पर लिखा गया है. [crbug.com/135451]
फ़िलहाल, यह सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध है. बाईं ओर डॉक करें सुविधा को आज़माकर, देखें कि यह आपके वर्कफ़्लो के लिए सही है या नहीं. लेआउट के अन्य मोड में, मुख्य विंडो (दाईं या नीचे) में डॉक करना और अलग विंडो में अनडॉक करना शामिल है. [crbug.com/134282]
"wheel" को अब इवेंट लिस्नर ब्रेकपॉइंट के तौर पर ऑफ़र किया जाता है. यह सामान्य क्लिक, माउस मूव, माउस बटन दबाने वगैरह के इवेंट के अलावा है. [crbug.com/347562]
अभी के लिए बस इतना ही, पढ़ने के लिए धन्यवाद!