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

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

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

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

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

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

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

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

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

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

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

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

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

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

'समस्याएं' टैब से जुड़े अपडेट

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

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

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

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

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

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

Chromium की समस्या: 1147479

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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