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

Sofia Emelianova
Sofia Emelianova
GitHub

मौजूद न होने वाली स्टाइलशीट को डीबग करने की सुविधा को बेहतर बनाया गया

DevTools में कई सुधार किए गए हैं. इनसे, आपको मौजूदा स्टाइलशीट से जुड़ी समस्याओं का पता लगाने और उन्हें तेज़ी से डीबग करने में मदद मिलेगी:

  • सोर्स > पेज ट्री में अब सिर्फ़ वे स्टाइलशीट दिखती हैं जिन्हें डिप्लॉय और लोड किया जा चुका है. इससे, आपको भ्रम की स्थिति से बचने में मदद मिलती है.
  • सोर्स > एडिटर में, अब गड़बड़ी वाले @import, url(), और href स्टेटमेंट के बगल में, इनलाइन गड़बड़ी के टूलटिप दिखते हैं.

सोर्स पैनल में, अंडरलाइन किए गए स्टेटमेंट के साथ टूलटिप.

  • कंसोल, पूरा न हो पाने वाले अनुरोधों के लिंक के साथ-साथ, अब उस लाइन के लिंक भी देता है जिसमें लोड न हो पाने वाली स्टाइलशीट का रेफ़रंस दिया गया है.

कंसोल, समस्या वाले स्टेटमेंट वाली लाइन के लिंक उपलब्ध कराता है.

  • नेटवर्क पैनल, इनिशियेटर कॉलम को उस लाइन के लिंक से लगातार पॉप्युलेट करता है जो लोड न हुई स्टाइलशीट का रेफ़रंस देती है.

  • समस्याएं पैनल में, स्टाइलशीट लोड करने से जुड़ी सभी समस्याओं की सूची होती है. इनमें, गलत यूआरएल, अनुरोध पूरा न होने, और @import स्टेटमेंट की गलत जगह पर होने जैसी समस्याएं शामिल हैं.

समस्याओं का पैनल, जिसमें सोर्स और अनुरोधों के लिंक मौजूद हैं.

Chromium से जुड़ी समस्याएं: 1440626, 1442198, 1453611.

एलिमेंट > स्टाइल > आसानी से बदलने की सुविधा वाले एडिटर में लीनियर टाइमिंग की सुविधा

एलिमेंट > स्टाइल में मौजूद ईज़िंग एडिटर. ईज़िंग एडिटर की मदद से, एक क्लिक में transition-timing-function और animation-timing-function वैल्यू में बदलाव किया जा सकता है. इस वर्शन में, ईज़िंग एडिटर. Easing Editor में लीनियर टाइमिंग फ़ंक्शन की सुविधा मिलती है.

लीनियर टाइमिंग कॉन्फ़िगर करने के लिए, लीनियर पिकर बटन पर क्लिक करें. कंट्रोल पॉइंट जोड़ने के लिए, लाइन पर कहीं भी क्लिक करें. कंट्रोल पॉइंट हटाने के लिए, उस पर दो बार क्लिक करें. आपके पास इनमें से कोई एक प्रीसेट चुनने का विकल्प भी है: linear, elastic, bounce या emphasized. लीनियर अडजस्टमेंट को काम करते हुए देखने के लिए वीडियो देखें.

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

स्टोरेज बकेट के लिए सहायता और मेटाडेटा व्यू

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

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

किसी बकेट का मेटाडेटा देखना.

यूनिफ़ाइड मेटाडेटा व्यू अब लोकल, सेशन, और कैश मेमोरी स्टोरेज सेक्शन के लिए भी उपलब्ध है.

एकीकृत मेटाडेटा का नया व्यू.

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

Lighthouse 10.3.0

Lighthouse पैनल अब Lighthouse 10.3.0 पर काम करता है. सबसे खास बात यह है कि इस वर्शन में चार नए ऑडिट जोड़े गए हैं. इनसे टेबल हेडर और कैप्शन, इनपुट बटन के नाम, और भाषा के मेल न खाने से जुड़ी, सुलभता से जुड़ी कई समस्याओं का पता चलता है. उदाहरण के लिए:

टेबल के हेडर की जांच पूरी हो गई है.

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

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

सुलभता: कीबोर्ड निर्देश और बेहतर स्क्रीन रीडर

DevTools में अब ज़्यादा शॉर्टकट काम करते हैं. साथ ही, स्क्रीन रीडर से जुड़ी समस्याएं ठीक की गई हैं:

  • अब कॉन्टेक्स्ट मेन्यू को कीबोर्ड शॉर्टकट की मदद से खोला जा सकता है. उदाहरण के लिए, Windows और कई Linux डिस्ट्रिब्यूशन पर Shift+F10. macOS के शॉर्टकट के लिए, पॉइंटर की अन्य कार्रवाइयां लेख पढ़ें.
  • स्क्रीन रीडर ऐप्लिकेशन:
    • चेकबॉक्स लेबल को दो बार पढ़कर नहीं सुनाएगा.
    • "कॉलम हेडर पढ़ें" शॉर्टकट दबाने पर, क्रम में लगाए जा सकने वाले कॉलम के कॉलम हेडर के नाम सुनाए जाएंगे.

DevTools की टीम, इन सुधारों के लिए Yanling Wang और Elorm Coch का धन्यवाद करती है.

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

अन्य हाइलाइट

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

  • टाइमलाइन (1422552) के साथ इंटरैक्ट करने के बाद भी, नेटवर्क पैनल नेटवर्क गतिविधि रिकॉर्ड करता रहता है.
  • कवरेज पैनल अब यह पहचानता है कि पेज को पहले से रेंडर करने की सुविधा चालू थी या बैक/फ़ॉरवर्ड कैश मेमोरी नेविगेशन चालू था. साथ ही, आपको रीफ़्रेश करने के लिए कहता है (1393057).
  • अब कीबोर्ड का इस्तेमाल करके, सोर्स > ब्रेकपॉइंट पैनल पर जाया जा सकता है: अप ऐरो और डाउन ऐरो का इस्तेमाल करके पैनल पर जाएं और स्पेस का इस्तेमाल करके पैनल चुनें (1446150).
  • नेटवर्क पैनल में, HAR फ़ाइलों को अपलोड और फ़िल्टर करने से जुड़ी समस्या को ठीक किया गया (1450622).
  • परफ़ॉर्मेंस पैनल में मौजूद फ़्लेमचार्ट, अब ट्रेस के बीच छोटे अंतर डालता है, ताकि उन्हें बेहतर तरीके से रेंडर किया जा सके (1452150).
  • सोर्स मैप में एम्बेड की गई फ़ाइलों के लिए, अपने-आप मैप होने की सुविधा को ठीक किया गया (1446383).

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

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

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

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

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

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