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

Kayce Basques

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

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

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

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

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

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

Chromium बग: #1040025

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

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

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

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

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

नए एक्सपीरियंस सेक्शन में, इवेंट के लेआउट शिफ़्ट होने की सुविधा

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

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

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

Promise को लॉग करते समय, कंसोल का इस्तेमाल करके, Promise की स्थिति के बारे में इस तरह से गलत जानकारी दी जाती है: resolved:

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

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

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

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

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

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