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

न्यू मीडिया पैनल

DevTools अब मीडिया पैनल में मीडिया प्लेयर की जानकारी दिखाता है.

DevTools में नया मीडिया पैनल आने से पहले, वीडियो प्लेयर के बारे में लॉगिंग और डीबग करने की जानकारी chrome://media-internals में मिलती थी.

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

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

तत्व पैनल के संदर्भ मेन्यू के ज़रिए नोड के स्क्रीनशॉट कैप्चर करना

अब Elements पैनल में मौजूद कॉन्टेक्स्ट मेन्यू की मदद से, नोड के स्क्रीनशॉट कैप्चर किए जा सकते हैं.

उदाहरण के लिए, कॉन्टेंट की टेबल का स्क्रीनशॉट लेने के लिए, एलिमेंट पर राइट क्लिक करें. इसके बाद, नोड का स्क्रीनशॉट कैप्चर करें को चुनें.

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

'समस्याएं' टैब से जुड़े अपडेट

कंसोल पैनल पर मौजूद, समस्याओं की चेतावनी वाले बार को अब सामान्य मैसेज से बदल दिया गया है.

तीसरे पक्ष की कुकी से जुड़ी समस्याओं को अब 'समस्याएं' टैब में डिफ़ॉल्ट रूप से छिपा दिया जाता है. इन्हें देखने के लिए, तीसरे पक्ष की कुकी की समस्याएं शामिल करें चेकबॉक्स को चुनें.

Chromium से जुड़ी समस्याएं: 1096481, 1068116, 1080589

स्थानीय फ़ॉन्ट मौजूद न होने की स्थिति को एम्युलेट करना

रेंडरिंग टैब खोलें और स्थानीय फ़ॉन्ट बंद करें सुविधा का इस्तेमाल करें. इससे @font-face नियमों में मौजूद, local() सोर्स को बंद किया जा सकता है.

उदाहरण के लिए, जब आपके डिवाइस पर "Rubik" फ़ॉन्ट इंस्टॉल होता है और @font-face src नियम इसे local() फ़ॉन्ट के तौर पर इस्तेमाल करता है, तो Chrome आपके डिवाइस से लोकल फ़ॉन्ट फ़ाइल का इस्तेमाल करता है.

स्थानीय फ़ॉन्ट बंद करें विकल्प चालू होने पर, DevTools local() फ़ॉन्ट को अनदेखा करता है और उन्हें नेटवर्क से फ़ेच करता है.

अक्सर, डेवलपर और डिज़ाइनर डेवलपमेंट के दौरान एक ही फ़ॉन्ट की दो अलग-अलग कॉपी इस्तेमाल करते हैं:

• आपके डिज़ाइन टूल के लिए स्थानीय फ़ॉन्ट, और
• आपके कोड के लिए वेब फ़ॉन्ट

लोकल फ़ॉन्ट बंद करने से, आपको ये काम करने में आसानी होती है:

• यह कुकी, वेब फ़ॉन्ट लोड करने की परफ़ॉर्मेंस और ऑप्टिमाइज़ेशन को डीबग और मेज़र करती है
• सीएसएस @font-face नियमों के सही होने की पुष्टि करना
• वेब फ़ॉन्ट और उनके स्थानीय वर्शन के बीच के अंतरों का पता लगाना

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

इनऐक्टिव उपयोगकर्ताओं की तरह व्यवहार करना

Idle Detection API की मदद से, डेवलपर उन उपयोगकर्ताओं का पता लगा सकते हैं जो कुछ समय से ऐक्टिव नहीं हैं. साथ ही, वे ऐक्टिव न होने की स्थिति में होने वाले बदलावों पर प्रतिक्रिया दे सकते हैं. अब DevTools का इस्तेमाल करके, Sensors टैब में उपयोगकर्ता और स्क्रीन, दोनों के लिए आइडल स्टेट में होने वाले बदलावों को सिम्युलेट किया जा सकता है. इसके लिए, आपको आइडल स्टेट के बदलने का इंतज़ार नहीं करना होगा. ड्रॉवर से, सेंसर टैब खोला जा सकता है.

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

prefers-reduced-data को एम्युलेट करें

prefers-reduced-data मीडिया क्वेरी से यह पता चलता है कि क्या उपयोगकर्ता को ऐसा कॉन्टेंट दिखाना है जिसमें पेज को रेंडर करने के लिए कम डेटा का इस्तेमाल किया जाता है.

अब DevTools का इस्तेमाल करके, prefers-reduced-data मीडिया क्वेरी का सिम्युलेशन किया जा सकता है.

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

JavaScript की नई सुविधाओं के लिए सहायता

DevTools अब JavaScript की कुछ नई सुविधाओं के साथ बेहतर तरीके से काम करता है:

• लॉजिकल असाइनमेंट ऑपरेटर - DevTools अब कंसोल और सोर्स पैनल में, नए ऑपरेटर &&=, ||=, और ??= के साथ लॉजिकल असाइनमेंट की सुविधा देता है.
• संख्याओं को अलग करने वाले वर्णों को बेहतर तरीके से प्रिंट करना - DevTools अब Sources पैनल में, संख्याओं को अलग करने वाले वर्णों को बेहतर तरीके से प्रिंट करता है.

Chromium से जुड़ी समस्याएं: 1086817, 1080569

Lighthouse पैनल में Lighthouse 6.2

Lighthouse पैनल अब Lighthouse 6.2 पर चल रहा है. बदलावों की पूरी सूची देखने के लिए, रिलीज़ नोट देखें.

Lighthouse 6.2 में नई ऑडिट:

• मुख्य थ्रेड के लंबे टास्क से बचें. यह मुख्य थ्रेड पर सबसे लंबे टास्क की रिपोर्ट करता है. इससे इनपुट डिले में, सबसे खराब योगदान देने वालों की पहचान करने में मदद मिलती है.
• लिंक क्रॉल किए जा सकते हैं. देखें कि ऐंकर एलिमेंट का href एट्रिब्यूट किसी सही डेस्टिनेशन से लिंक हो, ताकि लिंक खोजे जा सकें.
• ऐसे इमेज एलिमेंट जिनका साइज़ सेट नहीं किया गया है - देखें कि इमेज एलिमेंट पर, width और height की जानकारी साफ़ तौर पर दी गई है या नहीं. इमेज का साइज़ साफ़ तौर पर बताने से, लेआउट शिफ़्ट कम हो सकते हैं और सीएलएस को बेहतर बनाया जा सकता है.
• कंपोज़िट नहीं किए गए ऐनिमेशन से बचें. यह रिपोर्ट, कंपोज़िट नहीं किए गए ऐनिमेशन के बारे में बताती है. ये ऐनिमेशन खराब दिखते हैं और इनसे सीएलएस कम होता है.
• unload इवेंट के लिए सुनता है. यह कुकी, unload इवेंट की रिपोर्ट करती है. unload इवेंट भरोसेमंद तरीके से ट्रिगर नहीं होता है. इसलिए, इसके बजाय pagehide या visibilitychange इवेंट इस्तेमाल करें.

Lighthouse 6.2 में अपडेट किए गए ऑडिट:

• इस्तेमाल नहीं किए गए JavaScript को हटाएं. अगर किसी पेज पर सार्वजनिक तौर पर ऐक्सेस किए जा सकने वाले JavaScript सोर्स मैप मौजूद हैं, तो Lighthouse अब ऑडिट को बेहतर बनाएगा.

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

सर्विस वर्कर पैनल में "अन्य ऑरिजिन" की सूची को बंद किया जा रहा है

DevTools अब नए ब्राउज़र टैब में, अन्य ऑरिजिन के सर्विस वर्कर की पूरी सूची देखने के लिए एक लिंक उपलब्ध कराता है - chrome://serviceworker-internals/?devtools.

इससे पहले, DevTools में ऐप्लिकेशन पैनल > सर्विस वर्कर पेन में नेस्ट की गई सूची दिखती थी.

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

फ़िल्टर किए गए आइटम के लिए कवरेज की खास जानकारी दिखाएं

DevTools अब कवरेज टैब में फ़िल्टर लागू होने पर, कवरेज की जानकारी को डाइनैमिक तौर पर फिर से कैलकुलेट करता है और उसकी खास जानकारी दिखाता है. पहले, कवरेज टैब में हमेशा कवरेज से जुड़ी सभी जानकारी की खास जानकारी दिखती थी.

नीचे दिए गए उदाहरण में देखें कि सीएसएस फ़िल्टर लागू करने से पहले, जवाब में 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. लिखा है. इसके बाद, सीएसएस फ़िल्टर लागू करने के बाद, जवाब में 57 kB of 604 kB (10%) used so far. 546 kB unused. लिखा है.

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

ऐप्लिकेशन पैनल में फ़्रेम की जानकारी देखने की नई सुविधा

DevTools अब हर फ़्रेम के लिए ज़्यादा जानकारी वाला व्यू दिखाता है. इसे ऐक्सेस करने के लिए, ऐप्लिकेशन पैनल में मौजूद फ़्रेम मेन्यू में जाकर किसी फ़्रेम पर क्लिक करें.

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

खुली हुई विंडो के लिए फ़्रेम की जानकारी

DevTools अब फ़्रेम ट्री में खुली हुई विंडो / पॉप-अप भी दिखाता है. खुली हुई विंडो की फ़्रेम की जानकारी वाली व्यू में, सुरक्षा से जुड़ी ज़्यादा जानकारी शामिल होती है.

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

सुरक्षा और आइसोलेशन से जुड़ी जानकारी (COEP / COOP)

DevTools अब फ़्रेम की जानकारी में, सुरक्षित कॉन्टेक्स्ट, Cross-Origin-Embedder-Policy (COEP) और Cross-Origin-Opener-Policy (COOP) दिखाता है.

फ़्रेम की जानकारी देखने की सुविधा में, सुरक्षा से जुड़ी ज़्यादा जानकारी जल्द ही जोड़ी जाएगी.

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

नेटवर्क पैनल और एलिमेंट से जुड़े अपडेट

स्टाइल पैनल में रंग के सुझावों को ऐक्सेस किया जा सकता है

DevTools अब कम कंट्रास्ट वाले टेक्स्ट के लिए, रंग के सुझाव देता है.

नीचे दिए गए उदाहरण में, h1 में कम कंट्रास्ट वाला टेक्स्ट है. इसे ठीक करने के लिए, स्टाइल पैनल में मौजूद color प्रॉपर्टी का कलर पिकर खोलें. कंट्रास्ट अनुपात सेक्शन को बड़ा करने के बाद, DevTools, AA और AAA के लिए रंग के सुझाव देता है. रंग लागू करने के लिए, सुझाए गए रंग पर क्लिक करें.

Chromium की समस्या: 1093227

एलिमेंट पैनल में प्रॉपर्टी पैन को फिर से दिखाएं

प्रॉपर्टी पैनल वापस आ गया है. इसे Chrome 84 में बंद कर दिया गया था. DevTools के आने वाले वर्शन में, हम एलिमेंट की प्रॉपर्टी की जांच करने के वर्कफ़्लो को बेहतर बनाने जा रहे हैं.

Chromium से जुड़ी समस्या: 1105205, 1116085

नेटवर्क पैनल में, X-Client-Data हेडर की ऐसी वैल्यू जिन्हें कोई भी व्यक्ति आसानी से पढ़ सकता है

नेटवर्क पैनल में किसी नेटवर्क संसाधन की जांच करते समय, DevTools अब हेडर पैनल में मौजूद किसी भी X-Client-Data हेडर वैल्यू को कोड के तौर पर फ़ॉर्मैट करता है.

X-Client-Data एचटीटीपी हेडर में, एक्सपेरिमेंट आईडी और Chrome फ़्लैग की सूची होती है. ये फ़्लैग आपके ब्राउज़र में चालू होते हैं. हेडर की रॉ वैल्यू, अपारदर्शी स्ट्रिंग की तरह दिखती हैं. ऐसा इसलिए, क्योंकि इन्हें base-64-encoded किया गया है. साथ ही, ये प्रोटोकॉल बफ़र के तौर पर क्रम से लगाई गई हैं. डेवलपर के लिए कॉन्टेंट को ज़्यादा पारदर्शी बनाने के लिए, DevTools अब डिकोड की गई वैल्यू दिखा रहा है.

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

स्टाइल पैनल में कस्टम फ़ॉन्ट अपने-आप पूरा होने की सुविधा

इंपोर्ट किए गए फ़ॉन्ट फ़ेस अब सीएसएस के अपने-आप पूरे होने वाली सूची में जोड़ दिए गए हैं. ऐसा स्टाइल पैनल में font-family प्रॉपर्टी में बदलाव करते समय होता है.

इस उदाहरण में, 'Noto Sans' एक कस्टम फ़ॉन्ट है, जिसे लोकल मशीन में इंस्टॉल किया गया है. यह सीएसएस की सूची में दिखता है. हालांकि, पहले ऐसा नहीं था.

Chromium की समस्या: 1106221

नेटवर्क पैनल में संसाधन का टाइप लगातार दिखता है

DevTools अब ओरिजनल नेटवर्क अनुरोध के तौर पर एक ही तरह का संसाधन दिखाता है. साथ ही, रीडायरेक्ट (स्टेटस 302) होने पर, टाइप कॉलम की वैल्यू में / Redirect जोड़ता है.

इससे पहले, DevTools कभी-कभी टाइप को Other में बदल देता था.

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

एलिमेंट और नेटवर्क पैनल में मौजूद 'मिटाएं' बटन

स्टाइल पैन और नेटवर्क पैनल में मौजूद फ़िल्टर टेक्स्ट बॉक्स के साथ-साथ, एलिमेंट पैनल में मौजूद डीओएम सर्च टेक्स्ट बॉक्स में अब मिटाएं बटन मौजूद हैं. मिटाएं पर क्लिक करने से, डाला गया टेक्स्ट हट जाता है.

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

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

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

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

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

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

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

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