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, कुकी, और एसक्यूएल{/16

साइट डेटा मिटाएं आदेश.

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

साइट डेटा मिटाने की सुविधा, ऐप्लिकेशन > स्टोरेज खाली करें में कुछ समय से उपलब्ध है. 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 का इस्तेमाल करें. इसके लिए, सेटिंग > प्राथमिकताएं > सोर्स > टैब मूव फ़ोकस चालू करें को चालू करें.

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

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

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

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

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

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

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