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

Kayce Basques

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

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

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

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

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

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

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

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

चित्र 2. लेआउट शिफ़्ट.

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

ऑडिट पैनल में लाइटहाउस 5.1

ऑडिट पैनल अब Lighthouse 5.1 चला रहा है. नए ऑडिट में ये शामिल हैं:

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

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

लाइटहाउस 5.1 के नोड और सीएलआई वर्शन में तीन नई खास सुविधाएं हैं:

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

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

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

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

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

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

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

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

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

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

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

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

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

छठी इमेज. बाईं ओर मौजूद Chrome के पुराने वर्शन में,#color ऑब्जेक्ट है, जबकि दाहिनी ओर मौजूद नए वर्शन में ऐसा है.

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

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

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

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

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

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

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

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

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

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

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

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