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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

चित्र 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

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

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

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

छठी इमेज. बाईं ओर मौजूद 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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.