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