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

Kayce Basques
Kayce Basques
X GitHub

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

इसके बारे में यहां पढ़ें या नीचे दिए गए रिलीज़ नोट का वीडियो देखें.

नेटवर्क पैनल में स्क्रिप्ट को अनदेखा करें

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

पहले, अगर आपका फ़्रेमवर्क नेटवर्क अनुरोधों को रैपर में रैप करता था, तो शुरुआत करने वाला कॉलम ज़्यादा मददगार नहीं होता था. सभी नेटवर्क अनुरोध, रैपर कोड की एक ही लाइन पर पॉइंट किए गए हों.

इस स्थिति में, आपको उस ऐप्लिकेशन कोड को देखना होगा जिसकी वजह से अनुरोध किया गया है. अब ऐसा किया जा सकता है:

  1. शुरू करने वाला कॉलम पर कर्सर घुमाएं. अनुरोध करने वाले कॉल स्टैक की जानकारी, पॉप-अप में दिखती है.
  2. उस कॉल पर राइट क्लिक करें जिसे आपको कॉल शुरू करने वाले व्यक्ति के नतीजों से छिपाना है.
  3. नज़रअंदाज़ किए जाने वाले कोड की सूची में स्क्रिप्ट जोड़ें को चुनें. शुरू करने वाला कॉलम में अब स्क्रिप्ट से किए गए उन सभी कॉल को छिपा दिया जाता है जिन्हें आपने अनदेखा किया है.

'requests.js' को अनदेखा किया जा रहा है.

पहली इमेज. requests.js को अनदेखा किया जा रहा है

सेटिंग में जाकर, नज़रअंदाज़ की गई स्क्रिप्ट की सूची टैब में जाकर, नज़रअंदाज़ की गई स्क्रिप्ट मैनेज करें.

स्क्रिप्ट को अनदेखा करने के बारे में ज़्यादा जानने के लिए, किसी स्क्रिप्ट या स्क्रिप्ट के पैटर्न को अनदेखा करना लेख पढ़ें.

'झलक' और 'जवाब' टैब में, कोड को बेहतर तरीके से फ़ॉर्मैट करना

नेटवर्क पैनल में मौजूद झलक टैब, अब डिफ़ॉल्ट रूप से संसाधनों को सुंदर तरीके से प्रिंट करता है. ऐसा तब होता है, जब उसे पता चलता है कि उन संसाधनों को छोटा किया गया है.

'झलक' टैब में, analytics.js के कॉन्टेंट को डिफ़ॉल्ट रूप से सुंदर तरीके से प्रिंट किया जाता है.

दूसरी इमेज. झलक टैब में, analytics.js के कॉन्टेंट को डिफ़ॉल्ट रूप से सुंदर तरीके से प्रिंट किया जाता है

किसी संसाधन का अनमिनिफ़ाइड वर्शन देखने के लिए, जवाब टैब का इस्तेमाल करें. फ़ॉर्मैट करें बटन का इस्तेमाल करके, जवाब टैब में मौजूद संसाधनों को मैन्युअल तरीके से भी फ़ॉर्मैट किया जा सकता है.

फ़ॉर्मैट बटन की मदद से, analytics.js के कॉन्टेंट को मैन्युअल तरीके से प्रीटी-प्रिंट करना.

तीसरी इमेज. फ़ॉर्मैट बटन का इस्तेमाल करके, analytics.js के कॉन्टेंट को मैन्युअल तरीके से सुंदर बनाना

'झलक' टैब में एचटीएमएल कॉन्टेंट की झलक देखना

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

'झलक' टैब में एचटीएमएल की झलक देखना.

चौथी इमेज. झलक टैब में एचटीएमएल की झलक देखना

डिवाइस मोड में ज़ूम लेवल का अपने-आप ठीक होना

डिवाइस मोड में, ज़ूम ड्रॉपडाउन खोलें. इसके बाद, ज़ूम लेवल का अपने-आप ठीक होना चुनें. इससे डिवाइस को घुमाने पर, व्यूपोर्ट का साइज़ अपने-आप बदल जाएगा.

लोकल ओवरराइड की सुविधा अब एचटीएमएल में तय की गई कुछ स्टाइल के साथ काम करती है

जब Chrome 65 में DevTools ने लोकल ओवरराइड लॉन्च किया था, तब एक समस्या यह थी कि यह एचटीएमएल में तय की गई स्टाइल में हुए बदलावों को ट्रैक नहीं कर सकता था. उदाहरण के लिए, आंकड़ा 7 में, दस्तावेज़ के head में एक स्टाइल नियम है. यह h1 एलिमेंट के लिए font-weight: bold का एलान करता है.

एचटीएमएल में तय की गई स्टाइल का उदाहरण

पांचवीं इमेज. एचटीएमएल में तय की गई स्टाइल का उदाहरण

Chrome 65 में, अगर आपने DevTools के स्टाइल पैनल के ज़रिए font-weight एलान में बदलाव किया है, तो लोकल ओवरराइड उस बदलाव को ट्रैक नहीं करेगा. दूसरे शब्दों में कहें, तो अगली बार फिर से लोड करने पर स्टाइल वापस font-weight: bold पर आ जाएगी. हालांकि, Chrome 66 में इस तरह के बदलाव, पेज लोड होने पर भी बने रहते हैं.

बोनस सलाह: इवेंट लिसनर ब्रेकपॉइंट को ज़्यादा काम का बनाने के लिए, फ़्रेमवर्क स्क्रिप्ट को अनदेखा करें

Get Started With Debugging JavaScript वीडियो बनाते समय, कुछ दर्शकों ने टिप्पणी की थी कि इवेंट लिसनर ब्रेकपॉइंट, फ़्रेमवर्क पर बनाए गए ऐप्लिकेशन के लिए काम के नहीं होते. ऐसा इसलिए, क्योंकि इवेंट लिसनर को अक्सर फ़्रेमवर्क कोड में रैप किया जाता है. उदाहरण के लिए, आठवीं इमेज में मैंने DevTools में click ब्रेकपॉइंट सेट अप किया है. डेमो में मौजूद बटन पर क्लिक करने पर, DevTools लिसनर कोड की पहली लाइन में अपने-आप रुक जाता है. इस मामले में, यह Vue.js के रैपर कोड में लाइन 1802 पर रुक जाता है, जो ज़्यादा मददगार नहीं है.

क्लिक ब्रेकपॉइंट, Vue.js के रैपर कोड में रुक जाता है.

छठी इमेज. Vue.js के रैपर कोड में click ब्रेकपॉइंट रुक जाता है

Vue.js स्क्रिप्ट अलग फ़ाइल में है. इसलिए, इस click ब्रेकपॉइंट को ज़्यादा उपयोगी बनाने के लिए, मैं कॉल स्टैक पैनल से उस स्क्रिप्ट को अनदेखा कर सकता हूं.

कॉल स्टैक पैन से Vue.js स्क्रिप्ट को अनदेखा करना.

सातवीं इमेज. कॉल स्टैक पैन में Vue.js स्क्रिप्ट को अनदेखा करना

अगली बार जब मैंने बटन पर क्लिक किया और click ब्रेकपॉइंट ट्रिगर किया, तो Vue.js कोड बिना रुके एक्ज़ीक्यूट हो गया. इसके बाद, यह मेरे ऐप्लिकेशन के लिसनर में कोड की पहली लाइन पर रुक गया. मुझे यहीं पर कोड को रोकना था.

अब क्लिक ब्रेकपॉइंट, ऐप्लिकेशन के लिसनर कोड पर रुक जाता है.

आठवीं इमेज. click ब्रेकपॉइंट अब ऐप्लिकेशन के लिसनर कोड पर रुक जाता है

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

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

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

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

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

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