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