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

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

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

बेहतर खोज

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

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

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

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

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

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

सोर्स पैनल में, वर्कस्पेस की सुविधा को नई सुविधा के साथ स्ट्रीम किया गया है:

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

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

नए सेटअप और वर्कफ़्लो को देखें:

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

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

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

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

स्क्रिप्ट के अन्य टाइप के लिए, सिंटैक्स को हाइलाइट करने और प्रिटी-प्रिंटिंग का इस्तेमाल करें

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

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

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

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

Pres-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 Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!

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

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

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

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

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