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

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

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

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

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

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

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

Chromium की गड़बड़ी: #1040025

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

फ़ुटर में Total Blocking Time (TBT) की जानकारी देखें

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

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

Chromium की गड़बड़ी: #1054381

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

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

Elements पैनल में Properties पेन का इस्तेमाल अब नहीं किया जा सकेगा

Elements पैनल में मौजूद Properties पैन अब काम नहीं करता है. इसके बजाय, Console में console.dir($0) चलाएं.

रेफ़रंस:

• console.dir()
• $0

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

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

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

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

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

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

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

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

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

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