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

Kayce Basques

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

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

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

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

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

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

1. लाइव इमोजी बनाएं पर क्लिक करें. Live Expression का यूज़र इंटरफ़ेस (यूआई) खुल जाएगा.

   

   पहली इमेज. लाइव एक्सप्रेशन का यूज़र इंटरफ़ेस (यूआई)

2. वह एक्सप्रेशन टाइप करें जिसे आपको मॉनिटर करना है.

   

   दूसरी इमेज. लाइव एक्सप्रेशन यूज़र इंटरफ़ेस (यूआई) में Date.now() टाइप करना

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

   

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

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

तुरंत जांच के दौरान डीओएम नोड हाइलाइट करना

Console में कोई ऐसा एक्सप्रेशन टाइप करें जो DOM नोड का आकलन करता हो. इसके बाद, Eager Evaluation, व्यूपोर्ट में उस नोड को हाइलाइट कर देगा.

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

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

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

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

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

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

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

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

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

कमांड मेन्यू से नेटवर्क को कंट्रोल करने की सुविधा चालू करना

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

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

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

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

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

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

AudioContext इवेंट पर ब्रेक

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

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

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

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

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

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

नौवीं इमेज. 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() को कॉल करें. React, डेवलपमेंट मोड में ऐसा करता है.

झलक वाले चैनल डाउनलोड करना

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

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

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

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

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

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