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

Kayce Basques

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

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

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

चित्र 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 के Node और CLI वर्शन में तीन नई मुख्य सुविधाएं हैं, जिन्हें देखना ज़रूरी है:

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

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

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

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

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

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

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

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

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

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

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

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

Chromium से जुड़ी समस्या #935267

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

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

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

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

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

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

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

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

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

Chromium से जुड़ी समस्या #927726

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

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

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

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

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

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