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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

कंसोल, समस्या वाली लाइनों के लिंक देता है.

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

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

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

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

Elements > Styles > Easing Editor में लीनियर टाइमिंग की सुविधा

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

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

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

स्टोरेज बकेट की सुविधा और मेटाडेटा देखने की सुविधा

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

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

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

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

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

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