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

Jecelyn Yeen

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

DevTools अब JavaScript कंपाइलेशन के मामले में, ~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 पर कर्सर घुमाएं. मौजूदा इमेज का src (currentSrc) अब फ़ॉलबैक WebP इमेज है.

इमेज टाइप को एम्युलेट करना

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

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

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

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

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

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

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

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

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

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली लेन

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

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

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

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

इससे हमें CORS से जुड़ी समस्याओं के बारे में ज़्यादा जानकारी देने के लिए, अगले सुधार करने में मदद मिलेगी!

सीओआरएस से जुड़ी गड़बड़ियां

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

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

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

क्रॉस-ऑरिजिन आइसोलेटेड स्टेटस अब सुरक्षा और आइसोलेशन सेक्शन में दिखता है.

एपीआई की उपलब्धता वाले नए सेक्शन में, SharedArrayBuffer (SAB) की उपलब्धता के बारे में जानकारी दिखती है. साथ ही, यह भी पता चलता है कि postMessage() का इस्तेमाल करके इन्हें शेयर किया जा सकता है या नहीं.

अगर एसएबी और 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 फ़ाइल खोलें. इसके बाद, ब्रेकपॉइंट डालें और पेज को रीफ़्रेश करें. वैल्यू देखने के लिए, किसी वैरिएबल पर कर्सर घुमाएं.

माउस घुमाने पर Wasm वैरिएबल की झलक देखें

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

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

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

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

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

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

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

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

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

एलिमेंट पैनल में छद्म एलिमेंट हाइलाइट करना

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

स्यूडो एलिमेंट हाइलाइट करना

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

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

सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल

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

शुरुआत के लिए, DevTools अब Elements पैनल में उन एलिमेंट के लिए flex बैज दिखाता है जिन पर display: flex लागू किया गया है.

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

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

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

  • flex-direction
  • direction
  • writing-mode

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

सीएसएस फ़्लेक्स की डीबगिंग

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

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

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

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

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

अब शॉर्टकट एडिटर में कॉर्ड (इसे एक साथ कई बटन दबाकर इस्तेमाल किए जाने वाले शॉर्टकट भी कहा जाता है) बनाए जा सकते हैं.

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

Chords के लिए कीबोर्ड शॉर्टकट

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

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

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

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

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

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

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