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

Jecelyn Yeen

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

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

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

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

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

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

एलिमेंट पैनल के कॉन्टेक्स्ट मेन्यू की मदद से, नोड के स्क्रीनशॉट लेना

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

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

नोड के स्क्रीनशॉट लेना

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

समस्याओं वाले टैब के अपडेट

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

कंसोल मैसेज में समस्याएं

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

तीसरे पक्ष की कुकी से जुड़ी समस्याओं का चेकबॉक्स

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

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

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

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

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

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

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

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

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

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

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

इनऐक्टिव उपयोगकर्ताओं को एमुलेट करना

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

इनऐक्टिव उपयोगकर्ताओं को एमुलेट करना

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

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

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

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

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

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

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

DevTools में अब JavaScript भाषा की कुछ नई सुविधाओं के लिए बेहतर सहायता उपलब्ध है:

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

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

लाइटहाउस पैनल में Lighthouse 6.2

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

इमेज का साइज़ वापस लाना

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

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

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

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

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 अब फ़्रेम की जानकारी में, सुरक्षित कॉन्टेक्स्ट, क्रॉस-ओरिजिन-एम्बेडर-पॉलिसी (COEP) और क्रॉस-ओरिजिन-ओपनर-पॉलिसी (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 फ़्लैग की सूची होती है. ये फ़्लैग आपके ब्राउज़र में चालू होते हैं. रॉ हेडर वैल्यू, अस्पष्ट स्ट्रिंग की तरह दिखती हैं, क्योंकि ये base64 कोड में बदले गए, क्रम से लगाए गए प्रोटोकॉल बफ़र हैं. डेवलपर के लिए कॉन्टेंट को ज़्यादा पारदर्शी बनाने के लिए, DevTools अब डिकोड की गई वैल्यू दिखा रहा है.

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

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

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

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

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

पसंद के मुताबिक फ़ॉन्ट के लिए ऑटोकंप्लीट की सुविधा

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

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

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

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

रीडायरेक्ट रिसॉर्स का टाइप दिखाएं

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

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

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

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

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

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

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

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

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

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

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