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) खोलने के लिए Command मेन्यू साइट डेटा मिटाएं कमांड देकर, पेज से जुड़ा पूरा डेटा मिटाएं. इसमें ये शामिल हैं: सर्विस वर्कर, localStorage, sessionStorage, IndexedDB, वेब SQL, कुकी, कैश, और ऐप्लिकेशन कैश.

तीसरी इमेज. साइट डेटा मिटाएं निर्देश.

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

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

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

Chromium से जुड़ी यह समस्या है: #942503

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

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

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

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

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

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

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

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

Chromium से जुड़ी यह समस्या है: #805429

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

मान लें कि कोड की यहां दी गई लाइन में, कोड ऑफ़ कोड ब्रेकपॉइंट जोड़ा जाता है:

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

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

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

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

Chromium से जुड़ी यह समस्या है: #927961

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

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

आकृति 10. IndexedDB डेटाबेस में कुल एंट्री.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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