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

Kayce Basques

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

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

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

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

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

  1. लाइव एक्सप्रेशन बनाएं लाइव एक्सप्रेशन बनाना पर क्लिक करें. इसके बाद, लाइव एक्सप्रेशन का यूआई खुलता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • फ़िलहाल, जिस नोड पर फ़ोकस है उसे हाइलाइट करने के लिए 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 इवेंट.

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

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

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

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

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

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

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