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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XHR लेबल का नाम बदलकर Fetch/XHR कर दिया गया

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chromium की समस्या: 1199137

Lighthouse पैनल में Lighthouse 7.5

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

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

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

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

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

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

[एक्सपेरिमेंट के तौर पर उपलब्ध] प्रोटोकॉल मॉनिटर

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

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

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

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

[एक्सपेरिमेंट के तौर पर उपलब्ध है] Puppeteer Recorder

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

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

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

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

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

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

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

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

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

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

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