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

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

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

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

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

इसके अलावा, लेआउट पैनल में एक Flexbox सेक्शन होता है, जो करें. हर एलिमेंट के ओवरले को टॉगल किया जा सकता है.

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

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

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

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

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

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

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

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

'समस्याएं' टैब के अपडेट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

सीएसएस की कलर-गामट मीडिया सुविधा को एम्युलेट करें

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

Command मेन्यू खोलें, रेंडरिंग दिखाएं कमांड चलाएं, और फिर Emulate CSS को सेट करें मीडिया सुविधा का रंग-गामट ड्रॉपडाउन.

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

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

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

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

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

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

कम कंट्रास्ट वाली समस्याओं वाला पेज खोलें (उदाहरण के लिए, यह demo). इसके बाद, समस्याएं टैब समस्याओं को देखने के लिए, कंसोल के स्टेटस बार में समस्याओं की संख्या बटन पर क्लिक करें.

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

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

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

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

प्रयोग चालू करने के बाद, एलिमेंट पैनल में एक नया बटन दिखेगा. स्विच करने के लिए क्लिक करें मौजूदा DOM ट्री और पूरी सुलभता ट्री के बीच में.

कृपया ध्यान दें कि यह एक्सपेरिमेंट के शुरुआती चरण में है. हम इसमें सुधार करने के साथ-साथ, इसमें अन्य सुविधाएं देने के लिए काम कर रहे हैं समय के साथ.

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

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

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

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

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

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

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

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