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

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) को ग्लोबल खोलने के लिए खोजें. इसे Command मेन्यू के ज़रिए भी खोला जा सकता है.

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

जब 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"
});

ऑडिट पैनल के अपडेट

नए ऑडिट

ऑडिट पैनल में 2 नए ऑडिट शामिल हैं, जिनमें ये शामिल हैं:

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

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

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

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

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

ट्रेस देखें

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

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

अनंत लूप बंद करें

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

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

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

प्रदर्शन टैब में उपयोगकर्ता समय

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

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

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

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

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

नौवीं इमेज. बाईं ओर पुराने यूज़र इंटरफ़ेस (यूआई) में, 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 Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!

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

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

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

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

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