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

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

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

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

बॉटम-अप टैब में, उपयोगकर्ता के समय से जुड़े मेज़र देखना.

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

आम तौर पर, अब कोई भी सेक्शन (मुख्य थ्रेड, User Timing, GPU, 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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.