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

Kayce Basques

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

Console में ऐसा एक्सप्रेशन टाइप करें जो किसी DOM नोड का आकलन करता हो. अब तुरंत आकलन करने की सुविधा, व्यूपोर्ट में उस नोड को हाइलाइट करती है.

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

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

• document.activeElement का इस्तेमाल, उस नोड को हाइलाइट करने के लिए किया जाता है जिस पर फ़िलहाल फ़ोकस है.
• document.querySelector(s) का इस्तेमाल किसी नोड को हाइलाइट करने के लिए किया जाता है. यहां s एक सीएसएस सिलेक्टर है. यह डीओएम ट्री में किसी नोड पर कर्सर घुमाने के बराबर है.
• $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 का 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, परफ़ॉर्मेंस रिकॉर्डिंग के User Timing सेक्शन में, User Timing मेज़रमेंट को अपने-आप मार्क अप करता है.

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

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

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

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

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

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

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

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

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