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

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

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

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

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

Console में const में फिर से किए गए एलान के साथ काम करता है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XHR लेबल का नाम बदलकर Fetch/XHR करें

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

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

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

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

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

'नेटवर्क की शर्तें' टैब में डिवाइसों के लिए, उपयोगकर्ता-एजेंट क्लाइंट हिंट

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

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

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

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

DevTools अब क्वर्क्स मोड और सीमित क्वर्क मोड से जुड़ी समस्याओं की शिकायत करता है.

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

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

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

परफ़ॉर्मेंस पैनल में कंप्यूट इंटरसेक्शन शामिल करना

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

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

लाइटहाउस पैनल में लाइटहाउस 7.5

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

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

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

"फ़्रेम रीस्टार्ट करें" अब काम नहीं करता कॉल स्टैक में कॉन्टेक्स्ट मेन्यू

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

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

[एक्सपेरिमेंट] प्रोटोकॉल मॉनिटर

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

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

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

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

[एक्सपेरिमेंट के तौर पर] कठपुतली रिकॉर्डर

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

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

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

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

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

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

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

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

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

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

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