Chrome DevTools में तेज़ी से बदलाव होते रहते हैं. हम आपको कुछ नए फ़ंक्शन और कुछ कॉम्पोनेंट में किए गए सुधारों के बारे में बताना चाहते हैं. हम यूज़र इंटरफ़ेस (यूआई) में किए गए कुछ बदलावों, हाई रिज़ॉल्यूशन वाली JS प्रोफ़ाइलिंग, और Workspaces की नई सुविधाओं के बारे में बात करेंगे.
- हाई रिज़ॉल्यूशन प्रोफ़ाइलिंग की सटीक जानकारी अब .1 मिलीसेकंड में मिलती है
- टूलबार, DevTools में सबसे ऊपर आ गए और बदलावों को कंसोल ड्रॉअर में ले जाया गया
- Workspaces में फ़ाइलें जोड़ने/हटाने/खोजने के लिए कई सुविधाएं जोड़ी गई हैं
हाई-रिज़ॉल्यूशन प्रोफ़ाइलिंग
सीपीयू प्रोफ़ाइल एक बहुत ही काम की सुविधा है. इससे यह पता चलता है कि आपका JavaScript कितना असरदार है. इस साल की गर्मियों में, हमने प्रोफ़ाइल व्यू के साथ-साथ फ़्लेम चार्ट भी लॉन्च किया है. इससे, समय के साथ किसी पेज के JavaScript प्रोसेसिंग को विज़ुअल तौर पर दिखाया जाता है. इसका इस्तेमाल करके, यह आसानी से देखा जा सकता है कि आपका कॉल स्टैक कितना बड़ा है. साथ ही, यह भी देखा जा सकता है कि अलग-अलग फ़ंक्शन को प्रोसेस करने में कितना समय लगता है.
हाल ही तक, फ़्लेम चार्ट के साथ-साथ हेवी (बॉटम अप) और ट्री (टॉप डाउन) के पारंपरिक तरीके से डेटा दिखाने पर, प्रोसेस की सटीक जानकारी सिर्फ़ एक मिलीसेकंड तक दिखती थी. ज़्यादातर ऐप्लिकेशन के लिए, यह ठीक है. हालांकि, अगर किसी ऐसे प्रोजेक्ट पर काम किया जा रहा है जिसमें यूज़र इंटरफ़ेस (यूआई) में स्पीड का ज़्यादा महत्व है, जैसे कि गेम -- तो हो सकता है कि एक मिलीसेकंड का रिज़ॉल्यूशन, आपकी साइट के धीमे होने या यूआई के लैग होने की वजहों के बारे में अहम नतीजे न दे पाए. हाई रिज़ॉल्यूशन प्रोफ़ाइलिंग की सुविधा चालू करने के लिए (फ़िलहाल, सिर्फ़ Canary में):
- DevTools की सेटिंग खोलें.
- सामान्य टैब में, प्रोफ़ाइलर में जाकर, हाई रिज़ॉल्यूशन सीपीयू प्रोफ़ाइलिंग को चालू करें.
यहां सामान्य प्रोफ़ाइलिंग और हाई रिज़ॉल्यूशन वाले फ़्लेम चार्ट का उदाहरण दिया गया है. इसमें हम HTML5Rocks.com के होम पेज को लोड करने की प्रोफ़ाइलिंग करते हैं:
सामान्य प्रोफ़ाइलिंग रिज़ॉल्यूशन में, प्रोसेस में लगने वाला समय हमेशा अगले मिलीसेकंड तक राउंड अप हो जाता है. इसलिए, ऐसी प्रोसेस जिसमें सिर्फ़ 0.1 मिलीसेकंड या उससे कम समय लगता है, उसके लिए भी 1.0 मिलीसेकंड का समय रिपोर्ट किया जाता है. साथ ही, हो सकता है कि कॉल स्टैक में अन्य प्रोसेस बिलकुल न दिखें.
हाई-रिज़ॉल्यूशन प्रोफ़ाइलिंग की वजह से, JavaScript VM में ज़्यादा ओवरहेड होता है. इसलिए, यह डिफ़ॉल्ट रूप से बंद रहता है. यह सामान्य प्रोफ़ाइलिंग रिज़ॉल्यूशन से ज़्यादा बेहतर दिखता है. हालांकि, हमारा सुझाव है कि इसका इस्तेमाल सिर्फ़ तब करें, जब आपको सटीक जानकारी की ज़रूरत हो.
DevTools के यूज़र इंटरफ़ेस (यूआई) में सुधार
Canary में हमेशा नई चीज़ें लॉन्च की जाती हैं. हालांकि, हम आपका ध्यान यूज़र इंटरफ़ेस (यूआई) में हुए कुछ बड़े बदलावों पर दिलाना चाहते हैं: आम तौर पर, यूआई में बटन सबसे ऊपर दिखेंगे, टाइमलाइन नेविगेशन और जानकारी वाले पैनल दिखेंगे, और बदलावों को लागू करने की सुविधा को कंसोल ड्रॉअर में ले जाया जाएगा.
सबसे पहले, यह जान लेते हैं कि हम कहां से आ रहे हैं. हम टाइमलाइन के बारे में बात कर रहे हैं, इसलिए मैं एक ही स्क्रीनशॉट के साथ, पहले दो सवालों के जवाब देने की कोशिश करूंगा. फ़िलहाल, Chrome के स्टेबल वर्शन में टाइमलाइन इस तरह दिखती है:
टाइमलाइन अब इस तरह दिखती है.
इन बातों पर ध्यान दें:
- अब टूलबार और बटन, स्क्रीन पर सबसे ऊपर दिखते हैं. ये बाईं ओर टाइमलाइन के लिए और दाईं ओर सामान्य DevTools के लिए होते हैं.
- टाइमलाइन रिकॉर्ड अब बाईं ओर मौजूद पैनल में नेस्ट किए गए स्ट्रक्चर में हैं. साथ ही, इनमें स्क्रोल करने के लिए कीबोर्ड का इस्तेमाल भी किया जा सकता है. ऊपर और नीचे स्क्रोल करने के लिए, ऊपर और नीचे ऐरो बटन का इस्तेमाल करने के अलावा, नेस्ट किए गए रिकॉर्ड खोलने और बंद करने के लिए, बाईं और दाईं ऐरो बटन का भी इस्तेमाल किया जा सकता है.
- आपने जो भी एंट्री चुनी है उसके लिए, समय की जानकारी अब दाईं ओर मौजूद पैनल में दिखती है. (अन्य एंट्री की जानकारी पाने के लिए, उन पर कर्सर घुमाएं.)
अब आइए, कंसोल ड्रॉअर के बारे में जानें. कंसोल ड्रॉअर खोलने के लिए, DevTools में
Escape दबाएं या कंसोल ड्रॉअर बटन
दबाएं. इसके बाद, ड्रॉअर सबसे नीचे से ऊपर की ओर रोल अप हो जाएगा.
डिफ़ॉल्ट रूप से, आपके पास कंसोल और खोज टैब होंगे. पहले जिस फ़ंक्शन को बदलाव कहा जाता था उसे पाने के लिए, DevTools की सेटिंग खोलें और "कंसोल ड्रॉर में 'इम्यूलेशन' व्यू दिखाएं" के बगल में मौजूद बॉक्स को चुनें. सेटिंग बॉक्स को बंद करें. इसके बाद, आपको कंसोल के ड्रॉर में इम्यूलेशन टैब दिखेगा. यह टैब, यहां दिए गए स्क्रीनशॉट की तरह दिखेगा:
इसके बाद, एमुलेटर में सभी काम किए जा सकते हैं.
इस बदलाव की वजह यह है कि पहले, इम्यूलेशन की सेटिंग में बदलाव करने के लिए, आपको सेटिंग में जाना और फिर से बाहर आना पड़ता था. इसके बाद, वापस जाकर अपना पेज देखना पड़ता था. अब स्टाइल में बदलाव करते समय, इम्यूलेशन की सेटिंग में बदलाव किए जा सकते हैं.
बेहतर फ़ाइल फ़ोल्डर
खास तौर पर, वर्कस्पेस की सुविधा से कॉन्टेंट बनाने का तरीका काफ़ी आसान हो जाता है. इसके बावजूद, इस सुविधा को उतना प्यार नहीं मिलता जितना मिलना चाहिए. Workspaces की मदद से, DevTools में बदलाव करने और उन्हें सोर्स फ़ाइलों में कॉपी करके चिपकाने के बजाय, DevTools में बदलाव किए जा सकते हैं. साथ ही, उन्हें ब्राउज़र में रेंडर किया जा सकता है और अपनी फ़ाइलों के हमेशा मौजूद रहने वाले स्थानीय वर्शन में सेव किया जा सकता है. इसके लिए, आपको Chrome से बाहर निकलने की ज़रूरत नहीं है.
अगर आपने अब तक Chrome डेवलपर टूल में हुए बदलाव 2013 वाला लेख नहीं पढ़ा है, तो इसे पढ़ें. इसके बाद, यहां वापस आकर जानें कि हमने पिछले कुछ महीनों में इन सुविधाओं को कैसे बेहतर बनाया है.
फ़ाइलें आसानी से जोड़ना
Revolutions 2013 के लेख के समय, नया वर्कस्पेस बनाने के लिए, फ़ोल्डर को अपने वर्कस्पेस में जोड़ना ज़रूरी था. इसके बाद, फ़ोल्डर को नेटवर्क रिसॉर्स से मैप करना होता था. हमने इस प्रोसेस को एक चरण में आसान बना दिया है: बस सोर्स के बाएं पैनल में दायां क्लिक करें और फ़ाइल फ़ोल्डर में जोड़ें को चुनें. इससे एक फ़ाइल डायलॉग बॉक्स खुलेगा. इसमें, अपने वर्कस्पेस में जोड़ने के लिए कोई नया फ़ोल्डर चुना जा सकता है. (यह आपके Workspaces में, हाइलाइट किए गए मौजूदा फ़ोल्डर को नहीं जोड़ता.)
फ़ाइलें बनाना और हटाना
अब Workspaces में, उस लोकल डायरेक्ट्री में नई फ़ाइलें जोड़ी जा सकती हैं जिसका इस्तेमाल Workspaces के लिए किया जा रहा है. इसके लिए, बाईं ओर मौजूद सोर्स पैनल में किसी फ़ोल्डर पर राइट क्लिक करें और नई फ़ाइल चुनें.
Workspaces से भी फ़ाइलें हटाई जा सकती हैं. बाईं ओर मौजूद सोर्स पैनल में किसी फ़ाइल पर राइट क्लिक करें और फ़ाइल मिटाएं को चुनें.
फ़ाइल का डुप्लीकेट बनाएं को चुनकर भी फ़ाइल का डुप्लीकेट बनाया जा सकता है.
रीफ़्रेश करें
अब सीधे वर्कस्पेस में नई फ़ाइलें बनाई जा सकती हैं या फ़ाइलें मिटाई जा सकती हैं. साथ ही, सोर्स डायरेक्ट्री भी अपने-आप रीफ़्रेश होकर, ये नई फ़ाइलें दिखाएगी. अगर ऐसा नहीं है, तो किसी फ़ोल्डर पर राइट क्लिक करके, रीफ़्रेश करें को चुनें. इससे फ़ोल्डर को तुरंत रीफ़्रेश किया जा सकता है.
यह तब भी काम आता है, जब आपको किसी दूसरे एडिटर में खुली फ़ाइलों में बदलाव करना हो और आपको उन बदलावों को DevTools में दिखाना हो.
सभी फ़ाइलों में खोजना
हमने फ़ाइलों में खोजने के लिए इंटरफ़ेस को थोड़ा बेहतर बनाया है. अब आपके पास अपने Workspace में मौजूद सभी फ़ाइलों के साथ-साथ, DevTools में लोड की गई सभी फ़ाइलों में स्ट्रिंग खोजने का विकल्प भी है. आपके पास स्ट्रिंग या रेगुलर एक्सप्रेशन खोजने का विकल्प होता है. हम हर फ़ाइल या पेज में, खोज के लिए इस्तेमाल हुए शब्दों से मैच होने वाले सभी शब्दों को ढूंढते हैं. Workspaces में एक से ज़्यादा फ़ाइलें खोजने के लिए (फ़िलहाल, यह सुविधा Canary में उपलब्ध है):
- Escape बटन दबाकर कंसोल ड्रॉअर खोलें. इसके बाद, Search विंडो खोलने के लिए, कंसोल के बगल में मौजूद खोजें टैब पर क्लिक करें
या
खोज विंडो खोलने के लिए, Ctrl + Shift + F (Mac पर Cmd + Opt + F) दबाएं.
- सोर्स खोजें बॉक्स में अपनी क्वेरी टाइप करें और Enter दबाएं. अगर आपकी क्वेरी कोई रेगुलर एक्सप्रेशन है या केस-सेंसिटिव नहीं होनी चाहिए, तो सही बॉक्स पर क्लिक करें.
अनदेखा करने की सूचियां
अगर आपके पास बहुत सारी .git फ़ाइलें या README.md फ़ाइलें हैं, तो फ़ाइलों के टेक्स्ट में खोजना या फ़ाइल के नामों के हिसाब से फ़िल्टर करना बहुत मुश्किल हो सकता है.
इसलिए, हमने Workspaces में 'अनदेखा करें' सूची की सुविधा जोड़ी है. इससे, अपने फ़ाइल फ़ोल्डर को देखते और खोजते समय, कुछ फ़ाइल टाइप या फ़ोल्डर को बाहर रखा जा सकता है.
Workspaces में, शेयर की गई मौजूदा अनदेखी की सूची देखने और उसमें बदलाव करने का तरीका यहां बताया गया है:
- DevTools की सेटिंग खोलें.
- फ़ाइल फोल्डर पर क्लिक करें.
- सामान्य में जाकर, फ़ोल्डर से बाहर रखने के लिए पैटर्न बॉक्स में, पैटर्न देखे जा सकते हैं और/या उनमें बदलाव किया जा सकता है.
हम इन डिफ़ॉल्ट ग्लोबल एक्सक्लूज़न पैटर्न के साथ शिप करते हैं:
इस रेगुलर एक्सप्रेशन में, Git, SVN, Mercurial, Eclipse और IntelliJ की प्रोजेक्ट फ़ाइलों, OS X DS_Store, और ट्रैश फ़ाइलों का मेटाडेटा शामिल नहीं है. साथ ही, इसमें Sass की कैश मेमोरी जैसी कुछ अन्य चीज़ें भी शामिल नहीं हैं. उनके पूरे फ़ोल्डर को यूज़र इंटरफ़ेस (यूआई) से हटा दिया जाता है. इसमें, उनके बच्चों के फ़ोल्डर भी शामिल होते हैं. ऐसा इसलिए किया जाता है, ताकि वे यूआई में न दिखें और फ़ाइलों को खोजते समय न दिखें.
Workspace के लिए अनदेखा करने की सूचियां
ज़्यादा सटीक नतीजे पाने के लिए, अपने किसी खास फ़ाइल फ़ोल्डर में मौजूद फ़ाइलों और फ़ोल्डर को खोज के नतीजों से बाहर रखा जा सकता है. इससे, खोज के नतीजों में ग़ैर-ज़रूरी फ़ाइलें नहीं दिखेंगी. हटाए गए फ़ोल्डर, सोर्स डायरेक्ट्री में भी नहीं दिखेंगे.
अपने वर्कस्पेस से किसी पूरे फ़ोल्डर को बाहर रखने के लिए, बाईं ओर मौजूद सोर्स पैनल में फ़ोल्डर पर दायां क्लिक करें और फ़ोल्डर को बाहर रखें को चुनें. किसी वर्कस्पेस फ़ोल्डर के लिए मैपिंग और बाहर रखे गए फ़ोल्डर देखने के लिए:
- DevTools की सेटिंग खोलें.
- फ़ाइल फोल्डर पर क्लिक करें.
- उस फ़ोल्डर को हाइलाइट करें जिसमें आपकी दिलचस्पी है.
- बदलाव करें पर क्लिक करें. इसके बाद, "फ़ाइल सिस्टम में बदलाव करें" विंडो दिखेगी. इस विंडो से मैपिंग और/या बाहर रखे गए फ़ोल्डर जोड़े या हटाए जा सकते हैं.
