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

Kayce Basques

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

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

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

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

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

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

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

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

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

पुराना और नया यूज़र इंटरफ़ेस (यूआई).

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

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

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

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

सीएसएस वैरिएबल की कलर वैल्यू का उदाहरण.

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

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

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

किसी अनुरोध के लिए, 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. Sources पैनल खोलें.
  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 से जुड़ी होती है.

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

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

DevTools की दो विंडो एक साथ हैं. इनमें नाम बदलने की प्रोसेस दिख रही है.

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

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

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

ब्रेकपॉइंट के नए आइकॉन और प्रोग्राम को चलाने की मौजूदा लाइन की कलर स्कीम का स्क्रीनशॉट.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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