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

एलिमेंट में सुधार

सीएसएस सबग्रिड का नया बैज

Elements पैनल में, subgrid के लिए नया subgrid बैज जोड़ा गया है. यह सुविधा फ़िलहाल, Chrome Canary में एक्सपेरिमेंट के तौर पर उपलब्ध है.

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

तत्व पैनल में मौजूद सभी बैज की सूची देखने के लिए, बैज का रेफ़रंस देखें.

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

टूलटिप में सिलेक्टर की खास जानकारी

Elements > Styles में जाकर, किसी सिलेक्टर के नाम पर कर्सर घुमाएं. इससे आपको टूलटिप में, उसका स्पेसिफ़िसिटी वेट दिखेगा.

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

टूलटिप में कस्टम सीएसएस प्रॉपर्टी की वैल्यू

तत्व > स्टाइल में जाकर, कस्टम सीएसएस प्रॉपर्टी के नाम पर कर्सर घुमाएं. इससे आपको टूलटिप में उसकी वैल्यू दिखेगी.

DevTools की टीम, इस सुधार को लागू करने के लिए 一丝 और Suyan का शुक्रिया अदा करती है.

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

सोर्स से जुड़े सुधार

सीएसएस सिंटैक्स को हाइलाइट करना

सोर्स पैनल को प्रीप्रोसेस्ड सीएसएस फ़ाइलों के लिए यह जानकारी मिलती है. जैसे, SASS, SCSS, और LESS:

• सिंटैक्स को हाइलाइट करना.
• इनलाइन एडिटर के साथ काम करता है. ये एडिटर, तत्व > स्टाइल में मौजूद एडिटर की तरह होते हैं. उदाहरण के लिए, कलर पिकर और ईज़िंग एडिटर.

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

शर्त के हिसाब से ब्रेकपॉइंट सेट करने का शॉर्टकट

अब शॉर्टकट की मदद से, कंडीशनल ब्रेकपॉइंट को तेज़ी से सेट किया जा सकता है. ब्रेकपॉइंट डायलॉग खोलने के लिए, Command (MacOS) या Control (Windows / Linux) को दबाकर रखें. इसके बाद, सोर्स > एडिटर के बाएं कॉलम में मौजूद लाइन नंबर पर क्लिक करें.

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

ऐप्लिकेशन > बाउंस ट्रैकिंग पर लागू होने वाली पाबंदियां

Chrome में Bounce Tracking Mitigations एक्सपेरिमेंट की मदद से, उन साइटों की स्थिति का पता लगाया जा सकता है जो बाउंस ट्रैकिंग तकनीक का इस्तेमाल करके, क्रॉस-साइट ट्रैकिंग करती हैं. साथ ही, उनकी स्थिति को मिटाया जा सकता है. ऐप्लिकेशन > बैकग्राउंड सेवाएं पैनल में, बाउंस ट्रैकिंग को कम करने के तरीके नाम का नया टैब जोड़ा गया है. इसकी मदद से, बाउंस ट्रैकिंग को कम करने के तरीकों को मैन्युअल तरीके से लागू किया जा सकता है. साथ ही, उन साइटों की सूची देखी जा सकती है जिनका डेटा मिटाया गया है.

सुरक्षा से जुड़ी इस सुविधा के बारे में जानें:

1. Chrome में तीसरे पक्ष की कुकी ब्लॉक करें. > सेटिंग > निजता और सुरक्षा > कुकी और अन्य साइट डेटा > तीसरे पक्ष की कुकी ब्लॉक करें पर जाएं और इसे चालू करें.
2. chrome://flags में जाकर, बाउंस ट्रैकिंग को कम करने की सुविधा वाले एक्सपेरिमेंट को डेटा मिटाने की सुविधा चालू है पर सेट करें.
3. इस डेमो पेज की जांच करें. इसके बाद, ऐप्लिकेशन > बैकग्राउंड सेवाएं > बाउंस ट्रैकिंग को कम करने वाले तरीके खोलें. पेज पर मौजूद किसी बाउंस लिंक पर क्लिक करें. Chrome को बाउंस रिकॉर्ड करने के लिए 10 सेकंड तक इंतज़ार करें. इसके बाद, तुरंत हटाएं पर क्लिक करें.

इसके अलावा, समस्याएं टैब में, आपको आने वाले समय में राज्य के नाम हटाए जाने के बारे में चेतावनी दी जाती है.

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

Lighthouse 10.2.0

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

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

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

डिफ़ॉल्ट रूप से कॉन्टेंट स्क्रिप्ट को अनदेखा करना

सेटिंग > अनदेखी की गई सूची > एक्सटेंशन की मदद से डाली गई कॉन्टेंट स्क्रिप्ट अब डिफ़ॉल्ट रूप से चालू है.

इस सेटिंग के चालू होने पर:

• Debugger, ऐसी स्क्रिप्ट को अनदेखा करता है और उनके थ्रॉ किए गए अपवादों पर नहीं रुकता.
• सोर्स > कॉल स्टैक पैनल में, अनदेखा किए गए फ़्रेम नहीं दिखते. यहां स्किप करने की सुविधा बंद करने के लिए, नज़रअंदाज़ किए जाने की सूची में शामिल फ़्रेम दिखाएं को चुनें.
• कंसोल, स्टैक ट्रेस में नज़रअंदाज़ किए गए फ़्रेम को छोटा कर देता है. बड़ा करने के लिए, N और फ़्रेम दिखाएं पर क्लिक करें. छोटा करने के लिए, कम दिखाएं पर क्लिक करें.

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

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

नेटवर्क > डिफ़ॉल्ट रूप से रिस्पॉन्स को बेहतर तरीके से प्रिंट करना

नेटवर्क > जवाब पैनल में, अब डिफ़ॉल्ट रूप से छोटे किए गए जवाबों को सुंदर तरीके से प्रिंट किया जाता है. यह सोर्स पैनल की तरह ही काम करता है.

इसके अलावा, SVG फ़ाइलों में सिंटैक्स हाइलाइटिंग की सुविधा भी मिलती है.

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

अन्य हाइलाइट

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

• सेटिंग > डिवाइस: एजेंट स्ट्रिंग की सूची में Pixel 6 पर Facebook for Android v407 को जोड़ा गया.
• नेटवर्क: नेटवर्क लॉग मिटाएं शॉर्टकट जोड़ा गया (1444991):
  • macOS: Command + K
  • Windows/Linux: Control + L
• रिकॉर्डर > रिकॉर्डिंग N > परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाला पैनल ड्रॉप-डाउन विकल्प हटा दिया गया है (1414773).
• लोड नहीं हो पाने वाली स्टाइलशीट अब नेविगेटर ट्री (1386059) में नहीं दिखती हैं.
• परफ़ॉर्मेंस: इंटरैक्शन ट्रैक के एक्सपैंड होने पर, उसके गलत तरीके से दिखने की समस्या को ठीक किया गया (1432510).
• तत्व: लोड नहीं हो सकीं स्टाइलशीट को अब घुमावदार लाइनों (1440626) से अंडरस्कोर किया गया है.
• अगर किसी भाषा के लिए कोई प्लगिन उपलब्ध नहीं है, तो Debugger WebAssembly में अपने-आप नहीं जुड़ता (1443342).
• सोर्स > एडिटर में मौजूद सीएसएस फ़ाइलों के लिए, कर्सर को एक बार में एक शब्द आगे बढ़ाने वाले शॉर्टकट को वापस लाया गया है (1241848):
  • macOS: Alt + ऐरो
  • Windows/Linux: Ctrl + ऐरो

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

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

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

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

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

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

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