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

Kayce Basques
Kayce Basques
X GitHub

किसी एलिमेंट की स्टाइल कॉपी करना

किसी डीओएम नोड की सीएसएस को क्लिपबोर्ड पर कॉपी करने के लिए, डीओएम ट्री में मौजूद किसी नोड पर राइट क्लिक करें.

स्टाइल कॉपी करें.

इमेज 1. एलिमेंट की स्टाइल कॉपी करें.

प्रेरणा देने के लिए, ऐडम आर्गिल और VisBug का धन्यवाद.

लेआउट शिफ़्ट को विज़ुअलाइज़ करना

मान लें कि आपको अपनी पसंदीदा वेबसाइट पर कोई समाचार लेख पढ़ना है. पेज पढ़ते समय, कॉन्टेंट इधर-उधर होने की वजह से आपको पढ़ने में परेशानी हो रही है. इस समस्या को लेआउट शिफ़्टिंग कहा जाता है. आम तौर पर, ऐसा तब होता है, जब इमेज और विज्ञापन लोड हो जाते हैं. पेज पर इमेज और विज्ञापनों के लिए कोई जगह रिज़र्व नहीं की गई है. इसलिए, ब्राउज़र को अन्य सभी कॉन्टेंट को नीचे की ओर ले जाना होगा, ताकि उनके लिए जगह बन सके. इसका हल, प्लेसहोल्डर का इस्तेमाल करना है.

DevTools अब लेआउट शिफ़्ट का पता लगाने में आपकी मदद कर सकता है:

  1. कमांड मेन्यू खोलें.
  2. Rendering टाइप करना शुरू करें.
  3. रेंडरिंग दिखाएं निर्देश चलाएं.
  4. लेआउट शिफ़्ट वाले हिस्से चेकबॉक्स को चुनें. किसी पेज से इंटरैक्ट करते समय, लेआउट शिफ़्ट को नीले रंग से हाइलाइट किया जाता है.

लेआउट शिफ़्ट.

इमेज 2. लेआउट शिफ़्ट.

Chromium की समस्या #961846

ऑडिट पैनल में Lighthouse 5.1

ऑडिट पैनल अब Lighthouse 5.1 का इस्तेमाल कर रहा है. नए ऑडिट में ये शामिल हैं:

  • मान्य apple-touch-icon उपलब्ध कराता हो. इसकी मदद से यह पता चलता है कि किसी PWA को iOS की होम स्क्रीन पर जोड़ा जा सकता है या नहीं.
  • अनुरोधों की संख्या और फ़ाइल साइज़ कम रखें. यह अलग-अलग कैटगरी के लिए, नेटवर्क अनुरोधों और फ़ाइल साइज़ की कुल संख्या की रिपोर्ट करता है. जैसे, दस्तावेज़, स्क्रिप्ट, स्टाइलशीट, इमेज वगैरह.
  • मैक्सिमम पोटेंशियल फ़र्स्ट इनपुट डिले. इस मेट्रिक से, किसी व्यक्ति के पेज से पहली बार इंटरैक्ट करने और ब्राउज़र के उस इंटरैक्शन का जवाब देने के बीच लगने वाले ज़्यादा से ज़्यादा समय का पता चलता है. ध्यान दें कि यह मेट्रिक, अनुमानित इनपुट लेटेन्सी मेट्रिक की जगह लेती है. मैक्सिमम पोटेंशियल फ़र्स्ट इनपुट डिले, परफ़ॉर्मेंस कैटगरी के स्कोर में शामिल नहीं होता.

ऑडिट पैनल का नया यूज़र इंटरफ़ेस (यूआई).

इमेज 3. ऑडिट पैनल का नया यूज़र इंटरफ़ेस (यूआई).

Lighthouse 5.1 के नोड और सीएलआई वर्शन में तीन नई सुविधाएं जोड़ी गई हैं. इनके बारे में यहां बताया गया है:

  • परफ़ॉर्मेंस बजट. अनुरोधों की संख्या और फ़ाइल साइज़ तय करें, ताकि आपकी साइट की परफ़ॉर्मेंस समय के साथ कम न हो.
  • प्लगिन. अपने कस्टम ऑडिट की मदद से, Lighthouse की सुविधाओं का ज़्यादा से ज़्यादा फ़ायदा पाएं.
  • स्टैक पैक. खास टेक्नोलॉजी स्टैक के हिसाब से ऑडिट जोड़ें. WordPress स्टैक पैक को सबसे पहले शिप किया गया था. React और AMP स्टैक पैक पर काम चल रहा है.

ओएस की थीम सिंक करना

अगर आपके ओएस में गहरे रंग वाली थीम का इस्तेमाल किया जा रहा है, तो DevTools अब अपने-आप गहरे रंग वाली थीम पर स्विच हो जाता है.

ब्रेकपॉइंट एडिटर खोलने के लिए कीबोर्ड शॉर्टकट

ब्रेकपॉइंट एडिटर खोलने के लिए, सोर्स पैनल के एडिटर पर फ़ोकस करते समय Control+Alt+B या Command+Option+B (Mac) दबाएं. लॉगपॉइंट और कंडिशनल ब्रेकपॉइंट बनाने के लिए, ब्रेकपॉइंट एडिटर का इस्तेमाल करें.

ब्रेकपॉइंट एडिटर.

इमेज 4. ब्रेकपॉइंट एडिटर.

नेटवर्क पैनल में प्रीफ़ेच कैश मेमोरी

नेटवर्क पैनल के साइज़ कॉलम में अब (prefetch cache) दिखता है. ऐसा तब होता है, जब किसी रिसोर्स को प्रीफ़ेच कैश मेमोरी से लोड किया गया हो. प्रीफ़ेच, वेब प्लैटफ़ॉर्म की एक नई सुविधा है. इससे पेज को तेज़ी से लोड किया जा सकता है. Can I use... रिपोर्ट के मुताबिक, जुलाई 2019 तक यह सुविधा दुनिया भर के 83.33% ब्राउज़र पर काम करती है.

साइज़ कॉलम में दिखाया गया है कि संसाधन, प्रीफ़ेच कैश मेमोरी से आए हैं.

इमेज 5. साइज़ कॉलम से पता चलता है कि prefetch2.html और prefetch2.css, (prefetch cache) से मिले हैं.

इसे आज़माने के लिए, प्रीफ़ेच डेमो देखें.

Chromium की समस्या #935267

ऑब्जेक्ट देखते समय निजी प्रॉपर्टी

Console अब ऑब्जेक्ट की झलक में निजी क्लास फ़ील्ड दिखाती है.

किसी ऑब्जेक्ट की जांच करते समय, Console अब '#color' जैसे प्राइवेट फ़ील्ड दिखाता है.

इमेज 6. बाईं ओर मौजूद Chrome के पुराने वर्शन में, ऑब्जेक्ट की जांच करते समय #color फ़ील्ड नहीं दिखता है. वहीं, दाईं ओर मौजूद नए वर्शन में यह फ़ील्ड दिखता है.

ऐप्लिकेशन पैनल में सूचनाएं और पुश मैसेज

ऐप्लिकेशन पैनल के बैकग्राउंड सेवाएं सेक्शन में अब पुश मैसेज और सूचनाएं पाने की सुविधा काम करती है. पुश मैसेज तब मिलते हैं, जब कोई सर्वर किसी सर्विस वर्कर को जानकारी भेजता है. सूचनाएं तब दिखती हैं, जब कोई सर्विस वर्कर या पेज स्क्रिप्ट, उपयोगकर्ता को जानकारी दिखाती है.

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

सूचनाएं और पुश मैसेज के नए पैन.

इमेज 7. ऐप्लिकेशन पैनल में, पुश मैसेज और सूचनाएं दिखाने वाले नए पैन.

Chromium की समस्या #927726

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

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

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

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

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

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