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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

व्यूपोर्ट में सबग्रिड बैज और ओवरले.

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

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

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

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

टूलटिप, जिसमें किसी सिलेक्टर की खास जानकारी होती है.

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

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

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

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

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

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

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

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

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

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

सोर्स में, सीएसएस सिंटैक्स हाइलाइट करने की सुविधा और इनलाइन एडिटर की सुविधा को बेहतर बनाया गया है.

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

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

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

बाईं ओर मौजूद कॉलम में लाइन नंबर और ब्रेकपॉइंट डायलॉग.

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

ऐप्लिकेशन > बाउंस ट्रैकिंग की क्षमता को कंट्रोल करना

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

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

  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.

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

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

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

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

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

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

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

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

नेटवर्क टैब की रिस्पॉन्स विंडो में, प्रिटी-प्रिंटिंग की सुविधा चालू की गई.

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

SVG सिंटैक्स को हाइलाइट करना.

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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