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

DevTools तेज़ी से चालू होने की सुविधा

JavaScript कंपाइलेशन के हिसाब से DevTools स्टार्टअप अब ~37% ज़्यादा तेज़ हो गया है (6.9 से 5 सेकंड तक)! 🎉

टीम ने क्रम में लगाने, पार्स करने, और डीसीरियलाइज़ेशन की सुविधा इस्तेमाल की गई है.

आने वाले समय में, उन इंजीनियरिंग ब्लॉग पोस्ट को पब्लिश किया जाएगा जिनमें इन्हें लागू करने के बारे में पूरी जानकारी दी गई होगी. हमारे साथ बने रहें!

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

नए सीएसएस ऐंगल विज़ुअलाइज़ेशन टूल

DevTools अब सीएसएस एंगल डीबगिंग के लिए बेहतर सहायता उपलब्ध है!

जब आपके पेज के किसी एचटीएमएल एलिमेंट पर सीएसएस ऐंगल लागू होता है (जैसे, background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), घड़ी आइकॉन, स्टाइल पैनल में ऐंगल के बगल में दिखता है. घड़ी को टॉगल करने के लिए घड़ी के आइकॉन पर क्लिक करें ओवरले करें. घड़ी में कहीं भी क्लिक करें या कोण बदलने के लिए सुई को खींचें!

ऐंगल की वैल्यू बदलने के लिए, माउस और कीबोर्ड शॉर्टकट का भी इस्तेमाल किया जा सकता है. इसके लिए, हमारी ज़्यादा जानने के लिए दस्तावेज़!

Chromium से जुड़ी समस्याएं: 1126178, 1138633

इस्तेमाल न किए जा सकने वाले इमेज टाइप को एम्युलेट करें

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

मान लीजिए कि हमारे पास AVIF और WebP में नए ब्राउज़र के लिए, इमेज दिखाने के लिए यह एचटीएमएल कोड है पुराने ब्राउज़र के लिए फ़ॉलबैक PNG इमेज.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

रेंडरिंग टैब खोलें और "AVIF इमेज फ़ॉर्मैट बंद करें" को चुनें और पेज को रीफ़्रेश करें. इस पर माउस घुमाएं img src. इमेज के मौजूदा सोर्स (currentSrc) को अब फ़ॉलबैक WebP इमेज के तौर पर सेट किया गया है.

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

स्टोरेज पैनल में स्टोरेज कोटा के साइज़ को सिम्युलेट करें

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

ऐप्लिकेशन पर जाएं > स्टोरेज, कस्टम स्टोरेज कोटा सिम्युलेट करें चेकबॉक्स को चालू करें और स्टोरेज कोटा को सिम्युलेट करने के लिए कोई मान्य संख्या डालें.

Chromium से जुड़ी समस्याएं: 945786, 1146985

परफ़ॉर्मेंस पैनल की रिकॉर्डिंग में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली नई लाइन

परफ़ॉर्मेंस रिकॉर्डिंग में अब वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी का विकल्प दिखाया जा सकता है.

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

इस लेन में, फ़िलहाल वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी दिखती है. जैसे, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) और लेआउट शिफ़्ट (एलएस).

वेब पर उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के तरीके के बारे में ज़्यादा जानने के लिए web.dev/vitals पर जाएं ज़रूरी जानकारी वाली मेट्रिक.

Chromium से जुड़ी समस्या: लागू नहीं

नेटवर्क पैनल में सीओआरएस से जुड़ी गड़बड़ियों की शिकायत करें

क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग की वजह से नेटवर्क अनुरोध पूरा न होने पर, अब DevTools सीओआरएस गड़बड़ी दिखाता है (CORS).

नेटवर्क पैनल में, सीओआरएस नेटवर्क के पूरे अनुरोध को देखें. स्थिति कॉलम में "सीओआरएस" दिखता है "गड़बड़ी" है. गड़बड़ी पर कर्सर घुमाएं. टूलटिप में, अब गड़बड़ी का कोड दिखेगा. पहले, सिर्फ़ DevTools सीओआरएस की गड़बड़ियों के लिए, सामान्य "(काम नहीं कर सका)" स्टेटस दिखाया गया.

यह तकनीकी समस्याओं का विस्तृत वर्णन प्रदान करने के लिए सीओआरएस से जुड़ी समस्याएं!

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

फ़्रेम की जानकारी वाले व्यू से जुड़े अपडेट

फ़्रेम की जानकारी वाले व्यू में क्रॉस-ऑरिजिन आइसोलेशन की जानकारी

क्रॉस-ऑरिजिन आइसोलेटेड स्टेटस अब सुरक्षा और आइसोलेशन सेक्शन.

नए एपीआई की उपलब्धता सेक्शन में, SharedArrayBuffers (SAB) की उपलब्धता और कि क्या postMessage() का इस्तेमाल करके उन्हें शेयर किया जा सकता है.

अगर SAB और postMessage() फ़िलहाल उपलब्ध हैं, तो माइग्रेशन की चेतावनी दिखेगी, लेकिन कॉन्टेक्स्ट क्रॉस-ऑरिजिन आइसोलेटेड नहीं है. क्रॉस-ऑरिजिन आइसोलेशन और ऐसा होने की वजह के बारे में ज़्यादा जानें इस लेख में, SharedArrayBuffers जैसी सुविधाओं के लिए ज़रूरी है.

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

फ़्रेम की जानकारी वाले व्यू में नए वेब वर्कर की जानकारी

DevTools अब खास वेब वर्कर को उस फ़्रेम के नीचे दिखाता है जिससे वे बनाए जाते हैं.

ऐप्लिकेशन पैनल में, वेब वर्कर के साथ किसी फ़्रेम को बड़ा करें, फिर वर्कर ट्री का इस्तेमाल करके वेब वर्कर की जानकारी देखी जा सकती है.

Chromium से जुड़ी समस्याएं: 1122507, 1051466

खुली हुई विंडो के लिए, ओपनर फ़्रेम की जानकारी दिखाएं

अब उस फ़्रेम की जानकारी देखी जा सकती है जिसकी वजह से कोई दूसरी विंडो खुली थी.

विंडो की जानकारी देखने के लिए, फ़्रेम ट्री के नीचे कोई खुली विंडो चुनें. ओपनर कार्ड पर क्लिक करें फ़्रेम लिंक का इस्तेमाल करें.

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

सर्विस वर्कर पैनल से नेटवर्क पैनल खोलें

नए नेटवर्क अनुरोध लिंक की मदद से, सभी सर्विस वर्कर (एसडब्ल्यू) अनुरोध रूटिंग की जानकारी देखें. इससे एसडब्ल्यू को डीबग करते समय डेवलपर को ज़्यादा जानकारी मिलती है.

ऐप्लिकेशन पर जाएं > सर्विस वर्कर, SW के नेटवर्क अनुरोध पर क्लिक करें. कॉन्टेंट बनाने नेटवर्क पैनल सबसे नीचे वाले पैनल में खुलता है. यह सर्विस वर्कर से जुड़े सभी अनुरोध दिखाता है ( नेटवर्क अनुरोध, "is:service-worker-intercepted" की मदद से फ़िल्टर किए जाते हैं).

Chromium से जुड़ी समस्या: लागू नहीं

नेटवर्क पैनल में कॉपी करने के नए विकल्प

प्रॉपर्टी की वैल्यू कॉपी करें

संदर्भ मेन्यू में, "वैल्यू कॉपी करें" के नए विकल्प की मदद से, किसी नेटवर्क की प्रॉपर्टी वैल्यू को कॉपी किया जा सकता है अनुरोध.

नेटवर्क पैनल में, हेडर पैनल को खोलने के लिए, नेटवर्क के अनुरोध पर क्लिक करें. राइट क्लिक करें इन सेक्शन की प्रॉपर्टी में से कोई एक: पेलोड (JSON) फ़ॉर्म डेटा क्वेरी स्ट्रिंग पैरामीटर का अनुरोध करें अनुरोध के हेडर का जवाब देने के लिए हेडर

इसके बाद, प्रॉपर्टी की वैल्यू को क्लिपबोर्ड पर कॉपी करने के लिए, वैल्यू कॉपी करें चुनें.

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

नेटवर्क शुरू करने वाले प्रोग्राम के लिए स्टैकट्रेस कॉपी करें

किसी नेटवर्क अनुरोध पर राइट क्लिक करें. इसके बाद, स्टैकट्रेस को कॉपी करने के लिए, स्टैकट्रेस कॉपी करें को चुनें क्लिपबोर्ड.

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

Wasm को डीबग करने से जुड़े अपडेट

माउसओवर पर Wasm वैरिएबल वैल्यू की झलक देखें

ब्रेकपॉइंट पर रोके हुए, WebAssembly (Wasm) के किसी वैरिएबल पर कर्सर घुमाते समय, DevTools अब वैरिएबल की मौजूदा वैल्यू दिखाता है.

सोर्स पैनल में, Wasm फ़ाइल खोलें, ब्रेकपॉइंट डालें, और पेज को रीफ़्रेश करें. कर्सर को वैरिएबल का इस्तेमाल करके वैल्यू देखें.

Chromium से जुड़ी समस्याएं: 1058836, 1071432

कंसोल में Wasm वैरिएबल का आकलन करें

अब ब्रेकपॉइंट पर रहकर, Console में Wasm वैरिएबल का आकलन किया जा सकता है.

इस उदाहरण में, हमने लाइन local.get $input पर एक ब्रेकपॉइंट तय किया है. डीबग करते समय, $input टाइप करें कंसोल में वैरिएबल की मौजूदा वैल्यू दिखाएगा, जो इस मामले में 4 है.

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

फ़ाइल या मेमोरी के साइज़ के लिए, मेज़रमेंट की एक जैसी इकाइयां

DevTools अब फ़ाइल/मेमोरी का साइज़ दिखाने के लिए, लगातार केबी का इस्तेमाल करता है. पहले DevTools मिक्स केबी (1000 बाइट) और KiB (1024 बाइट). उदाहरण के लिए, नेटवर्क पैनल में पहले "kB" का इस्तेमाल किया गया था लेकिन लेबल असल में, KiB का इस्तेमाल करके कैलकुलेशन किए गए. इससे भ्रम की स्थिति पैदा नहीं हुई.

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

एलिमेंट पैनल में नकली एलिमेंट को हाइलाइट करें

DevTools ने सूडो एलिमेंट के कलर कंट्रास्ट को बढ़ा दिया है, ताकि आप उन्हें आसानी से पहचान सकें.

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

प्रयोग के तौर पर शुरू की गई सुविधाएं

सीएसएस Flexbox के डीबग करने वाले टूल

Flexbox के डीबग करने वाले टूल जल्द ही उपलब्ध होंगे!

स्टार्टर के लिए, DevTools अब एलिमेंट पैनल में flex बैज दिखाता है. ऐसा उन एलिमेंट के लिए होता है जिनमें इस पर display: flex लागू किया गया.

इसके अलावा, इन फ़्लेक्सबॉक्स प्रॉपर्टी में नए अलाइनमेंट आइकॉन जोड़े जाते हैं:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

इतना ही नहीं, ये आइकॉन कॉन्टेक्स्ट अवेयर हैं. आइकॉन की दिशा इसके हिसाब से अडजस्ट होगी:

• flex-direction
• direction
• writing-mode

इन आइकॉन का मकसद, पेज के फ़्लेक्सबॉक्स लेआउट को बेहतर तरीके से विज़ुअलाइज़ करना है.

यहां Flexbox टूल की सुविधाओं का डिज़ाइन दस्तावेज़ दिया गया है. जल्द ही इसमें और सुविधाएं जोड़ी जाएंगी.

इसे आज़माएं और हमें बताएं कि आपको यह कैसा लगा!

Chromium से जुड़ी समस्याएं: 1144090, 1139945

कॉर्ड के कीबोर्ड शॉर्टकट पसंद के मुताबिक बनाएं

पिछली रिलीज़ के बाद से, DevTools पसंद के मुताबिक कीबोर्ड शॉर्टकट के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध सहायता जोड़ी गई है.

अब शॉर्टकट एडिटर में कॉर्ड (एक से ज़्यादा बटन दबाने वाले शॉर्टकट) बनाए जा सकते हैं.

सेटिंग पर जाएं > शॉर्टकट, किसी निर्देश पर कर्सर घुमाते हुए और बदलाव करें बटन (पेन आइकॉन) पर क्लिक करें कॉर्ड शॉर्टकट को पसंद के मुताबिक बनाने के लिए.

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

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

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

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

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

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

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

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