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

छूटे हुए स्टाइलशीट को बेहतर तरीके से डीबग करना

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

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

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

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

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

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

एलिमेंट में लीनियर टाइमिंग की सुविधा > स्टाइल > ईज़िंग एडिटर

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

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

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

स्टोरेज बकेट सपोर्ट और मेटाडेटा व्यू

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

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

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

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

लाइटहाउस 10.3.0

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

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

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

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

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

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

DevTools की टीम, इन सुधारों के लिए यांगलिंग वांग और एलॉर्म कोच का शुक्रिया अदा करती है.

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

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

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

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

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

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

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

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

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

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

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