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

Kayce Basques

Chrome 67 में DevTools में नई सुविधाएं और बड़े बदलाव किए जा रहे हैं. इनमें ये शामिल हैं:

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

प्रॉडक्ट की जानकारी का वीडियो वर्शन:

सभी नेटवर्क हेडर और रिस्पॉन्स में खोजें

नेटवर्क पैनल खोलें. इसके बाद, नया नेटवर्क सर्च पैनल खोलने के लिए, Command+F (Mac) या Control+F (Windows, Linux, ChromeOS) दबाएं. DevTools, आपकी दी गई क्वेरी के लिए सभी नेटवर्क अनुरोधों के हेडर और मुख्य हिस्सों को खोजता है.

पहली इमेज. नए नेटवर्क सर्च पैनल की मदद से, cache-control टेक्स्ट खोजना

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

दूसरी इमेज. नेटवर्क सर्च पैनल में रेगुलर एक्सप्रेशन क्वेरी.

खोज पैनल के यूज़र इंटरफ़ेस (यूआई) से जुड़े अपडेट

ग्लोबल सर्च पैनल का यूज़र इंटरफ़ेस (यूआई), अब नए नेटवर्क सर्च पैनल के यूआई से मेल खाता है. अब यह स्कैन करने में आसानी के लिए, नतीजों को प्रीटी-प्रिंट भी करता है.

तीसरी इमेज. बाईं ओर पुराना यूज़र इंटरफ़ेस (यूआई) और दाईं ओर नया यूज़र इंटरफ़ेस (यूआई)

ग्लोबल खोज खोलने के लिए, Command+Option+F (Mac) या Control+Shift+F (Windows, Linux, ChromeOS) दबाएं. इसे कमांड मेन्यू से भी खोला जा सकता है.

स्टाइल पैनल में, सीएसएस वैरिएबल की वैल्यू की झलक

जब background-color या color जैसी सीएसएस कलर प्रॉपर्टी की वैल्यू को सीएसएस वैरिएबल पर सेट किया जाता है, तो DevTools अब उस रंग की झलक दिखाता है.

चौथी इमेज. बाईं ओर मौजूद पुराने यूज़र इंटरफ़ेस (यूआई) में, color: var(--main-color) के बगल में रंग की झलक नहीं दिख रही है. वहीं, दाईं ओर मौजूद नए यूज़र इंटरफ़ेस (यूआई) में,

फ़ेच के तौर पर कॉपी करें

किसी नेटवर्क अनुरोध पर राइट क्लिक करें. इसके बाद, उस अनुरोध के लिए fetch() के बराबर का कोड अपने क्लिपबोर्ड पर कॉपी करने के लिए, कॉपी करें > फ़ेच के तौर पर कॉपी करें चुनें.

पांचवीं इमेज. किसी अनुरोध के लिए, fetch() के बराबर का कोड कॉपी करना

DevTools इस तरह का कोड जनरेट करता है:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

ऑडिट पैनल से जुड़े अपडेट

नए ऑडिट

ऑडिट पैनल में दो नए ऑडिट हैं. इनमें ये शामिल हैं:

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

कॉन्फ़िगरेशन के नए विकल्प

अब ऑडिट पैनल को कॉन्फ़िगर करके, ये काम किए जा सकते हैं:

• डेस्कटॉप व्यूपोर्ट और उपयोगकर्ता एजेंट की सेटिंग को बनाए रखें. दूसरे शब्दों में, ऑडिट पैनल को मोबाइल डिवाइस को सिम्युलेट करने से रोका जा सकता है.
• नेटवर्क और सीपीयू थ्रॉटलिंग बंद करें.
• सभी ऑडिट के दौरान, LocalStorage और IndexedDB जैसे स्टोरेज को सुरक्षित रखना.

छठी इमेज. ऑडिट कॉन्फ़िगरेशन के नए विकल्प

ट्रेस देखना

किसी पेज का ऑडिट करने के बाद, परफ़ॉर्मेंस पैनल में, पेज लोड होने की परफ़ॉर्मेंस का डेटा देखने के लिए, ट्रैस देखें पर क्लिक करें.

सातवीं इमेज. ट्रेस देखें बटन

इनफ़ाइनाइट लूप को रोकना

अगर for लूप, do...while लूप या रेक्यूर्सन का इस्तेमाल बहुत ज़्यादा किया जाता है, तो हो सकता है कि साइट डेवलप करते समय आपने गलती से अनलिमिटेड लूप चलाया हो. अनलिमिटेड लूप को रोकने के लिए, अब ये काम किए जा सकते हैं:

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

ऊपर दिए गए वीडियो में, setInterval() टाइमर की मदद से घड़ी को अपडेट किया जा रहा है. कंटिन्यू पर क्लिक करने से, do...while लूप कभी नहीं रुकता. इंटरवल फिर से शुरू हो जाता है, क्योंकि मौजूदा JavaScript कॉल रोकें को चुनने के समय यह चल नहीं रहा था.

परफ़ॉर्मेंस टैब में उपयोगकर्ता के समय की जानकारी

परफ़ॉर्मेंस रिकॉर्डिंग देखते समय, उपयोगकर्ता के इंतज़ार का समय सेक्शन पर क्लिक करें. इससे, खास जानकारी, बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब में उपयोगकर्ता के इंतज़ार का समय के मेज़र देखे जा सकते हैं.

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

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

मेमोरी पैनल में JavaScript के लिए वीएम इंस्टेंस चुनना

मेमोरी पैनल में अब किसी पेज से जुड़े सभी JavaScript VM इंस्टेंस की सूची साफ़ तौर पर दिखती है. पहले, ये इंस्टेंस टारगेट ड्रॉपडाउन मेन्यू के पीछे छिपे रहते थे.

नौवीं इमेज. बाईं ओर मौजूद पुराने यूज़र इंटरफ़ेस (यूआई) में, JavaScript वीएम इंस्टेंस, टारगेट ड्रॉपडाउन मेन्यू के पीछे छिपे होते हैं. वहीं, दाईं ओर मौजूद नए यूज़र इंटरफ़ेस (यूआई) में, ये JavaScript वीएम इंस्टेंस चुनें टेबल में दिखते हैं

developers.google.com इंस्टेंस के बगल में दो वैल्यू हैं: 8.7 MB और 13.3 MB. बाईं ओर मौजूद वैल्यू, JavaScript की वजह से एलोकेट की गई मेमोरी दिखाती है. सही वैल्यू, उस VM इंस्टेंस की वजह से एलोकेट की गई सभी ओएस मेमोरी दिखाती है. दाईं ओर दी गई वैल्यू में बाईं ओर दी गई वैल्यू शामिल होती है. Chrome के टास्क मैनेजर में, बाईं ओर मौजूद वैल्यू JavaScript Memory से जुड़ी होती है और दाईं ओर मौजूद वैल्यू Memory Footprint से जुड़ी होती है.

नेटवर्क टैब का नाम बदलकर पेज टैब कर दिया गया

सोर्स पैनल में, नेटवर्क टैब को अब पेज टैब कहा जाता है.

10वीं इमेज. बाईं ओर मौजूद पुराने यूज़र इंटरफ़ेस (यूआई) में, पेज के संसाधनों को दिखाने वाले टैब को नेटवर्क कहा जाता है. वहीं, दाईं ओर मौजूद नए यूज़र इंटरफ़ेस (यूआई) में, इसे पेज कहा जाता है

गहरे रंग वाली थीम से जुड़े अपडेट

Chrome 67 में, गहरे रंग वाली थीम की कलर स्कीम में कुछ छोटे बदलाव किए गए हैं. उदाहरण के लिए, ब्रेकपॉइंट आइकॉन और प्रोग्राम के मौजूदा स्टेटस की लाइन अब हरे रंग की हो गई है.

11वीं इमेज. नए ब्रेकपॉइंट आइकॉन और मौजूदा लाइन ऑफ़ एक्सीक्यूशन की कलर स्कीम का स्क्रीनशॉट

सुरक्षा पैनल में सर्टिफ़िकेट पारदर्शिता

सुरक्षा पैनल में अब सर्टिफ़िकेट पारदर्शिता की जानकारी दिखती है.

12वीं इमेज. सिक्योरिटी पैनल में, सर्टिफ़िकेट पारदर्शिता की जानकारी

परफ़ॉर्मेंस पैनल में साइट आइसोलेशन

अगर आपने साइट आइसोलेशन की सुविधा चालू की है, तो परफ़ॉर्मेंस पैनल में अब हर प्रोसेस के लिए फ़्लेम चार्ट दिखेगा. इससे, आपको यह पता चलेगा कि हर प्रोसेस कितनी मेहनत कर रही है.

13वीं इमेज. परफ़ॉर्मेंस रिकॉर्डिंग में, हर प्रोसेस के लिए फ़्लेम चार्ट

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

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

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

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

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

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

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