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

Elements > Styles में कस्टम प्रॉपर्टी के लिए नया सेक्शन

Elements पैनल अब @property CSS at-rule के साथ काम करता है. इसकी मदद से, सीएसएस कस्टम प्रॉपर्टी को साफ़ तौर पर तय किया जा सकता है. साथ ही, किसी भी JavaScript को चलाए बिना उन्हें स्टाइलशीट में रजिस्टर किया जा सकता है.

रजिस्टर की गई कस्टम प्रॉपर्टी की जांच करने के लिए, Elements > Styles में जाएं. इसके बाद, प्रॉपर्टी के नाम पर कर्सर घुमाएं और टूलटिप में उसके डिस्क्रिप्टर देखें. टूलटिप में, लिंक पर क्लिक करके रजिस्टर की गई प्रॉपर्टी को @property सेक्शन में देखें.

Chromium से जुड़ी समस्याएं: 1471102, 1471103, 1471105.

स्थानीय तौर पर किए गए बदलावों को बेहतर बनाने से जुड़े ज़्यादा अपडेट

पिछले वर्शन में किए गए सुधारों को जारी रखते हुए, स्थानीय ओवरराइड अब ये काम करते हैं:

• सोर्स > पेज में, सोर्स-मैप की गई किसी फ़ाइल पर राइट क्लिक करके कॉन्टेंट बदलें को चुनने पर, DevTools एक डायलॉग दिखाएगा. यह डायलॉग आपको ओरिजनल सोर्स पर ले जाएगा. सोर्स से मैप की गई फ़ाइलों के कॉन्टेंट को बदला नहीं जा सकता.

  

• नेटवर्क पैनल में, नया बदलाव मौजूद हैं कॉलम और उससे जुड़ा has-overrides:[content|headers|yes|no] फ़िल्टर जोड़ा गया है. बदलाव किए गए हैं कॉलम देखने के लिए, टेबल हेडर पर दायां क्लिक करें और इसे चुनें.

  

• सोर्स > बदलाव में, सभी बदलाव मिटाएं मेन्यू के विकल्प को मिटाएं विकल्प से बदल दिया गया है.

  

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

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

पिछले विकल्प को वापस लाने के लिए, सेटिंग > एक्सपेरिमेंट में जाकर, "कुछ समय के लिए सभी ओवरराइड मिटाएं " विकल्प चालू करें को चुनें.

Chromium से जुड़ी समस्याएं: 1472952, 1416338, 1472580, 1473681 1475668.

खोज की बेहतर सुविधा

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

इसके अलावा, खोज की सुविधा को और भी तेज़ बना दिया गया है. अगले वीडियो में, पहले (बाईं ओर) और बाद (दाईं ओर) की तुलना देखें.

आखिर में, Search में अब सूची में शामिल न करें सुविधा काम करती है. इसलिए, आपको सूची में शामिल न की गई फ़ाइलों के नतीजे नहीं दिखेंगे.

Chromium से जुड़ी समस्याएं: 1468875, 1472019.

सोर्स पैनल को बेहतर बनाया गया

सोर्स पैनल में व्यवस्थित किया गया वर्कस्पेस

सोर्स पैनल में मौजूद वर्कस्पेस सुविधा को बेहतर बनाया गया है:

• एक जैसे नाम रखना. सबसे अहम बदलाव यह है कि सोर्स > फ़ाइल सिस्टम पैनल का नाम बदलकर Workspace कर दिया गया है. इस पैनल में मौजूद यूज़र इंटरफ़ेस (यूआई) के अलग-अलग टेक्स्ट अब ज़्यादा साफ़ तौर पर दिखते हैं और इनमें कोई भी दोहराव नहीं है.
• बेहतर सेटअप. फ़ोल्डर को खींचकर छोड़ने के लिए बेहतर संकेत देखें या फ़ोल्डर चुनने के लिए किसी लिंक पर क्लिक करें.

सोर्स > वर्कस्पेस की मदद से, DevTools में किए गए बदलावों को सीधे तौर पर अपनी सोर्स फ़ाइलों में सिंक किया जा सकता है.

सेटअप करने का नया तरीका और वर्कफ़्लो देखें:

Chromium से जुड़ी समस्याएं: 1473771, 1473880, 1473963, 1474686, 1474687.

सोर्स पैनल में मौजूद पैन का क्रम बदलना

अब सोर्स पैनल की बाईं ओर मौजूद पैन को खींचकर और छोड़कर, उनका क्रम बदला जा सकता है. ठीक उसी तरह जैसे अन्य पैनल, टैब, और पैन का क्रम बदला जाता है.

Chromium से जुड़ी समस्याएं: 1473758.

ज़्यादा स्क्रिप्ट टाइप के लिए सिंटैक्स हाइलाइट करने और सुंदर तरीके से प्रिंट करने की सुविधा

अब सोर्स पैनल में ये काम किए जा सकते हैं:

• इन स्क्रिप्ट टाइप में मौजूद इनलाइन JavaScript को सुंदर तरीके से प्रिंट करें: module, importmap, speculationrules.
• importmap और speculationrules स्क्रिप्ट टाइप के सिंटैक्स को हाइलाइट करें. इन दोनों में JSON होता है.

स्पेकुलेशन नियमों के बारे में ज़्यादा जानने के लिए, पेज पर तुरंत नेविगेट करने के लिए, Chrome में पेजों को पहले से रेंडर करना लेख पढ़ें.

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

'पारदर्शिता कम करें' मीडिया फ़ीचर को एम्युलेट करें

Chrome 118 में अब prefers-reduced-transparency मीडिया फ़ीचर काम करती है. इस सुविधा की मदद से डेवलपर, वेब कॉन्टेंट को ओएस में कम पारदर्शिता के लिए, उपयोगकर्ता की चुनी गई सेटिंग के हिसाब से ढाल सकते हैं. जैसे, macOS पर पारदर्शिता कम करें सेटिंग.

इस मीडिया सुविधा को एमुलेट करने के लिए, रेंडरिंग टैब खोलें और नीचे की ओर स्क्रोल करें.

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

Lighthouse 11

Lighthouse पैनल अब Lighthouse 11 पर काम करता है. खास तौर पर, इस वर्शन में लेगसी नेविगेशन को हटा दिया गया है. साथ ही, इसमें सुलभता से जुड़ी नई ऑडिट जोड़ी गई हैं. इसके अलावा, सुलभता कैटगरी के स्कोर में भी बदलाव किया गया है.

बदलावों की पूरी सूची भी देखें. DevTools में Lighthouse पैनल इस्तेमाल करने के बारे में बुनियादी बातें जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

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

सुलभता सुविधाओं में सुधार

DevTools में अब नेविगेशन के लिए ज़्यादा कीस्ट्रोक उपलब्ध हैं:

• सीएसएस की खास जानकारी: बाईं ओर मौजूद साइडबार में सेक्शन के बीच नेविगेट करने के लिए, ऊपर और नीचे की ओर तीर के निशान वाले बटन का इस्तेमाल करें.
• Memory: बाईं ओर मौजूद साइडबार में, टैब वाले स्नैपशॉट के बगल में मौजूद सेव करें बटन पर फ़ोकस करें. इसके बाद, फ़ोल्डर चुनने के लिए Enter दबाएं.

इसके अलावा, स्क्रीन रीडर के सूचना देने से जुड़ी कई समस्याओं को ठीक किया गया है.

Chromium से जुड़ी समस्याएं: 1470401, 1471301, 1474108, 1468631.

अन्य हाइलाइट

इस रिलीज़ में, कुछ अहम गड़बड़ियां ठीक की गई हैं और सुधार किए गए हैं:

• नेटवर्क: लोकप्रिय संसाधन टाइप के लिए नए आइकॉन: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• यूज़र इंटरफ़ेस (यूआई) के कई एलिमेंट में, मटेरियल 3 के कलर अपडेट किए गए हैं. इनमें सबसे अहम तत्व और परफ़ॉर्मेंस पैनल हैं (1456690, 1472243).
• समस्याएं टैब में अब नेविगेशन के दौरान कुकी से जुड़ी समस्याओं को सेव किया जाता है (1466601).
• ऐप्लिकेशन > प्रीलोडिंग से जुड़ी कई सुविधाएं बेहतर बनाई गई हैं. इनमें खास तौर पर, क्रम से लगाई जा सकने वाली ग्रिड और नियमों के सेट की बदली गई जानकारी (1410709) शामिल है.
• प्रोटोकॉल मॉनिटर में कमांड एडिटर को बेहतर बनाया गया है. जैसे, गलत इनपुट पर चेतावनियां, भेजी गई कमांड में बदलाव करना, पहले से तय कुंजियों के बिना ऑब्जेक्ट पैरामीटर के लिए एडिटर, रेफ़रंस से तय नहीं किए गए एनम के लिए सहायता, टाइप रेफ़रंस के बिना ऑब्जेक्ट, सबस्ट्रिंग मैच के हिसाब से कमांड फ़िल्टर करना वगैरह (1448050).
• परफ़ॉर्मेंस फ़्लेम चार्ट में, पाई चार्ट (1470147) पर मौजूद कुल बॉक्स के चारों ओर बॉर्डर दिखता है.
• सोर्स अब सीएसएस में डैश को शब्द के वर्ण के तौर पर नहीं मानता (1471354).
• ऑटोकंप्लीट की सुविधा अब सीएसएस के हिसाब से कीवर्ड को हमेशा आखिर में क्रम से लगाती है.
• रेगुलर एक्सप्रेशन वाले फ़िल्टर में अब स्पेस का इस्तेमाल किया जा सकता है (1346936).
• Elements फ़िक्स्ड मीडिया क्वेरी फ़ीचर का पता लगाना (1472693).

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

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

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

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

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

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

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