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

Kayce Basques

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

यहां पढ़ें या रिलीज़ नोट का वीडियो वर्शन देखें.

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

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

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

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

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

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

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

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

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

झलक और जवाब टैब में प्रीटी-प्रिंटिंग

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

झलक टैब, analytics.js के कॉन्टेंट को डिफ़ॉल्ट रूप से प्रिंट करता है.

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

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

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

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

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

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

झलक टैब में HTML की झलक देखना.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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