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

सीएसएस फ़्लेक्सबॉक्स को डीबग करने वाले नए टूल

DevTools में अब सीएसएस फ़्लेक्सबॉक्स डीबगिंग टूल उपलब्ध हैं!

जब आपके पेज पर किसी एचटीएमएल एलिमेंट पर display: flex या display: inline-flex लागू होता है, तो आपको एलिमेंट पैनल में उसके बगल में flex बैज दिख सकता है. पेज पर फ़्लेक्स ओवरले के डिसप्ले को टॉगल करने के लिए, बैज पर क्लिक करें.

स्टाइल पैनल में, Flexbox एडिटर खोलने के लिए, display: flex या display: inline-flex के बगल में मौजूद नए आइकॉन पर क्लिक करें. फ़्लेक्सबॉक्स एडिटर की मदद से, फ़्लेक्सबॉक्स प्रॉपर्टी में तुरंत बदलाव किया जा सकता है. खुद आज़माकर देखें!

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

Chromium से जुड़ी समस्याएं: 1166710, 1175699

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का नया ओवरले

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाले नए ओवरले की मदद से, अपने पेज की परफ़ॉर्मेंस को बेहतर तरीके से विज़ुअलाइज़ और मेज़र करें.

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

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

फ़िलहाल, ओवरले में यह जानकारी दिखती है:

• सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी): इससे पेज लोड होने में लगने वाले समय का पता चलता है. उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, ज़रूरी है कि पेज लोड होने के 2.5 सेकंड के अंदर एलसीपी हो जाए.
• पेज पर मौजूद लिंक को क्लिक करके उस पर पहुंचने वाला समय (एफ़आईडी): इससे इंटरैक्टिविटी का पता चलता है. उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, पेजों का एफ़आईडी 100 मिलीसेकंड से कम होना चाहिए.
• कुल लेआउट शिफ़्ट (सीएलएस): इससे पता चलता है कि पेज लोड होते समय उसका लेआउट कितनी बार बदलता है. उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, पेजों का सीएलएस 0.1 से कम होना चाहिए.

Chromium से जुड़ी समस्या: 1152089

समस्याओं वाले टैब के अपडेट

समस्याओं की संख्या को कंसोल के स्टेटस बार में ले जाया गया

समस्याओं की चेतावनियों को बेहतर तरीके से दिखाने के लिए, अब कंसोल के स्टेटस बार में समस्याओं की संख्या वाला नया बटन जोड़ा गया है. इससे, Console में समस्या के मैसेज की जगह यह मैसेज दिखेगा.

Chromium से जुड़ी समस्या: 1140516

भरोसेमंद वेब गतिविधि से जुड़ी समस्याओं की शिकायत करना

समस्याओं वाले टैब में अब भरोसेमंद वेब गतिविधि से जुड़ी समस्याओं की जानकारी मिलती है. इसका मकसद, डेवलपर को अपनी साइटों की 'भरोसेमंद वेब गतिविधि' से जुड़ी समस्याओं को समझने और उन्हें ठीक करने में मदद करना है. इससे, उनके ऐप्लिकेशन की क्वालिटी बेहतर होगी.

भरोसेमंद वेब गतिविधि खोलें. इसके बाद, समस्याएं देखने के लिए, कंसोल के स्टेटस बार में समस्याओं की संख्या button पर क्लिक करके, समस्याएं टैब खोलें. भरोसेमंद वेब गतिविधि बनाने और उसे डिप्लॉय करने के तरीके के बारे में ज़्यादा जानने के लिए, ऐंड्री की यह बातचीत देखें.

Chromium से जुड़ी समस्या: 1147479

कंसोल में स्ट्रिंग को (मान्य) JavaScript स्ट्रिंग लिटरल के तौर पर फ़ॉर्मैट करना

अब Console, स्ट्रिंग को Console में मान्य JavaScript स्ट्रिंग लिटरल के तौर पर फ़ॉर्मैट करता है. पहले, Console में स्ट्रिंग प्रिंट करते समय, डबल कोट को एस्केप नहीं किया जाता था.

Chromium से जुड़ी समस्या: 1178530

ऐप्लिकेशन पैनल में नया ट्रस्ट टोकन पैनल

DevTools अब ऐप्लिकेशन पैनल में, नए ट्रस्ट टोकन पैनल में मौजूदा ब्राउज़िंग कॉन्टेक्स्ट में सभी उपलब्ध ट्रस्ट टोकन दिखाता है.

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

Chromium से जुड़ी समस्या: 1126824

सीएसएस की color-gamut मीडिया फ़ीचर को एम्युलेट करना

color-gamut मीडिया क्वेरी की मदद से, ब्राउज़र और आउटपुट डिवाइस पर काम करने वाले रंगों की अनुमानित रेंज की जांच की जा सकती है. उदाहरण के लिए, अगर color-gamut: p3 मीडिया क्वेरी मैच करती है, तो इसका मतलब है कि उपयोगकर्ता का डिवाइस, Display-P3 कलरस्पेस के साथ काम करता है.

कमांड मेन्यू खोलें और रेंडरिंग दिखाएं कमांड चलाएं. इसके बाद, सीएसएस मीडिया फ़ीचर के रंग-गमट को एम्युलेट करें ड्रॉपडाउन सेट करें.

Chromium से जुड़ी समस्या: 1073887

प्रोग्रेसिव वेब ऐप्लिकेशन टूल की बेहतर सुविधाएं

DevTools अब कंसोल में, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) को इंस्टॉल करने से जुड़ी चेतावनी का ज़्यादा जानकारी वाला मैसेज दिखाता है. साथ ही, उसमें दस्तावेज़ का लिंक भी होता है.

अगर मेनिफ़ेस्ट के ब्यौरे में 324 से ज़्यादा वर्ण हैं, तो मेनिफ़ेस्ट पैनल में चेतावनी वाला मैसेज दिखता है.

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

Chromium से जुड़ी समस्या: 1146450, 1169689, 965802

नेटवर्क पैनल में नया Remote Address Space कॉलम

हर नेटवर्क रिसॉर्स का नेटवर्क आईपी पता स्पेस देखने के लिए, नेटवर्क पैनल में नए Remote Address Space कॉलम का इस्तेमाल करें.

Chromium से जुड़ी समस्या: 1128885

परफ़ॉर्मेंस में सुधार करना

DevTools के खुले होने पर, पेज लोड होने की परफ़ॉर्मेंस अब बेहतर हो गई है. कुछ मामलों में, हमें परफ़ॉर्मेंस में 10 गुना का सुधार देखने को मिला.

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

इस सुविधा को लागू करने के बारे में ज़्यादा जानकारी के लिए, इंजीनियरिंग ब्लॉग पोस्ट पर बने रहें.

Chromium से जुड़ी समस्याएं: 1069425, 1077657

फ़्रेम की जानकारी वाले व्यू में, इस्तेमाल की अनुमति वाली/अनुमति नहीं वाली सुविधाएं दिखाना

फ़्रेम की जानकारी वाले व्यू में, अब अनुमतियों की नीति के हिसाब से, ब्राउज़र की अनुमति वाली और अनुमति नहीं वाली सुविधाओं की सूची दिखती है.

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

Chromium से जुड़ी समस्या: 1158827

कुकी पैनल में नया SameParty कॉलम

ऐप्लिकेशन पैनल में कुकी पैनल में, अब कुकी का SameParty एट्रिब्यूट दिखता है. SameParty एट्रिब्यूट एक नया बूलियन एट्रिब्यूट है. इससे यह पता चलता है कि किसी कुकी को, एक ही फ़र्स्ट-पार्टी सेट के ऑरिजिन के अनुरोधों में शामिल किया जाना चाहिए या नहीं.

Chromium से जुड़ी समस्या: 1161427

fn.displayName के लिए, अब काम न करने वाला गैर-स्टैंडर्ड वर्शन

नॉन-स्टैंडर्ड fn.displayName एट्रिब्यूट के लिए सहायता बंद कर दी गई है. इसके बजाय, fn.name का इस्तेमाल करें.

Chrome में, आम तौर पर ग़ैर-स्टैंडर्ड fn.displayName प्रॉपर्टी का इस्तेमाल किया जाता है. इससे डेवलपर, error.stack और DevTools स्टैक ट्रैस में दिखने वाले फ़ंक्शन के डीबग नामों को कंट्रोल कर सकते हैं. ऊपर दिए गए उदाहरण में, कॉल स्टैक पहले noLongerSupport दिखाता था.

fn.displayName को स्टैंडर्ड fn.name से बदलें. इसे ECMAScript 2015 में, Object.defineProperty के ज़रिए कॉन्फ़िगर किया जा सकता है. ऐसा, स्टैंडर्ड fn.displayName प्रॉपर्टी को बदलने के लिए किया गया था.

fn.displayName के लिए सहायता भरोसेमंद नहीं है और यह सभी ब्राउज़र इंजन पर एक जैसी नहीं है. इससे स्टैक ट्रेस इकट्ठा करने की प्रोसेस धीमी हो जाती है. इसकी कीमत डेवलपर को हमेशा चुकानी पड़ती है, भले ही वे fn.displayName का इस्तेमाल करते हों या नहीं.

Chromium से जुड़ी समस्या: 1177685

सेटिंग मेन्यू में Don't show Chrome Data Saver warning का इस्तेमाल बंद करना

Don't show Chrome Data Saver warning सेटिंग को हटा दिया गया है, क्योंकि Chrome के डेटा सेवर की सुविधा बंद कर दी गई है.

Chromium से जुड़ी समस्या: 1056922

प्रयोग के तौर पर शुरू की गई सुविधाएं

'समस्याएं' टैब में, कम कंट्रास्ट वाली समस्याओं की अपने-आप रिपोर्टिंग

DevTools में, समस्याओं वाले टैब में अपने-आप कंट्रास्ट से जुड़ी समस्याओं की शिकायत करने के लिए, एक्सपेरिमेंट के तौर पर सहायता जोड़ी गई है.

वेब पर सुलभता से जुड़ी सबसे आम समस्या, कम कंट्रास्ट वाला टेक्स्ट है. यह समस्या, अपने-आप पता चल जाती है. 'समस्याएं' टैब में इन समस्याओं को दिखाने से, डेवलपर को इन समस्याओं को आसानी से ढूंढने में मदद मिलती है.

कम कंट्रास्ट वाली समस्याओं वाला कोई पेज खोलें. जैसे, यह डेमो. इसके बाद, समस्याएं देखने के लिए, Console के स्टेटस बार में समस्याओं की संख्या बटन पर क्लिक करके, समस्याएं टैब खोलें.

Chromium से जुड़ी समस्या: 1155460

एलिमेंट पैनल में सुलभता ट्री का पूरा व्यू

अब किसी पेज का सुलभता ट्री व्यू, बड़ा करके देखने के लिए टॉगल किया जा सकता है.

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

एक्सपेरिमेंट चालू करने के बाद, एलिमेंट पैनल में एक नया बटन दिखेगा. मौजूदा डीओएम ट्री और पूरी तरह ऐक्सेस किए जा सकने वाले ट्री के बीच स्विच करने के लिए, उस पर क्लिक करें.

कृपया ध्यान दें कि यह शुरुआती चरण का प्रयोग है. आने वाले समय में, हम इस सुविधा को बेहतर बनाएंगे और इसे ज़्यादा लोगों तक पहुंचाएंगे.

Chromium से जुड़ी समस्या: 887173

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

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

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

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

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

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

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