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> मौजूद था और वह IndexedDB का इस्तेमाल कर रहा था, तो आपको उसका डेटाबेस नहीं दिखेगा.<iframe> Chrome 75 से, DevTools सभी ऑरिजिन के लिए 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 और Cache पैन में अब डेटाबेस या कैश मेमोरी में मौजूद कुल संसाधनों की संख्या दिखती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

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

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