Chrome DevTools रेवलूशन 2013

Arthur Evans

Tim Statler

परिचय

वेब ऐप्लिकेशन की जटिलता और फ़ंक्शन बढ़ने के साथ-साथ, Chrome DevTools भी बेहतर हुआ है. Google I/O 2013 में पॉल आयरिश ने Chrome DevTools Revolutions 2013 के बारे में बात की थी. इस वीडियो में, आपको उन नई सुविधाओं के बारे में जानकारी मिलेगी जिनसे वेब ऐप्लिकेशन बनाने और उनकी जांच करने के तरीके में क्रांतिकारी बदलाव हो रहे हैं.

अगर आपने पॉल का टॉक शो नहीं देखा है, तो यहां देखें (आइए, हम इंतज़ार करेंगे) या सीधे सुविधाओं के बारे में जानकारी वाले राउंडअप पर जाएं:

• Workspaces में, DevTools को सोर्स कोड एडिटर के तौर पर इस्तेमाल किया जा सकता है.
• अगर Sass का इस्तेमाल किया जाता है, तो आपको DevTools में Sass (.scss) फ़ाइलों में लाइव बदलाव करने की सुविधा पसंद आएगी. साथ ही, आपको पेज पर अपने बदलाव तुरंत दिखेंगे.
• Android के लिए Chrome पर, पेजों को रिमोट तौर पर डीबग करने की सुविधा कुछ समय से उपलब्ध है. हालांकि, ADB एक्सटेंशन की मदद से, Android डिवाइसों से कनेक्ट करना आसान हो जाता है. रिवर्स पोर्ट फ़ॉरवर्डिंग की मदद से, अपने डिवाइस से डेवलपमेंट मशीन पर मौजूद लोकलहोस्ट से आसानी से कनेक्ट किया जा सकता है.
• वेब ऐप्लिकेशन में परफ़ॉर्मेंस हमेशा एक समस्या होती है. DevTools में कई नई सुविधाएं हैं, जिनसे आपको समस्याओं को ट्रैक करने में मदद मिलती है. इनमें सीपीयू प्रोफ़ाइलिंग के लिए नया फ़्लेम चार्ट विज़ुअलाइज़ेशन और रेंडरिंग और मेमोरी के इस्तेमाल से जुड़ी परफ़ॉर्मेंस की समस्याओं को डीबग करने के लिए कई नए टूल शामिल हैं.

ये सुविधाएं, Chrome 28 में लाइव हैं. अब ये सुविधाएं, स्टेबल अपडेट चैनल में उपलब्ध हैं.

फ़ाइल फ़ोल्डर

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

यहां दिए गए स्क्रीनशॉट में, वर्कस्पेस के इस्तेमाल का उदाहरण दिया गया है. Calendar साइट को localhost पर लोड किया गया है, जबकि सोर्स पैनल में साइट के रूट फ़ोल्डर का लोकल फ़ाइल सिस्टम व्यू दिखता है. इस फ़ोल्डर में मौजूद फ़ाइलों में किए गए बदलाव, डिस्क में सेव हो जाते हैं. नीचे दिए गए स्क्रीनशॉट में, Calendar.css में कुछ ऐसे बदलाव किए गए हैं जिन्हें सेव नहीं किया गया है. इसलिए, फ़ाइल के नाम के बगल में तारे का निशान लगा है.

Control+S या Command+S दबाने पर, डिस्क में बदलाव सेव हो जाते हैं.

इसी तरह, एलिमेंट पैनल में किसी एलिमेंट की स्टाइल में किए गए बदलाव, सोर्स पैनल और आपके बाहरी एडिटर, दोनों में दिखते हैं. ध्यान दें कि:

• एलिमेंट पैनल में किए गए डीओएम बदलाव सेव नहीं होते. एलिमेंट पैनल में स्टाइल में किए गए बदलाव ही सेव होते हैं.
• सिर्फ़ बाहरी सीएसएस फ़ाइल में तय की गई स्टाइल बदली जा सकती हैं. element.style या इनलाइन स्टाइल में किए गए बदलाव, डिस्क पर सेव नहीं किए जाते. अगर आपके पास इनलाइन स्टाइल हैं, तो उन्हें सोर्स पैनल पर बदला जा सकता है.
• एलिमेंट पैनल में स्टाइल में किए गए बदलाव तुरंत लागू हो जाते हैं. इसके लिए, आपको Control+S या Command+S दबाने की ज़रूरत नहीं है.

वर्कस्पेस फ़ोल्डर जोड़ना

वर्कस्पेस का इस्तेमाल करने के दो तरीके हैं: किसी लोकल फ़ोल्डर के कॉन्टेंट को DevTools के लिए उपलब्ध कराना और उस फ़ोल्डर को किसी यूआरएल पर मैप करना.

वर्कस्पेस में नया फ़ोल्डर जोड़ने के लिए:

1. DevTools की सेटिंग खोलने के लिए, DevTools में सेटिंग पर क्लिक करें.
2. फ़ाइल फोल्डर पर क्लिक करें.
3. फ़ोल्डर जोड़ें पर क्लिक करें.
4. अपने प्रोजेक्ट की सोर्स फ़ाइलों वाले फ़ोल्डर पर जाएं और चुनें पर क्लिक करें.
5. जब कहा जाए, तब DevTools को फ़ोल्डर का पूरा ऐक्सेस देने के लिए, अनुमति दें पर क्लिक करें.

सोर्स पैनल में, localhost पर लोड किए गए सोर्स के साथ-साथ नया वर्कस्पेस फ़ोल्डर भी दिखता है. अब अपने फ़ाइल फ़ोल्डर में मौजूद फ़ाइलों में लाइव बदलाव किए जा सकते हैं. ये बदलाव, डिस्क में सेव रहेंगे.

किसी फ़ोल्डर को यूआरएल से मैप करना

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

वर्कस्पेस फ़ोल्डर को किसी यूआरएल से मैप करने के लिए:

1. सोर्स पैनल में, वर्कस्पेस फ़ोल्डर में मौजूद किसी फ़ाइल पर राइट क्लिक करें या Control+क्लिक करें.
2. नेटवर्क संसाधन पर मैप करें चुनें.

   

3. फ़िलहाल लोड किए गए पेज से, उससे जुड़ा नेटवर्क संसाधन चुनें.

   

4. Chrome में पेज को फिर से लोड करें.

सोर्स पैनल में अब सिर्फ़ आपकी साइट के लोकल फ़ोल्डर में मौजूद कॉन्टेंट दिखेगा, न कि localhost सोर्स. इसकी जानकारी नीचे दी गई है.

ध्यान दें: अगर आपको अब भी localhost सोर्स दिखते हैं, तो Chrome में पेज को रीफ़्रेश करें.

नेटवर्क फ़ोल्डर को वर्कस्पेस फ़ोल्डर से लिंक करने के दो और तरीके हैं:

• किसी नेटवर्क संसाधन पर दायां क्लिक (या Control+क्लिक) करें और फ़ाइल सिस्टम संसाधन पर मैप करें चुनें.
• DevTools की सेटिंग डायलॉग बॉक्स के Workspace टैब में, मैन्युअल तरीके से मैपिंग जोड़ें.

Sass/CSS सोर्स मैप की डीबगिंग

Sass (CSS सोर्स मैप) की डीबगिंग की सुविधा की मदद से, सोर्स पैनल में Sass (.scss) फ़ाइलों में लाइव बदलाव किए जा सकते हैं. साथ ही, DevTools से बाहर निकले बिना या पेज को रीफ़्रेश किए बिना नतीजे देखे जा सकते हैं. जब किसी ऐसे एलिमेंट की जांच की जाती है जिसकी स्टाइल, Sass से जनरेट की गई CSS फ़ाइल से मिलती हैं, तो एलिमेंट पैनल में जनरेट की गई .css फ़ाइल के बजाय, .scss फ़ाइल का लिंक दिखता है.

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

जब किसी SCSS फ़ाइल (DevTools या किसी दूसरी जगह) में किए गए बदलावों को सेव किया जाता है, तो Sass कंपाइलर सीएसएस फ़ाइलों को फिर से जनरेट करता है. इसके बाद, DevTools, जनरेट की गई नई CSS फ़ाइल को फिर से लोड करता है.

ध्यान दें: तकनीकी तौर पर, यह सुविधा सोर्स मैप के साथ काम करने वाले किसी भी सीएसएस प्रीप्रोसेसर के साथ काम करनी चाहिए. ज़्यादा जानकारी के लिए, DevTools के दस्तावेज़ में सीएसएस प्रीप्रोसेसर के साथ काम करना लेख पढ़ें.

Sass डीबगिंग का इस्तेमाल करना

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

gem install sass -v '>=3.3.0alpha' --pre

आपको DevTools एक्सपेरिमेंट में Sass डीबग करने की सुविधा भी चालू करनी होगी:

1. Chrome में about:flags खोलें.
2. Developer Tools के एक्सपेरिमेंट चालू करें को चालू करें.
3. Chrome को रीस्टार्ट करें.
4. DevTools की सेटिंग खोलें और प्रयोग पर क्लिक करें.
5. Sass के लिए सहायता (या Sass स्टाइलशीट डीबगिंग) को चालू करें. यह इस बात पर निर्भर करता है कि आपके ब्राउज़र का वर्शन क्या है.

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

sass --watch **--sourcemap** sass/styles.scss:styles.css

अगर Compass का इस्तेमाल किया जा रहा है, तो ध्यान दें कि Compass में Sass के रिलीज़ से पहले के वर्शन का इस्तेमाल नहीं किया जा सकता. इसलिए, Compass के साथ Sass की डीबगिंग का इस्तेमाल नहीं किया जा सकता.

यह कैसे काम करता है

Sass कंपाइलर, प्रोसेस की जाने वाली हर SCSS सोर्स फ़ाइल के लिए, कंपाइल की गई CSS के साथ-साथ एक सोर्स मैप फ़ाइल (.map फ़ाइल) जनरेट करता है. सोर्स मैप फ़ाइल, एक JSON फ़ाइल होती है. इसमें .scss फ़ाइल और .css फ़ाइलों के बीच मैपिंग की जानकारी होती है. हर सीएसएस फ़ाइल में एक एनोटेशन होता है, जो उसकी सोर्स मैप फ़ाइल का यूआरएल बताता है. यह यूआरएल, किसी खास टिप्पणी में एम्बेड होता है:

/*# sourceMappingURL=<url>; */

उदाहरण के लिए, नीचे दी गई SCSS फ़ाइल:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass, sourceMappingURL एनोटेशन के साथ इस तरह की सीएसएस फ़ाइल जनरेट करता है:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

सोर्स मैप फ़ाइल का उदाहरण यहां दिया गया है:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Android के लिए Chrome पर, रिमोट डीबग करने की सुविधा को आसान बनाना

DevTools में मौजूद कुछ नई सुविधाओं की मदद से, Chrome for Android पर रिमोट डीबगिंग को आसानी से सेट अप किया जा सकता है. इन सुविधाओं में, एडीबी एक्सटेंशन और रिवर्स पोर्ट फ़ॉरवर्डिंग शामिल हैं.

ADB Chrome एक्सटेंशन, रिमोट डीबगिंग को सेट अप करने की प्रोसेस को आसान बनाता है. इससे ये फ़ायदे मिलते हैं:

• Android डीबग ब्रिज (ADB) को बंडल करता है, ताकि आपको इसे इंस्टॉल न करना पड़े.
• कमांड लाइन इंटरैक्शन की ज़रूरत नहीं है.
• ADB डेमन को आसानी से शुरू और बंद करने के साथ-साथ, कनेक्ट किए गए डिवाइसों को देखने के लिए यूज़र इंटरफ़ेस (यूआई).

रिवर्स पोर्ट फ़ॉरवर्डिंग की मदद से, Android पर Chrome को आपके लोकलहोस्ट पर चल रहे वेब सर्वर से आसानी से कनेक्ट किया जा सकता है. कुछ नेटवर्क एनवायरमेंट में, डीएनएस की कुछ तरकीबों के बिना ऐसा करना मुश्किल हो जाता है.

ADB एक्सटेंशन का इस्तेमाल करना

सबसे पहले, Chrome वेब स्टोर से ADB Chrome एक्सटेंशन इंस्टॉल करें. एक्सटेंशन इंस्टॉल करने के लिए, Chrome में जोड़ें पर क्लिक करें.

ध्यान दें: Windows 8 पर, Chrome Web Store से एक्सटेंशन इंस्टॉल नहीं किए जा सकते. अगर आपको Chrome वेब स्टोर से इंस्टॉल करने में कोई समस्या आ रही है, तो इंस्टॉल करने के अन्य निर्देशों के लिए Android पर रिमोट डीबगिंग देखें.

इंस्टॉल होने के बाद, Chrome में स्लेटी रंग का Android मेन्यू आइकॉन दिखता है. ADB शुरू करने के लिए, आइकॉन पर क्लिक करें. इसके बाद, ADB शुरू करें पर क्लिक करें.

ADB शुरू होने के बाद, मेन्यू आइकॉन हरे रंग में बदल जाता है. साथ ही, अगर कोई डिवाइस कनेक्ट है, तो उसकी संख्या भी दिखती है.

डिवाइस देखें पर क्लिक करके, about:inspect पेज खोलें. इस पेज पर, कनेक्ट किए गए हर डिवाइस और उसके टैब दिखते हैं. DevTools में किसी टैब की जांच करने के लिए, उसके यूआरएल के बगल में मौजूद "जांच करें" लिंक पर क्लिक करें.

अगर आपको कनेक्ट किया गया कोई डिवाइस नहीं दिखता है, तो देखें कि आपका डिवाइस यूएसबी से कनेक्ट है या नहीं. साथ ही, यह भी देखें कि 'Android के लिए Chrome' की सेटिंग में यूएसबी डीबगिंग चालू है या नहीं. ज़्यादा जानकारी और समस्या हल करने के तरीके के लिए, Android पर रिमोट डीबगिंग लेख पढ़ें.

रिवर्स पोर्ट फ़ॉरवर्डिंग (प्रयोग के तौर पर उपलब्ध)

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

इस सुविधा का इस्तेमाल करने के लिए, आपके पास ये चीज़ें होनी चाहिए:

• आपके डेवलपमेंट मशीन पर Chrome 28 या उसके बाद का वर्शन इंस्टॉल हो
• आपके डिवाइस पर 'Android के लिए Chrome' बीटा वर्शन इंस्टॉल होना
• आपके डेवलपमेंट मशीन पर Android डीबग ब्रिज (ADB Chrome एक्सटेंशन या पूरा Android SDK) इंस्टॉल होना चाहिए

रिवर्स पोर्ट फ़ॉरवर्डिंग का इस्तेमाल करने के लिए, आपको रिमोट डीबगिंग के लिए अपना डिवाइस कनेक्ट करना होगा. इसके बारे में ADB एक्सटेंशन का इस्तेमाल करने में बताया गया है. इसके बाद, आपको रिवर्स पोर्ट फ़ॉरवर्डिंग चालू करनी होगी और अपने ऐप्लिकेशन के लिए पोर्ट फ़ॉरवर्डिंग का नियम जोड़ना होगा.

सबसे पहले, रिवर्स पोर्ट फ़ॉरवर्डिंग की सुविधा चालू करें:

1. अपने डेवलपमेंट मशीन पर Chrome खोलें.
2. about:flags में, डेवलपर टूल के प्रयोग चालू करें को चालू करें और Chrome को रीस्टार्ट करें.
3. about:inspect खोलें. आपको अपना मोबाइल डिवाइस और उस पर खुले टैब की सूची दिखेगी.
4. सूची में मौजूद किसी भी साइट के बगल में मौजूद, "जांच करें" लिंक पर क्लिक करें.
5. इसके बाद, DevTools की विंडो में सेटिंग पैनल खोलें.
6. 'एक्सपेरिमेंट' में जाकर, रिवर्स पोर्ट फ़ॉरवर्डिंग चालू करें को चालू करें.
7. DevTools विंडो बंद करें और about:inspect पर वापस जाएं.

इसके बाद, पोर्ट फ़ॉरवर्डिंग का नियम जोड़ें:

1. DevTools खोलने के लिए, "जांच करें" लिंक पर फिर से क्लिक करें. इसके बाद, DevTools की सेटिंग फिर से खोलें.
2. पोर्ट फ़ॉरवर्ड करना टैब पर क्लिक करें.
3. डिवाइस पोर्ट फ़ील्ड में, वह पोर्ट नंबर डालें जिससे Chrome को आपके Android डिवाइस से कनेक्ट करना है. डिफ़ॉल्ट रूप से, यह 8080 होता है.
4. टारगेट फ़ील्ड में, वह पोर्ट नंबर जोड़ें जहां आपका वेब ऐप्लिकेशन, डेवलपमेंट मशीन पर चल रहा है.

   

5. Android के लिए Chrome में, localhost: खोलें. यहां वह वैल्यू है जो आपने डिवाइस पोर्ट फ़ील्ड में डाली थी. डिफ़ॉल्ट तौर पर, यह वैल्यू 8080 होती है.

आपको अपने डेवलपमेंट मशीन से दिखाया जा रहा कॉन्टेंट दिखेगा.

JavaScript प्रोफ़ाइलों के लिए फ़्लेम चार्ट विज़ुअलाइज़ेशन

नए फ़्लेम चार्ट व्यू में, समय के साथ JavaScript प्रोसेसिंग को विज़ुअल तौर पर दिखाया जाता है. यह टाइमलाइन और नेटवर्क पैनल में दिखने वाले विज़ुअल से मिलता-जुलता है.

हॉरिज़ॉन्टल ऐक्सिस, समय है और वर्टिकल ऐक्सिस, कॉल स्टैक है. पैनल में सबसे ऊपर, पूरी रिकॉर्डिंग की खास जानकारी दिखती है. इस जानकारी में किसी हिस्से पर "ज़ूम इन" करने के लिए, उसे माउस से चुनें. ऐसा करने का तरीका यहां बताया गया है. इसके हिसाब से, ज़्यादा जानकारी वाले व्यू की टाइमस्केल छोटी हो जाती है.

ज़्यादा जानकारी वाले व्यू में, कॉल स्टैक को फ़ंक्शन "ब्लॉक" के स्टैक के तौर पर दिखाया जाता है. किसी ब्लॉक को ऊपर से जोड़ा गया है और उसे नीचे मौजूद फ़ंक्शन ब्लॉक ने कॉल किया है. किसी ब्लॉक पर कर्सर घुमाने पर, उसका फ़ंक्शन नाम और टाइमिंग डेटा दिखता है:

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

किसी फ़ंक्शन ब्लॉक पर क्लिक करने से, सोर्स पैनल में उसमें मौजूद JavaScript फ़ाइल खुलती है. यह फ़ाइल उस लाइन पर खुलती है जहां फ़ंक्शन की परिभाषा दी गई है.

फ़्लेम चार्ट का इस्तेमाल करने के लिए:

1. DevTools में, प्रोफ़ाइलें टैब पर क्लिक करें.
2. JavaScript सीपीयू प्रोफ़ाइल रिकॉर्ड करें को चुनें और शुरू करें पर क्लिक करें.
3. डेटा इकट्ठा करने के बाद, बंद करें पर क्लिक करें.
4. प्रोफ़ाइल व्यू में, फ़्लेम चार्ट विज़ुअलाइज़ेशन चुनें.

   

परफ़ॉर्मेंस मेज़रमेंट की पांच मुख्य सुविधाएं

DevTools में हुई क्रांतिकारी नई सुविधाओं के बारे में इस सर्वे में, परफ़ॉर्मेंस से जुड़ी समस्याओं की जांच करने के लिए कई नई सुविधाओं के बारे में बताया गया है:

• लगातार पेंट करने की सुविधा
• पेंट किए गए आयत और लेयर बॉर्डर दिखाना
• एफ़पीएस मीटर
• फ़ोर्स्ड सिंक्रोनस लेआउट (लेआउट थ्रैशिंग) ढूंढना
• ऑब्जेक्ट के ऐलोकेशन को ट्रैक करना

लगातार पेंट करने की सुविधा

लगातार पेज को फिर से पेंट करने का मोड, DevTools की सेटिंग (रेंडरिंग > पेज को लगातार फिर से पेंट करने की सुविधा चालू करें) में एक विकल्प है. इससे, अलग-अलग एलिमेंट या सीएसएस स्टाइल के रेंडरिंग के समय की पहचान करने में मदद मिलती है.

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

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

लगातार पैनिंग मोड चालू करने के लिए:

1. DevTools की सेटिंग खोलें. 1.सामान्य टैब में, रेंडरिंग में जाकर, पेज को लगातार फिर से रंगना चालू करें को चालू करें.

ध्यान दें: अगर आपको सेटिंग में यह विकल्प नहीं दिखता है, तो about:flags खोलें. इसके बाद, सभी पेजों पर GPU कॉम्पोज़िंग को चालू करें और Chrome को रीस्टार्ट करें.

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

पेंट किए गए आयत और लेयर बॉर्डर दिखाना

DevTools में एक और विकल्प है, जो यह दिखाता है कि डिसप्ले के किन रेक्टैंगल क्षेत्रों को पेंट किया जा रहा है. (सेटिंग > रेंडरिंग > पेंट रेक्टैंगल दिखाएं). उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में, उस हिस्से पर एक पेंट रेक्टैंगल बनाया जा रहा है जहां बैंगनी ग्राफ़िक पर सीएसएस हॉवर इफ़ेक्ट लागू किया जा रहा था. यह अच्छा है, क्योंकि यह स्क्रीन का अपेक्षाकृत छोटा हिस्सा है.

आपको डिज़ाइन और डेवलपमेंट के उन तरीकों से बचना है जिनकी वजह से पूरे डिसप्ले को फिर से पेंट करना पड़ता है. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में उपयोगकर्ता पेज को स्क्रोल कर रहा है. एक रेक्टैंगल, स्क्रोल बार के चारों ओर है और दूसरा रेक्टैंगल, पेज के बाकी हिस्से के चारों ओर है. इस मामले में, बॉडी एलिमेंट पर मौजूद बैकग्राउंड इमेज की वजह से ऐसा हो रहा है. सीएसएस में इमेज की पोज़िशन को 'फ़िक्स्ड' पर सेट किया गया है. इसलिए, Chrome को हर स्क्रोल पर पूरे पेज को फिर से पेंट करना पड़ता है.

एफ़पीएस मीटर

FPS मीटर, पेज का मौजूदा फ़्रेम रेट, कम से कम और ज़्यादा से ज़्यादा फ़्रेम रेट दिखाता है. साथ ही, समय के साथ फ़्रेम रेट दिखाने वाला बार ग्राफ़ और फ़्रेम रेट में होने वाले बदलाव को दिखाने वाला हिस्टोग्राम भी दिखाता है.

FPS मीटर दिखाने के लिए:

1. DevTools की सेटिंग खोलें.
2. सामान्य पर क्लिक करें.
3. रेंडरिंग में जाकर, तेज़ी से कॉम्पोज़ करने की सुविधा चालू करें और FPS मीटर दिखाएं को चालू करें.

एफ़पीएस मीटर को हमेशा दिखने के लिए, about:flags खोलें. इसके बाद, एफ़पीएस काउंटर चालू करें और Chrome को रीस्टार्ट करें.

फ़ोर्स्ड सिंक्रोनस लेआउट (लेआउट थ्रैशिंग) ढूंढना

रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाने के लिए, Chrome आम तौर पर आपके ऐप्लिकेशन के अनुरोध किए गए लेआउट बदलावों को एक साथ करता है. साथ ही, अनुरोध किए गए बदलावों का हिसाब लगाने और उन्हें रेंडर करने के लिए, लेआउट पास को शेड्यूल करता है. हालांकि, अगर कोई ऐप्लिकेशन लेआउट पर निर्भर किसी प्रॉपर्टी (जैसे, offsetHeight या offsetWidth) की वैल्यू मांगता है, तो Chrome को तुरंत और सिंक करके पेज लेआउट करना पड़ता है. इन जबरन सिंक किए गए लेआउट की वजह से, रेंडरिंग की परफ़ॉर्मेंस काफ़ी खराब हो सकती है. खास तौर पर, जब बड़े डीओएम ट्री पर बार-बार ऐसा किया जाता है. इस स्थिति को "लेआउट थ्रैशिंग" भी कहा जाता है.

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

इस पॉप-अप में, उन नोड की संख्या भी दिखती है जिनके लिए लेआउट की ज़रूरत है. साथ ही, इसमें री-लेआउट ट्री का साइज़, लेआउट का स्कोप, और लेआउट रूट भी दिखता है.

ज़्यादा जानकारी के लिए, टाइमलाइन डेमो: फ़ोर्स किए गए सिंक्रोनस लेआउट का पता लगाना देखें.

ऑब्जेक्ट के ऐलोकेशन को ट्रैक करना

ऑब्जेक्ट ऐलोकेशन ट्रैकिंग, मेमोरी प्रोफ़ाइल का एक नया टाइप है. यह समय के साथ ऐलोकेशन दिखाता है. ऐलोकेशन ट्रैकिंग शुरू करने पर, DevTools समय-समय पर हीप के स्नैपशॉट लेता रहता है. हीप ऐलोकेशन प्रोफ़ाइल से पता चलता है कि ऑब्जेक्ट कहां बनाए जा रहे हैं. साथ ही, यह रिटेन करने के पाथ की पहचान करती है.

ऑब्जेक्ट के ऐलोकेशन को ट्रैक करने के लिए:

1. DevTools में, प्रोफ़ाइलें टैब पर क्लिक करें.
2. हैप एलोकेशन रिकॉर्ड करें चुनें और शुरू करें पर क्लिक करें.
3. डेटा इकट्ठा करने के बाद, हीप प्रोफ़ाइल रिकॉर्ड करना बंद करें (प्रोफ़ाइलिंग पैनल के सबसे नीचे बाएं कोने में मौजूद लाल रंग का सर्कल) पर क्लिक करें.

कैनवस की प्रोफ़ाइलिंग (प्रयोग के तौर पर उपलब्ध)

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

कैनवस प्रोफ़ाइलिंग का इस्तेमाल करने के लिए:

1. DevTools की सेटिंग में प्रयोग टैब पर जाकर, कैनवस की जांच करने की सुविधा चालू करें. (अगर आपको यह टैब नहीं दिखता है, तो about:flags खोलें. इसके बाद, डेवलपर टूल के प्रयोग चालू करें को चालू करें और Chrome को रीस्टार्ट करें.)
2. प्रोफ़ाइलें टैब पर क्लिक करें.
3. कैनवस फ़्रेम कैप्चर करें को चुनें और स्नैपशॉट लें पर क्लिक करें.
4. अब कैनवस फ़्रेम बनाने के लिए इस्तेमाल किए गए कॉल को एक्सप्लोर किया जा सकता है.