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 और फ़ेच एपीआई नेटवर्क अनुरोध, दोनों शामिल हैं.

फ़ेच/XHR लेबल

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

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

अब आपके पास नए 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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 को रद्द कर दिया गया था.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59