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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

जब सीएसएस कलर प्रॉपर्टी, जैसे कि 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 वीएम इंस्टेंस साफ़ तौर पर दिखते हैं. पहले की तरह, उन्हें टारगेट ड्रॉपडाउन मेन्यू के पीछे नहीं छिपाया जाता.

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

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

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

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

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

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

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

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

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

सुरक्षा पैनल अब प्रमाणपत्र पारदर्शिता की जानकारी देता है.

इमेज 12. सुरक्षा पैनल में प्रमाणपत्र पारदर्शिता की जानकारी

परफ़ॉर्मेंस पैनल में साइट आइसोलेशन की सुविधा

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

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

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

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

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

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

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

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

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