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

Kayce Basques

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

• नेटवर्क पैनल में स्क्रिप्ट को अनदेखा करें
• डिवाइस मोड में ज़ूम इन करने की सुविधा अपने-आप अडजस्ट होने की सुविधा
• झलक और जवाब टैब में सुंदर प्रिंटिंग
• झलक टैब में एचटीएमएल कॉन्टेंट की झलक देखना
• एचटीएमएल में स्टाइल के साथ लोकल बदलाव

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

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

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

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

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

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

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

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

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

'झलक देखें' और 'जवाब' टैब में सुंदर प्रिंटिंग

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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