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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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