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

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

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

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

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

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

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

टूलटिप में सिलेक्टर की खासियत

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

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

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

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

DevTools टीम इस सुधार के लिए, 丝 और सुयान का आभार जताती है.

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

सोर्स में सुधार

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

Sources पैनल में पहले से प्रोसेस की गई सीएसएस फ़ाइलों की ये चीज़ें होती हैं: SASS, SCSS, और कम:

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

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

कंडिशनल ब्रेकपॉइंट सेट करने के लिए शॉर्टकट

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

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

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

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

सुरक्षा से जुड़ी यह सुविधा देखें:

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

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

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

लाइटहाउस 10.2.0

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

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

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

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

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

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

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

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

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

नेटवर्क > डिफ़ॉल्ट रूप से प्रिटी-प्रिंटिंग (प्रिटी-प्रिंटिंग) वाला जवाब

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

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

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

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

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

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

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

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

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

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

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

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

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