इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Kayce Basques

आपका फिर से स्वागत है! हमारे पिछले अपडेट को करीब 12 हफ़्ते हो गए थे, जो Chrome 68 के लिए था. हमने Chrome 69 को छोड़ दिया क्योंकि हमारे पास पोस्ट को वारंटी देने के लिए काफ़ी नई सुविधाएं या यूज़र इंटरफ़ेस (यूआई) बदलाव नहीं थे.

Chrome 70 में DevTools में आने वाली नई सुविधाओं और बड़े बदलावों में ये शामिल हैं:

कंसोल में लाइव एक्सप्रेशन.
ईगर इवैलुएशन के दौरान डीओएम नोड को हाइलाइट करें.
परफ़ॉर्मेंस पैनल को ऑप्टिमाइज़ करना.
ज़्यादा भरोसेमंद डीबग करना.
कमांड मेन्यू से, नेटवर्क थ्रॉटलिंग चालू करें.
शर्त के साथ ब्रेकपॉइंट अपने-आप पूरा होने की सुविधा.
AudioContext इवेंट के बारे में जानें.
ndb की मदद से Node.js ऐप्लिकेशन को डीबग करना.
बोनस सलाह: User Timing API की मदद से असल दुनिया के उपयोगकर्ता इंटरैक्शन को मेज़र करें.

इस दस्तावेज़ को पढ़ें या इसका वीडियो वर्शन देखें:

कंसोल में लाइव एक्सप्रेशन

अगर आपको रीयल-टाइम में किसी लाइव एक्सप्रेशन की वैल्यू को मॉनिटर करना है, तो उसे अपने कंसोल में सबसे ऊपर पिन करें.

लाइव एक्सप्रेशन बनाएं पर क्लिक करें . ऐसा करने पर, लाइव एक्सप्रेशन यूज़र इंटरफ़ेस (यूआई) खुलता है.

पहला डायग्राम. लाइव एक्सप्रेशन का यूज़र इंटरफ़ेस (यूआई)
वह एक्सप्रेशन टाइप करें जिसे आपको मॉनिटर करना है.

दूसरा डायग्राम. लाइव एक्सप्रेशन यूज़र इंटरफ़ेस (यूआई) में Date.now() टाइप किया जा रहा है
अपने एक्सप्रेशन को सेव करने के लिए, लाइव एक्सप्रेशन यूज़र इंटरफ़ेस (यूआई) के बाहर क्लिक करें.

तीसरी इमेज. सेव किया गया लाइव एक्सप्रेशन

लाइव एक्सप्रेशन की वैल्यू हर 250 मिलीसेकंड में अपडेट होती हैं.

ईगर इवैलुएशन के दौरान डीओएम नोड को हाइलाइट करना

कंसोल में डीओएम नोड के तौर पर आकलन करने वाला एक्सप्रेशन टाइप करें और ईगर इवैलुएशन अब व्यूपोर्ट में उस नोड को हाइलाइट करता है.

ध्यान दें: हाइलाइट किया गया नोड, टाइप करने पर ही अपडेट होता है. यह किसी इंटरवल पर अपडेट नहीं होता. उदाहरण के लिए, अगर document.activeElement टाइप किया जाता है, जो फ़ोकस किए गए एलिमेंट को ट्रैक करता है और फिर पेज पर टैब करता है, तो DevTools उस नोड को हाइलाइट करेगा जो असल में एक्सप्रेशन को टाइप करते समय चालू था.

कंसोल में document.activeElement टाइप करने के बाद, व्यूपोर्ट में एक नोड हाइलाइट हो जाता है.

चौथी इमेज. मौजूदा एक्सप्रेशन किसी नोड के रूप में आकलन करता है, इसलिए वह नोड व्यूपोर्ट में हाइलाइट हो जाता है

यहां कुछ एक्सप्रेशन दिए गए हैं जो आपके काम आ सकते हैं:

जिस नोड पर फ़िलहाल फ़ोकस है उसे हाइलाइट करने के लिए document.activeElement.
किसी आर्बिट्ररी नोड को हाइलाइट करने के लिए document.querySelector(s), जहां s एक सीएसएस सिलेक्टर है. यह DOM ट्री में किसी नोड पर कर्सर घुमाने के बराबर है.
फ़िलहाल, डीओएम ट्री में जो नोड चुना गया है उसे हाइलाइट करने के लिए $0.
चुने गए नोड के पैरंट को हाइलाइट करने के लिए $0.parentElement.

परफ़ॉर्मेंस पैनल को ऑप्टिमाइज़ करना

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

पांचवी इमेज. परफ़ॉर्मेंस डेटा को प्रोसेस और लोड करना

डीबग करने का ज़्यादा भरोसेमंद तरीका

Chrome 70 कुछ ऐसी गड़बड़ियों को ठीक करता है जिनकी वजह से ब्रेकपॉइंट गायब हो रहे थे या ट्रिगर नहीं हो रहे थे.

इससे सोर्स मैप से जुड़ी गड़बड़ियां भी ठीक हो जाती हैं. कुछ TypeScript उपयोगकर्ता, कोड का इस्तेमाल करते समय DevTools को एक खास TypeScript फ़ाइल को अनदेखा करने का निर्देश देंगे. इसके बजाय, DevTools पूरी तरह से बंडल की गई JavaScript फ़ाइल को अनदेखा कर देगा. इन सुधारों से उस समस्या को भी हल किया जा सकता है जिसकी वजह से सोर्स पैनल आम तौर पर धीरे काम कर रहा था.

निर्देश मेन्यू से, नेटवर्क थ्रॉटलिंग चालू करें

अब आप कमांड मेन्यू से, नेटवर्क थ्रॉटलिंग को तेज़ 3G या धीमे 3G पर सेट कर सकते हैं.

आप कमांड मेन्यू में नेटवर्क थ्रॉटलिंग के निर्देश देख सकते हैं.

छठी इमेज. कमांड मेन्यू में नेटवर्क थ्रॉटलिंग के निर्देश

शर्त के हिसाब से ब्रेकपॉइंट अपने-आप पूरा होने की सुविधा

अपने शर्त ब्रेकपॉइंट एक्सप्रेशन को तेज़ी से टाइप करने के लिए, ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें.

ऑटोकंप्लीट की सुविधा वाला यूज़र इंटरफ़ेस (यूआई)

सातवीं इमेज. ऑटोकंप्लीट की सुविधा वाला यूज़र इंटरफ़ेस (यूआई)

क्या आपको पता है? CodeMirror की मदद से ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) उपलब्ध है. कंसोल को भी बेहतर बनाया जा सकता है.

AudioContext इवेंट के लिए ब्रेक

AudioContext लाइफ़साइकल इवेंट हैंडलर की पहली लाइन को रोकने के लिए, इवेंट लिसनर ब्रेकपॉइंट पैनल का इस्तेमाल करें.

AudioContext, Web Audio API का हिस्सा है. इसका इस्तेमाल, ऑडियो को प्रोसेस करने और सिंथेसाइज़ करने के लिए किया जा सकता है.

इवेंट लिसनर ब्रेकपॉइंट पैनल में AudioContext इवेंट.

आठवीं इमेज. इवेंट लिसनर ब्रेकपॉइंट पैनल में ऑडियोकॉन्टेक्स्ट इवेंट

ndb की मदद से Node.js ऐप्लिकेशन को डीबग करना

ndb, Node.js ऐप्लिकेशन के लिए एक नया डीबगर है. डीबग करने की सामान्य सुविधाओं के साथ-साथ, आपको DevTools के ज़रिए मिलने वाली, ndb भी ये सुविधाएं मिलती हैं:

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

ndb यूज़र इंटरफ़ेस (यूआई).

नौवीं इमेज. ndb यूज़र इंटरफ़ेस (यूआई)

ज़्यादा जानने के लिए ndb की README देखें.

बोनस सलाह: User Timing API की मदद से असल दुनिया के उपयोगकर्ता इंटरैक्शन को मेज़र करें

क्या आपको यह मेज़र करना है कि असल उपयोगकर्ता आपके पेजों पर अहम गतिविधियों को पूरा करने में कितना समय लेते हैं? अपने कोड में User Timing API का इस्तेमाल करें.

उदाहरण के लिए, मान लें कि अपने कॉल-टू-ऐक्शन (सीटीए) बटन पर क्लिक करने से पहले, आपको यह जानना था कि कोई उपयोगकर्ता आपके होम पेज पर कितना समय बिताता है. सबसे पहले, आपको किसी पेज लोड इवेंट से जुड़े इवेंट हैंडलर में, यात्रा की शुरुआत की जानकारी दिखानी होगी, जैसे कि DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

इसके बाद, आपको प्रोसेस के खत्म होने का निशान लगाना होगा और बटन पर क्लिक करने पर इसकी अवधि का हिसाब लगाना होगा:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

अपने मेज़रमेंट को भी एक्सट्रैक्ट किया जा सकता है, जिससे पहचान और एग्रीगेट किया गया डेटा इकट्ठा करने के लिए, उन्हें आंकड़ों की सेवा पर आसानी से भेजा जा सकता है:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools आपकी परफ़ॉर्मेंस रिकॉर्डिंग के उपयोगकर्ता समय सेक्शन में, आपके उपयोगकर्ता समय के मेज़रमेंट को अपने-आप मार्क अप करता है.

उपयोगकर्ता समय सेक्शन.

10वीं इमेज. उपयोगकर्ता समय सेक्शन

यह कोड को डीबग या ऑप्टिमाइज़ करते समय भी काम आता है. उदाहरण के लिए, अगर आपको अपनी लाइफ़साइकल के किसी खास चरण को ऑप्टिमाइज़ करना है, तो अपने लाइफ़साइकल फ़ंक्शन की शुरुआत और आखिर में window.performance.mark() को कॉल करें. प्रतिक्रिया देने के लिए, डेवलपमेंट मोड का इस्तेमाल करती है.

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 रद्द कर दिया गया है.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस मेट्रिक को विज़ुअलाइज़ करना
डीओएम ट्री में टेक्स्ट नोड हाइलाइट करें
डीओएम नोड में JS पाथ कॉपी करें
ऑडिट पैनल अपडेट, जिसमें एक नया ऑडिट शामिल है जो कमांड मेन्यू से ऑडिट पैनल को ऐक्सेस करने के लिए JS लाइब्रेरी और नए कीवर्ड का पता लगाता है
बोनस के लिए सलाह: मीडिया क्वेरी की जांच करने के लिए डिवाइस मोड का इस्तेमाल करें (वीडियो)

Chrome 71

डीओएम नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन के नतीजे पर कर्सर घुमाएं
डीओएम नोड को ग्लोबल वैरिएबल के तौर पर स्टोर करना
शुरू करने वाले और प्राथमिकता की जानकारी अब HAR इंपोर्ट और एक्सपोर्ट में
मुख्य मेन्यू में जाकर निर्देश मेन्यू ऐक्सेस करना
पिक्चर में पिक्चर ब्रेकपॉइंट
बोनस के लिए सलाह: कंसोल में नोड के ट्रिगर हुए इवेंट को लॉग करने के लिए, monitorEvents() का इस्तेमाल करें (वीडियो)

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

परफ़ॉर्मेंस मॉनिटर
कंसोल साइडबार
Console के मिलते-जुलते मैसेज का ग्रुप बनाना
बोनस के लिए सलाह: गलत क्लास को टॉगल करें (वीडियो)