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

Jecelyn Yeen

DevTools को तेज़ी से चालू करना

JavaScript कंपाइल करने में अब DevTools को 6.9 सेकंड के बजाय 5 सेकंड लगते हैं. इसका मतलब है कि DevTools अब 37% ज़्यादा तेज़ी से शुरू होता है! 🎉

टीम ने कुछ ऑप्टिमाइज़ेशन किए हैं, ताकि स्टार्टअप के दौरान सीरियलाइज़ेशन, पार्सिंग, और डिसीरियलाइज़ेशन की परफ़ॉर्मेंस में होने वाले खर्च को कम किया जा सके.

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

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 में सीओआरएस गड़बड़ियों के लिए सिर्फ़ सामान्य "(पूरी नहीं हुई)" स्टेटस दिखता था.

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

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

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

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

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

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

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

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

क्रॉस-ऑरिजिन की जानकारी

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

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

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

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

वेब वर्कर की जानकारी

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

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

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

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

ओपनर फ़्रेम की जानकारी

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

Service Workers पैनल से नेटवर्क पैनल खोलना

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

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

Service Workers से नेटवर्क पैनल खोलना

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 में, केबी (1,000 बाइट) और किबी (1,024 बाइट) को एक साथ दिखाया जाता था. उदाहरण के लिए, नेटवर्क पैनल में पहले "kB" लेबल का इस्तेमाल किया जाता था, लेकिन कैलकुलेशन के लिए KiB का इस्तेमाल किया जाता था. इससे ग़ैर-ज़रूरी उलझन पैदा होती थी.

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

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

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

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

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

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

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

फ़्लेक्सबॉक्स डीबग करने वाले टूल जल्द आ रहे हैं!

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

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

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

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

  • flex-direction
  • direction
  • writing-mode

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

सीएसएस फ़्लेक्स की गड़बड़ी को डीबग करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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