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

Kayce Basques

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

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

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

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

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

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

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

   

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

2. वह एक्सप्रेशन लिखें जिसकी आपको निगरानी करनी है.

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AudioContext इवेंट के बारे में ब्रेक लें

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

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

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

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

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

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

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

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

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