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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

    यह डायलॉग बॉक्स, आपको सोर्स-मैप की गई फ़ाइल के बजाय ओरिजनल कोड पर ले जाता है.

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

    'Has overrides' कॉलम में, 'has-overrides:yes' वैल्यू के लिए फ़िल्टर किया जा रहा है.

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

    'सभी बदलाव मिटाएं' को 'मिटाएं' से बदलने से पहले और बाद में.

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

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

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

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.

prefers-reduced-transparency मीडिया फ़ीचर को एम्युलेट करें

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

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

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

Lighthouse 11

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

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

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

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

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

  • सीएसएस की खास जानकारी: बाईं ओर मौजूद साइडबार में, सेक्शन के बीच नेविगेट करने के लिए ऊपर और नीचे की ओर तीर के निशान वाले बटन का इस्तेमाल करें.
  • मेमोरी: बाईं ओर मौजूद साइडबार में, टैब वाले स्नैपशॉट के बगल में मौजूद सेव करें बटन पर फ़ोकस करें. इसके बाद, फ़ोल्डर चुनने के लिए 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 से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.

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

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