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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

लाइटहाउस 6.0 में नई परफ़ॉर्मेंस मेट्रिक

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'समय' टैब में सर्विस वर्कर respondWith इवेंट में है

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

सर्विस वर्कर `responseWith`

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

कंप्यूटेड पैनल का लगातार डिसप्ले

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

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

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

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

बाइटकोड ऑफ़सेट

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

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

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

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

कंसोल सेटिंग से जुड़े अपडेट

एक जैसे कंसोल मैसेज को ग्रुप से अलग करें

कंसोल सेटिंग में मिलते-जुलते ग्रुप टॉगल अब डुप्लीकेट मैसेज पर लागू होता है. पहले यह अभी-अभी मिलते-जुलते मैसेज पर लागू किया गया है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ब्रेकपॉइंट, कंडिशनल ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

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

ब्रेकपॉइंट

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

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

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

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

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

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

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

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