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

Jecelyn Yeen

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

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

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

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

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

Lighthouse पैनल में Lighthouse 6

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

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

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

Lighthouse 6.0 में परफ़ॉर्मेंस की नई मेट्रिक

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 प्रॉमिस के सेटल होने तक चलता है.

सर्विस वर्कर `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 कोड कैश मेमोरी में सेव होने से जुड़ी कोई भी जानकारी नहीं दिखाता था.

JavaScript कंपाइलेशन कैश मेमोरी की जानकारी

Chromium की समस्या #912581

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

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

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

Chromium की समस्या #974550

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

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

ब्रेकपॉइंट

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

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

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

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

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

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

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