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

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

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 का इस्तेमाल करने का विकल्प है.

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

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

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

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

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

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

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

लाइटहाउस 6.2 में नए ऑडिट:

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

लाइटहाउस 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

सुरक्षा और आइसोलेशन के बारे में जानकारी (सीओईपी / सीओओपी)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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