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

Kayce Basques

Chrome 67 में DevTools के लिए उपलब्ध नई सुविधाओं और मुख्य बदलावों में ये शामिल हैं:

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

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

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

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

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

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

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

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

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

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

ग्लोबल सर्च खोलने के लिए, 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"
});

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

नए ऑडिट

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

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

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

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

• डेस्कटॉप व्यू पोर्ट और उपयोगकर्ता एजेंट की सेटिंग को बनाए रखता है. दूसरे शब्दों में कहें, तो Audits पैनल को मोबाइल डिवाइस का सिम्युलेशन करने से रोका जा सकता है.
• नेटवर्क और सीपीयू थ्रॉटलिंग की सुविधा बंद करें.
• ऑडिट के दौरान, लोकल स्टोरेज और 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 की वजह से मेमोरी के बंटवारे को दिखाती है. सही वैल्यू, उस वीएम इंस्टेंस की वजह से असाइन की गई सभी ओएस मेमोरी को दिखाती है. दाईं ओर मौजूद वैल्यू में बाईं ओर मौजूद वैल्यू शामिल होती है. 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 में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.