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

Kayce Basques

'समस्याएं' टैब की मदद से, साइट की समस्याएं ठीक करना

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

शुरू करने के लिए, Chrome DevTools के 'समस्याएं' टैब की मदद से समस्याएं ढूंढना और उन्हें ठीक करना लेख पढ़ें.

Chromium में गड़बड़ी: #1068116

जांच मोड के टूलटिप में, सुलभता से जुड़ी जानकारी देखना

जांच मोड टूलटिप से अब यह पता चलता है कि एलिमेंट का नाम और भूमिका ऐक्सेस की जा सकती है या नहीं और उस पर कीबोर्ड से फ़ोकस किया जा सकता है या नहीं.

Chromium में गड़बड़ी: #1040025

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

फ़ुटर में टोटल ब्लॉकिंग टाइम (टीबीटी) की जानकारी देखना

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

ब्लॉक किए जाने के कुल समय की जानकारी पाने के लिए, पेज लोड होने की परफ़ॉर्मेंस रिकॉर्ड करने के लिए, पेज को फिर से लोड करें वर्कफ़्लो का इस्तेमाल न करें. इसके बजाय, रिकॉर्ड करें पर क्लिक करें. इसके बाद, पेज को मैन्युअल तरीके से फिर से लोड करें और पेज के लोड होने का इंतज़ार करें. इसके बाद, रिकॉर्डिंग बंद करें. अगर आपको Total Blocking Time: Unavailable दिखता है, तो इसका मतलब है कि DevTools को Chrome के इंटरनल प्रोफ़ाइलिंग डेटा से ज़रूरी जानकारी नहीं मिली.

Chromium में मौजूद गड़बड़ी: #1054381

नए वर्शन के सेक्शन में लेआउट शिफ़्ट इवेंट

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

खास जानकारी टैब में, लेआउट शिफ़्ट की जानकारी देखने के लिए, लेआउट शिफ़्ट इवेंट पर क्लिक करें. इससे हटाया गया और इस पर ले जाया गया फ़ील्ड पर कर्सर घुमाकर, यह देखें कि लेआउट में बदलाव कहां हुआ.

Console में, प्रॉडक्ट के बारे में किए गए वादे के लिए ज़्यादा सटीक शब्द

Promise को लॉग करते समय, Console Promise की स्थिति को resolved के तौर पर गलत तरीके से बताता था:

Console अब fulfilled शब्द का इस्तेमाल करता है, जो Promise स्पेसिफ़िकेशन के मुताबिक है:

V8 में गड़बड़ी: #6751

स्टाइल पैनल से जुड़े अपडेट

revert कीवर्ड के लिए सहायता

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

Chromium में मौजूद गड़बड़ी: #1075437

इमेज की झलक

टूलटिप में इमेज की झलक देखने के लिए, स्टाइल पैनल में background-image वैल्यू पर कर्सर घुमाएं.

Chromium में मौजूद गड़बड़ी: #1040019

कलर पिकर अब स्पेस से अलग किए गए फ़ंक्शनल कलर नोटेशन का इस्तेमाल करता है

सीएसएस कलर मॉड्यूल लेवल 4 के मुताबिक, rgb() जैसे कलर फ़ंक्शन में, स्पेस से अलग किए गए आर्ग्युमेंट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, rgb(0, 0, 0), rgb(0 0 0) के बराबर है.

कलर पिकर की मदद से रंग चुनने या स्टाइल पैनल में रंग के अलग-अलग वैरिएशन के बीच स्विच करने के लिए, Shift बटन को दबाकर कलर वैल्यू पर क्लिक करें. ऐसा करने पर, आपको स्पेस से अलग किए गए आर्ग्युमेंट सिंटैक्स दिखेंगे.

आपको सिंटैक्स, कैलकुलेट किए गए पैनल और जांच मोड टूलटिप में भी दिखेगा.

DevTools, नए सिंटैक्स का इस्तेमाल कर रहा है, क्योंकि color() जैसी सीएसएस की आने वाली सुविधाएं, कॉमा से अलग किए गए आर्ग्युमेंट सिंटैक्स के साथ काम नहीं करतीं.

स्पेस से अलग किए गए आर्ग्युमेंट सिंटैक्स का इस्तेमाल, ज़्यादातर ब्राउज़र में कुछ समय से किया जा रहा है. क्या स्पेस से अलग किए गए फ़ंक्शनल कलर नोटेशन का इस्तेमाल किया जा सकता है? देखें

Chromium में गड़बड़ी: #1072952

एलिमेंट पैनल में प्रॉपर्टी पैनल को बंद करना

एलिमेंट पैनल में मौजूद प्रॉपर्टी पैनल को बंद कर दिया गया है. इसके बजाय, कंसोल में console.dir($0) चलाएं.

रेफ़रंस:

• console.dir()
• $0

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

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

ज़्यादा जानने के लिए, ऐप्लिकेशन के शॉर्टकट की मदद से तेज़ी से काम करना लेख पढ़ें.

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

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

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

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

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

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

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