Chrome DevTools रेवलूशन 2013

आर्थर एवंस

Twitter GitHub

टिम स्टेटलर

Twitter

शुरुआती जानकारी

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

अगर आपने पॉल के बारे में बात नहीं की है, तो इसे ऊपर देखें (आगे बढ़ें, हम इंतज़ार करेंगे) या सीधे फ़ीचर राउंडअप में जाएं:

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

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

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

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

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

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

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

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

फ़ाइल फ़ोल्डर फ़ोल्डर जोड़ा जा रहा है

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

नया फ़ाइल फ़ोल्डर फ़ोल्डर जोड़ने के लिए:

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

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

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

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

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

1. सोर्स पैनल में, फ़ाइल फ़ोल्डर में किसी फ़ाइल पर दायां क्लिक करें या उस पर Control+क्लिक करें.
2. Network Resource पर मैप करें को चुनें.

   

3. मौजूदा समय में लोड किए गए पेज से, संबंधित नेटवर्क संसाधन चुनें.

   

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

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

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

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

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

Sass/CSS सोर्स मैप डीबग करना

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

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

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

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

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

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

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

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

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

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

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

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

यह सुविधा कैसे काम करती है

हर SCSS सोर्स फ़ाइल के लिए, Sass कंपाइलर, कंपाइल की गई सीएसएस के साथ-साथ एक सोर्स मैप फ़ाइल (.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 में कुछ नई सुविधाओं की मदद से, Android के लिए Chrome को रिमोट तरीके से डीबग करना आसान हो गया है: ADB एक्सटेंशन और रिवर्स पोर्ट फ़ॉरवर्डिंग.

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

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

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

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

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

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

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

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

कनेक्ट किए गए हर डिवाइस और उसके टैब को दिखाने वाले about:जांच करें पेज को खोलने के लिए, डिवाइस देखें पर क्लिक करें. 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 में बेहतरीन परफ़ॉर्मेंस के इस सर्वे को पूरा करने के लिए, कई नई सुविधाएं जोड़ी गई हैं. इनकी मदद से, परफ़ॉर्मेंस से जुड़ी समस्याओं की जांच की जा सकती है:

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

लगातार पेंटिंग मोड

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

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

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

लगातार दर्द करने वाला मोड चालू करने के लिए:

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

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

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

पेंट रेक्टैंगल और लेयर बॉर्डर दिखाए जा रहे हैं

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

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

FPS मीटर

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

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

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

about:flags को खोलकर, FPS काउंटर चालू करके, और Chrome को रीस्टार्ट करके, FPS मीटर को हमेशा दिखाए जाने के लिए सेट किया जा सकता है.

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

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

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

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

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

ऑब्जेक्ट के आवंटन को ट्रैक करने की सुविधा

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

ऑब्जेक्ट के आवंटन को ट्रैक करने के लिए:

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

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

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

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

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