DevTools (Chrome 75) में नया क्या है

Kayce Basques

नमस्कार! Chrome 75 में Chrome DevTools में जो नई सुविधाएं जोड़ी गई हैं उनके बारे में यहां बताया गया है.

इस पेज का वीडियो वर्शन

सीएसएस फ़ंक्शन अपने-आप पूरा होने पर, काम की प्रीसेट वैल्यू

filter जैसी कुछ सीएसएस प्रॉपर्टी, वैल्यू के तौर पर फ़ंक्शन लेती हैं. उदाहरण के लिए, filter: blur(1px) किसी नोड में एक पिक्सल का ब्लर जोड़ता है. filter जैसी प्रॉपर्टी अपने-आप पूरी होने पर, DevTools अब प्रॉपर्टी में काम की वैल्यू डालता है, ताकि आप यह देख सकें कि वैल्यू से नोड पर किस तरह का बदलाव होगा.

अपने-आप पूरा होने की सुविधा का पुराना तरीका.

पहली इमेज. अपने-आप पूरा होने की सुविधा का पुराना तरीका. DevTools, filter: blur में अपने-आप पूरा हो रहा है और व्यूपोर्ट में कोई बदलाव नहीं दिख रहा है.

ऑटोकंप्लीट की नई सुविधा.

दूसरी इमेज. ऑटोकंप्लीट की नई सुविधा. DevTools में filter: blur(1px) अपने-आप पूरा हो रहा है और व्यूपोर्ट में बदलाव दिख रहा है.

Chromium से जुड़ी समस्या: #931145

कमांड मेन्यू से साइट डेटा मिटाना

कमांड मेन्यू खोलने के लिए, Control+Shift+P या Command+Shift+P (Mac) दबाएं. इसके बाद, पेज से जुड़ा सारा डेटा मिटाने के लिए, साइट डेटा मिटाएं कमांड चलाएं. इसमें ये शामिल हैं: सर्विस वर्कर्स, localStorage, sessionStorage, IndexedDB, Web SQL, कुकी, कैश मेमोरी, और ऐप्लिकेशन कैश मेमोरी.

साइट डेटा मिटाएं कमांड.

तीसरी इमेज. साइट डेटा मिटाएं कमांड.

साइट डेटा मिटाने की सुविधा, ऐप्लिकेशन > स्टोरेज खाली करें में कुछ समय से उपलब्ध है. Chrome 75 में, कमांड मेन्यू से कमांड चलाने की नई सुविधा जोड़ी गई है.

अगर आपको साइट का पूरा डेटा नहीं मिटाना है, तो ऐप्लिकेशन > स्टोरेज खाली करें पर जाकर, यह कंट्रोल किया जा सकता है कि कौनसा डेटा मिटाया जाए.

'ऐप्लिकेशन' टैब, जिसमें 'स्टोरेज खाली करें' चुना गया है.

चौथी इमेज. ऐप्लिकेशन > स्टोरेज खाली करें.

Chromium से जुड़ी मिलती-जुलती समस्या: #942503

IndexedDB के सभी डेटाबेस देखना

पहले, ऐप्लिकेशन > IndexedDB से सिर्फ़ मुख्य ऑरिजिन के IndexedDB डेटाबेस की जांच की जा सकती थी. उदाहरण के लिए, अगर आपके पेज पर <iframe> टैग है और वह <iframe>, IndexedDB का इस्तेमाल कर रहा है, तो आपको उसका डेटाबेस नहीं दिखेगा. Chrome 75 से, DevTools सभी ऑरिजिन के लिए IndexedDB डेटाबेस दिखाता है.

पुराना व्यवहार. पेज पर IndexedDB का इस्तेमाल करने वाला डेमो एम्बेड किया गया है, लेकिन कोई डेटाबेस नहीं दिख रहा है.

पांचवीं इमेज. पुराना व्यवहार. पेज पर, IndexedDB का इस्तेमाल करने वाला डेमो एम्बेड किया गया है, लेकिन कोई डेटाबेस नहीं दिख रहा है.

नया व्यवहार. डेमो के डेटाबेस दिख रहे हैं.

छठी इमेज. नया व्यवहार. डेमो के डेटाबेस दिख रहे हैं.

Chromium से जुड़ी समस्या: #943770

कर्सर घुमाने पर, किसी संसाधन का कंप्रेस नहीं किया गया साइज़ देखना

मान लें कि आप नेटवर्क गतिविधि की जांच कर रहे हैं. आपकी साइट, रिसॉर्स के ट्रांसफ़र साइज़ को कम करने के लिए, टेक्स्ट कंप्रेस करने की सुविधा का इस्तेमाल करती है. आपको यह देखना है कि ब्राउज़र के अनकंप्रेस करने के बाद, पेज के संसाधन कितने बड़े हैं. पहले, यह जानकारी सिर्फ़ बड़े अनुरोध वाली पंक्तियों का इस्तेमाल करने पर उपलब्ध थी. अब साइज़ कॉलम पर कर्सर घुमाकर, यह जानकारी ऐक्सेस की जा सकती है.

किसी संसाधन का कंप्रेस नहीं किया गया साइज़ देखने के लिए, साइज़ कॉलम पर कर्सर घुमाना.

सातवीं इमेज. किसी संसाधन का कंप्रेस नहीं किया गया साइज़ देखने के लिए, साइज़ कॉलम पर कर्सर घुमाना.

Chromium से जुड़ी मिलती-जुलती समस्या: #805429

ब्रेकपॉइंट पैनल में इनलाइन ब्रेकपॉइंट

मान लें कि आपने कोड की इस लाइन में कोड की लाइन का ब्रेकपॉइंट जोड़ा है:

document.querySelector('#dante').addEventListener('click', logWarning);

DevTools में, ब्रेकपॉइंट पर रोकने का समय तय करने की सुविधा कुछ समय से उपलब्ध है. जैसे: लाइन की शुरुआत में, document.querySelector('#dante') को कॉल करने से पहले या addEventListener('click', logWarning) को कॉल करने से पहले. तीनों को चालू करने पर, तीन ब्रेकपॉइंट बन जाएंगे. पहले, ब्रेकपॉइंट पैनल में, इन तीन ब्रेकपॉइंट को अलग-अलग मैनेज करने की सुविधा नहीं थी. Chrome 75 में, हर इनलाइन ब्रेकपॉइंट को ब्रेकपॉइंट पैनल में अपनी एंट्री मिलती है.

पुराना व्यवहार. ब्रेकपॉइंट पैनल में सिर्फ़ एक एंट्री है.

आठवीं इमेज. पुराना व्यवहार. ब्रेकपॉइंट पैनल में सिर्फ़ एक एंट्री है.

नया व्यवहार. ब्रेकपॉइंट पैनल में तीन एंट्री हैं.

नौवीं इमेज. नया व्यवहार. ब्रेकपॉइंट पैनल में तीन एंट्री हैं.

Chromium से जुड़ी मिलती-जुलती समस्या: #927961

IndexedDB और कैश मेमोरी के संसाधनों की संख्या

IndexedDB और कैश मेमोरी पैनल में अब किसी डेटाबेस या कैश मेमोरी में मौजूद रिसॉर्स की कुल संख्या दिखती है.

IndexedDB डेटाबेस में मौजूद कुल एंट्री.

10वीं इमेज. IndexedDB डेटाबेस में मौजूद कुल एंट्री.

Chromium से जुड़ी मिलती-जुलती समस्याएं: #941197, #930773, #930865

ज़्यादा जानकारी वाले टूलटिप को बंद करने की सेटिंग

Chrome 73 में, जांच मोड में ज़्यादा जानकारी वाले टूलटिप जोड़े गए हैं.

ज़्यादा जानकारी वाला टूलटिप.

11वीं इमेज. रंग, फ़ॉन्ट, मार्जिन, और कंट्रास्ट दिखाने वाला ज़्यादा जानकारी वाला टूलटिप.

अब सेटिंग > प्राथमिकताएं > एलिमेंट > ज़्यादा जानकारी वाला जांच टूल दिखाएं पर जाकर, ज़्यादा जानकारी वाले टूलटिप बंद किए जा सकते हैं.

छोटा टूलटिप.

12वीं इमेज. सिर्फ़ चौड़ाई और ऊंचाई दिखाने वाला छोटा टूलटिप.

Chromium से जुड़ी मिलती-जुलती समस्या: #948417

सोर्स पैनल एडिटर में, टैब इंडेंटेशन को टॉगल करने की सेटिंग

सुलभता की जांच से पता चला है कि एडिटर में टैब ट्रैप था. कीबोर्ड का इस्तेमाल करने वाला व्यक्ति, एडिटर में टैब करने के बाद, उससे बाहर नहीं निकल पाता था. इसकी वजह यह थी कि Tab बटन का इस्तेमाल इंडेंटेशन के लिए किया जाता था. डिफ़ॉल्ट तरीके को बदलने और फ़ोकस को दूसरी जगह ले जाने के लिए Tab का इस्तेमाल करने के लिए, सेटिंग > प्राथमिकताएं > सोर्स > Tab का इस्तेमाल करके फ़ोकस को दूसरी जगह ले जाने की सुविधा चालू करें को चालू करें.

हाल ही में, DevTools के यूज़र इंटरफ़ेस (यूआई) को कीबोर्ड से बेहतर तरीके से नेविगेट करने लायक बनाने के लिए काफ़ी काम किया गया है. ज़्यादा जानने के लिए, रॉब की सहायता टेक्नोलॉजी की मदद से Chrome DevTools में नेविगेट करना लेख पढ़ें.

झलक वाले चैनल डाउनलोड करना

Chrome कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.