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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

स्थानीय बदलावों में किए गए ज़्यादा सुधार

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

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

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

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

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

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

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

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

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

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

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

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

खोज करने से पहले और बाद में, हर लाइन में मैच होने वाले सभी शब्द दिखते हैं.

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

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

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

बेहतर सोर्स पैनल

सोर्स पैनल में व्यवस्थित फ़ाइल फ़ोल्डर

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

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

सोर्स > वर्कस्पेस की मदद से, 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.

लाइटहाउस 11

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

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

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

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

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

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

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

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

अन्य खास बातें

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

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

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

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

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

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

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

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