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

सीएसएस ग्रिड एडिटर

इस सुविधा के लिए बहुत अनुरोध मिले थे. अब नए CSS Grid एडिटर की मदद से, CSS Grid की झलक देखी जा सकती है और उसे बनाया जा सकता है!

जब आपके पेज पर किसी एचटीएमएल एलिमेंट पर display: grid या display: inline-grid लागू होता है, तो आपको स्टाइल पैनल में उसके बगल में एक आइकॉन दिख सकता है. सीएसएस ग्रिड एडिटर को टॉगल करने के लिए, आइकॉन पर क्लिक करें. यहां स्क्रीन पर मौजूद आइकॉन (उदाहरण के लिए, justify-content: space-around) की मदद से, संभावित बदलावों की झलक देखी जा सकती है. साथ ही, सिर्फ़ एक क्लिक से ग्रिड के दिखने का तरीका बदला जा सकता है.

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

Console में const को फिर से एलान करने की सुविधा

Console में अब let और class के मौजूदा रीडक्लेरेशन के अलावा, const स्टेटमेंट को फिर से एलान करने की सुविधा भी उपलब्ध है. नए JavaScript कोड के साथ प्रयोग करने के लिए, Console का इस्तेमाल करने वाले वेब डेवलपर के लिए, फिर से एलान न कर पाना एक आम समस्या थी.

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

नीचे दिया गया उदाहरण देखें. const को फिर से घोषित करने की सुविधा, अलग-अलग REPL स्क्रिप्ट में काम करती है (वैरिएबल a देखें). ध्यान दें कि डिज़ाइन के हिसाब से, इन स्थितियों में यह सुविधा काम नहीं करती:

• const REPL स्क्रिप्ट में, पेज स्क्रिप्ट को फिर से घोषित करने की अनुमति नहीं है
• const एक ही आरईपीएल स्क्रिप्ट में, वैरिएबल को फिर से घोषित करने की अनुमति नहीं है (वैरिएबल b देखें)

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

सोर्स ऑर्डर व्यूअर

अब स्क्रीन पर सोर्स एलिमेंट का क्रम देखा जा सकता है, ताकि सुलभता की जांच बेहतर तरीके से की जा सके.

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

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

फ़्रेम की जानकारी देखने के लिए नया शॉर्टकट

एलिमेंट पैनल में iframe एलिमेंट पर दायां क्लिक करके, iframe की जानकारी देखें. इसके बाद, फ़्रेम की जानकारी दिखाएं को चुनें.

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

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

सीओआरएस डीबग करने की सुविधा को बेहतर बनाया गया

क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) से जुड़ी गड़बड़ियां, अब 'समस्याएं' टैब में दिखती हैं. CORS से जुड़ी गड़बड़ियां होने की कई वजहें हो सकती हैं. हर समस्या को बड़ा करके देखने के लिए क्लिक करें. इससे, आपको समस्या की संभावित वजहें और उन्हें ठीक करने के तरीके समझने में मदद मिलेगी.

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

नेटवर्क पैनल से जुड़े अपडेट

XHR लेबल का नाम बदलकर फ़ेच/XHR करें

XHR लेबल का नाम अब फ़ेच/XHR कर दिया गया है. इस बदलाव से यह साफ़ तौर पर पता चलता है कि इस फ़िल्टर में XMLHttpRequest और Fetch API, दोनों नेटवर्क अनुरोध शामिल हैं.

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

नेटवर्क पैनल में, Wasm रिसॉर्स टाइप को फ़िल्टर करना

अब Wasm नेटवर्क अनुरोधों को फ़िल्टर करने के लिए, नए Wasm बटन पर क्लिक किया जा सकता है.

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

'नेटवर्क की स्थितियां' टैब में, डिवाइसों के लिए यूज़र-एजेंट क्लाइंट हिंट

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

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

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

समस्याओं वाले टैब में, Quirks मोड से जुड़ी समस्याओं की शिकायत करना

DevTools अब Quirks Mode और Limited-quirks Mode से जुड़ी समस्याओं की रिपोर्ट करता है.

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

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

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

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

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

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

Lighthouse पैनल में Lighthouse 7.5

Lighthouse पैनल अब Lighthouse 7.5 पर काम कर रहा है. सीएसएस में aspect-ratio एट्रिब्यूट की वैल्यू दी गई इमेज के लिए, "चौड़ाई और ऊंचाई की वैल्यू मौजूद नहीं है" वाली चेतावनी अब नहीं दिखेगी. पहले, Lighthouse उन इमेज के लिए चेतावनियां दिखाता था जिनकी चौड़ाई और ऊंचाई तय नहीं की गई थी.

बदलावों की पूरी सूची के लिए, रिलीज़ नोट देखें.

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

कॉल स्टैक में "फ़्रेम को फिर से शुरू करें" संदर्भ मेन्यू को बंद कर दिया गया है

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

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

[प्रयोग के तौर पर उपलब्ध] प्रोटोकॉल मॉनिटर

Chrome DevTools, Chrome ब्राउज़र को इंस्ट्रुमेंट करने, उनकी जांच करने, उन्हें डीबग करने, और प्रोफ़ाइल बनाने के लिए, Chrome DevTools Protocol (CDP) का इस्तेमाल करता है. प्रोटोकॉल मॉनिटर की मदद से, DevTools के ज़रिए किए गए सभी सीडीपी अनुरोध और जवाब देखे जा सकते हैं.

सीडीपी की जांच करने के लिए, दो नए फ़ंक्शन जोड़े गए हैं:

• सेव करें बटन की मदद से, रिकॉर्ड किए गए मैसेज को JSON फ़ाइल के तौर पर डाउनलोड किया जा सकता है
• एक नया फ़ील्ड, जिसकी मदद से सीधे तौर पर रॉ सीडीपी कमांड भेजा जा सकता है

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

[प्रयोग के तौर पर उपलब्ध] Puppeteer Recorder

Puppeteer recorder अब ब्राउज़र के साथ आपके इंटरैक्शन के आधार पर, चरणों की सूची जनरेट करता है. इससे पहले, DevTools सीधे तौर पर Puppeteer स्क्रिप्ट जनरेट करता था. एक्सपोर्ट करें बटन जोड़ा गया है, ताकि चरणों को Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट किया जा सके.

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

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

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

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

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

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

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

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

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

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