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

Jecelyn Yeen

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

स्टाइल पैनल में अब सीएसएस ऑब्जेक्ट मॉडल (सीएसएसओएम) एपीआई की मदद से बनाई गई स्टाइल में बेहतर तरीके से बदलाव किया जा सकता है. कई CSS-in-JS फ़्रेमवर्क और लाइब्रेरी, स्टाइल बनाने के लिए CSSOM API का इस्तेमाल करती हैं.

अब JavaScript में जोड़े गए स्टाइल में भी बदलाव किया जा सकता है. इसके लिए, Constructable Stylesheets का इस्तेमाल करें. कंस्ट्रक्टेबल स्टाइलशीट, शैडो डीओएम का इस्तेमाल करते समय, बार-बार इस्तेमाल की जा सकने वाली स्टाइल बनाने और उन्हें डिस्ट्रिब्यूट करने का नया तरीका है.

उदाहरण के लिए, h1 (सीएसएसओएम एपीआई) की मदद से जोड़ी गई h1 स्टाइल में पहले बदलाव नहीं किया जा सकता था.CSSStyleSheet अब स्टाइल पैनल में इन स्टाइल में बदलाव किया जा सकता है:

Chromium की समस्या #946975

लाइटहाउस पैनल में मौजूद Lighthouse 6

Lighthouse पैनल अब Lighthouse 6 का इस्तेमाल कर रहा है. सभी मुख्य बदलावों की खास जानकारी के लिए, Lighthouse 6.0 में नया क्या है लेख पढ़ें. इसके अलावा, सभी बदलावों की पूरी सूची के लिए, v6.0.0 के रिलीज़ नोट पढ़ें.

Lighthouse 6.0 में, रिपोर्ट के लिए तीन नई मेट्रिक जोड़ी गई हैं: सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी), लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस), और कुल ब्लॉकिंग टाइम (टीबीटी). एलसीपी और सीएलएस, Google की नई वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की दो मेट्रिक हैं. साथ ही, टीबीटी, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की एक और मेट्रिक, यानी कि पहले इनपुट में देरी के लिए लैब मेज़रमेंट प्रॉक्सी है.

परफ़ॉर्मेंस स्कोर के फ़ॉर्मूले को भी फिर से वेट किया गया है, ताकि उपयोगकर्ताओं को पेज लोड होने का बेहतर अनुभव मिल सके.

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

फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) मेट्रिक का इस्तेमाल बंद होना

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

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

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

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

• ऑप्शनल चेनिंग सिंटैक्स अपने-आप पूरा होने की सुविधा - Console में प्रॉपर्टी अपने-आप पूरी होने की सुविधा अब ऑप्शनल चेनिंग सिंटैक्स के साथ काम करती है. उदाहरण के लिए, name. और name[ के साथ-साथ अब name?. भी काम करता है.
• निजी फ़ील्ड के लिए सिंटैक्स हाइलाइट करने की सुविधा - निजी क्लास फ़ील्ड को अब सोर्स पैनल में सही तरीके से सिंटैक्स-हाइलाइट किया जाता है और सुंदर तरीके से प्रिंट किया जाता है.
• Nullish coalescing operator के लिए सिंटैक्स हाइलाइटिंग - DevTools अब Sources पैनल में nullish coalescing operator को सही तरीके से प्रिंट करता है.

Chromium से जुड़ी समस्याएं #1083214, #1073903, #1083797

Manifest पैनल में ऐप्लिकेशन के शॉर्टकट से जुड़ी नई चेतावनियां

ऐप्लिकेशन के शॉर्टकट की मदद से, उपयोगकर्ता वेब ऐप्लिकेशन में सामान्य या सुझाए गए टास्क को तुरंत शुरू कर सकते हैं.

मेनिफ़ेस्ट पैनल में अब ये चेतावनियां दिखती हैं:

• ऐप्लिकेशन के शॉर्टकट आइकॉन 96x96 पिक्सल से छोटे हों
• ऐप्लिकेशन के शॉर्टकट आइकॉन और मेनिफ़ेस्ट आइकॉन स्क्वेयर नहीं हैं, क्योंकि इन्हें अनदेखा कर दिया जाएगा

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

टाइमिंग टैब में सर्विस वर्कर respondWith इवेंट

नेटवर्क पैनल के टाइमिंग टैब में अब सर्विस वर्कर respondWith इवेंट शामिल हैं. respondWith वह समय होता है जो सर्विस वर्कर के fetch इवेंट हैंडलर के चलने से ठीक पहले शुरू होता है और fetch हैंडलर के respondWith प्रॉमिस के सेटल होने पर खत्म होता है.

Chromium की समस्या #1066579

कंप्यूटेड पैन को लगातार दिखाया जाता है

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

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

WebAssembly फ़ाइलों के लिए बाइटकोड ऑफ़सेट

DevTools अब Wasm डिसअसेंबली की लाइनें दिखाने के लिए, बाइटकोड ऑफ़सेट का इस्तेमाल करता है. इससे यह साफ़ तौर पर पता चलता है कि बाइनरी डेटा देखा जा रहा है. साथ ही, यह Wasm रनटाइम के लोकेशन रेफ़रंस करने के तरीके के साथ ज़्यादा मेल खाता है.

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

सोर्स पैनल में लाइन के हिसाब से कॉपी और कट करने की सुविधा

सोर्स पैनल एडिटर में कुछ भी चुने बिना कॉपी या कट करने पर, DevTools मौजूदा लाइन के कॉन्टेंट को कॉपी या कट करेगा. उदाहरण के लिए, नीचे दिए गए वीडियो में कर्सर, पहली लाइन के आखिर में है. कट करने के लिए कीबोर्ड शॉर्टकट दबाने के बाद, पूरी लाइन को क्लिपबोर्ड पर कॉपी कर दिया जाता है और उसे मिटा दिया जाता है.

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

Console की सेटिंग से जुड़े अपडेट

कंसोल में एक जैसे मैसेज का ग्रुप न बनाएं

कंसोल की सेटिंग में मौजूद, मिलते-जुलते मैसेज ग्रुप करें टॉगल अब डुप्लीकेट मैसेज पर लागू होता है. पहले यह सुविधा, सिर्फ़ मिलते-जुलते मैसेज पर लागू होती थी.

उदाहरण के लिए, पहले DevTools, मैसेज को अनग्रुप नहीं करता था hello, भले ही मिलते-जुलते मैसेज ग्रुप करें विकल्प चुना गया हो. अब hello मैसेज को अनग्रुप कर दिया गया है:

Chromium की समस्या #1082963

सिर्फ़ चुना गया कॉन्टेक्स्ट सेटिंग को सेव करना

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

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

परफ़ॉर्मेंस पैनल से जुड़े अपडेट

परफ़ॉर्मेंस पैनल में JavaScript कंपाइलेशन कैश मेमोरी की जानकारी

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

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

परफ़ॉर्मेंस पैनल में नेविगेशन टाइमिंग अलाइनमेंट

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

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

Chromium की समस्या #974550

ब्रेकपॉइंट, स्थिति के हिसाब से ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

सोर्स पैनल में, ब्रेकपॉइंट, कंडिशनल ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए डिज़ाइन उपलब्ध हैं. ब्रेकपॉइंट के फ़्लैग के डिज़ाइन को नए सिरे से बनाया गया है. इसमें ज़्यादा चमकदार और आकर्षक रंगों का इस्तेमाल किया गया है. शर्त के हिसाब से ब्रेकपॉइंट और लॉगपॉइंट के बीच अंतर करने के लिए, आइकॉन जोड़े जाते हैं.

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

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

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

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

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

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

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

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