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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

स्थानीय लेवल पर बदलाव करने की सुविधा में और सुधार

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

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

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

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

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

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

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

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

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

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

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

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

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

साथ ही, 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.

Lighthouse 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).
  • कई यूज़र इंटरफ़ेस (यूआई) एलिमेंट में, कलर को मटीरियल 3 कलर में अपडेट किया गया है. इनमें खास तौर पर, एलिमेंट और परफ़ॉर्मेंस पैनल (1456690, 1472243) शामिल हैं.
  • समस्याएं अब नेविगेशन के दौरान कुकी से जुड़ी समस्याओं को सेव करती हैं (1466601).
  • ऐप्लिकेशन > प्रीलोडिंग में कई सुधार किए गए हैं. इनमें, क्रम से लगाए जा सकने वाले ग्रिड और नियम सेट की बदली गई जानकारी (1410709) सबसे अहम है.
  • प्रोटोकॉल मॉनिटर में, कमांड एडिटर में कई सुधार किए गए हैं. इनमें गलत इनपुट के बारे में चेतावनियां, भेजे गए कमांड में बदलाव करना, पहले से तय की गई कुंजियों के बिना ऑब्जेक्ट पैरामीटर के लिए एडिटर, रेफ़रंस के हिसाब से तय नहीं किए गए एनम के लिए सहायता, टाइप रेफ़रंस के बिना ऑब्जेक्ट, सबस्ट्रिंग मैच के हिसाब से कमांड फ़िल्टर करना वगैरह शामिल हैं (1448050).
  • परफ़ॉर्मेंस फ़्लेम चार्ट में, पाई चार्ट (1470147) के कुल बॉक्स के चारों ओर बॉर्डर दिखता है.
  • सोर्स, अब सीएसएस (1471354) में डैश को शब्द के वर्ण के तौर पर नहीं मानता.
  • ऑटोकंप्लीट की सुविधा अब हमेशा आखिर में, सीएसएस के हिसाब से कीवर्ड को क्रम से लगाती है.
  • रेगुलर एक्सप्रेशन फ़िल्टर में अब स्पेस (1346936) का इस्तेमाल किया जा सकता है.
  • एलिमेंट में, मीडिया क्वेरी की सुविधा का पता लगाने की समस्या को ठीक किया गया (1472693).

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

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

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

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

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

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