शुरुआती जानकारी
Google Chrome एक समृद्ध और शक्तिशाली वेब ब्राउज़र है, जो वेब पर मौजूद एप्लिकेशन के लिए क्या संभव है इसकी शुरुआत करता है. Google ने असली उपयोगकर्ताओं को तेज़, बहुत स्थिर, और शानदार ब्राउज़िंग अनुभव देने के लिए कड़ी मेहनत की है. Google ने यह भी पक्का किया है कि आप जैसे डेवलपर को Chrome का बेहतरीन अनुभव मिले. Chrome और Safari में बंडल किए गए और उपलब्ध डेवलपर टूल से, वेब डेवलपर और प्रोग्रामर को ब्राउज़र और उनके वेब ऐप्लिकेशन के अंदरूनी हिस्से का पूरा ऐक्सेस मिलता है.
डेवलपर टूल, ओपन सोर्स Webkit प्रोजेक्ट का हिस्सा हैं. इस लेख में दी गई ज़्यादातर चर्चा Google Chrome और Safari, दोनों पर लागू होती है. हालांकि, ये स्क्रीनशॉट Google Chrome 6 का इस्तेमाल करके लिए गए थे. इसलिए, आपके ब्राउज़र में थोड़ा अंतर हो सकता है.
इस लेख में, हम डेवलपर टूल की खास जानकारी देंगे और इसकी सबसे लोकप्रिय और उपयोगी सुविधाओं के बारे में बताएंगे. हमारी टारगेट ऑडियंस वे वेब डेवलपर हैं जिन्हें डेवलपर टूल के बारे में पता नहीं था या जिन्होंने अब तक उसकी जांच नहीं की है. हालांकि, हमें भरोसा है कि अगर आप एक अनुभवी वेब डेवलपर हैं, तो भी आपको एक या दो सलाह मिलेगी.
अगर डेवलपर टूल का आपका इंस्टेंस इस लेख में दिए गए स्क्रीनशॉट से पूरी तरह मेल नहीं खाता है, तो हमारा सुझाव है कि आप 5 में अपग्रेड करें, ताकि आप यहां बताई गई सभी सुविधाओं का इस्तेमाल कर सकें.
खास जानकारी
कुल मिलाकर, डेवलपर टूल व्यू के लिए उपलब्ध टूल के आठ मुख्य ग्रुप हैं. इन्हें हर रिलीज़ के साथ बेहतर बनाया जा रहा है. Chrome 5 में अब एलिमेंट, संसाधन, स्क्रिप्ट, टाइमलाइन, प्रोफ़ाइलें, स्टोरेज, ऑडिट, और कंसोल की सुविधा है.
एलिमेंट
एलिमेंट टूल की मदद से, वेब पेज को ठीक वैसा ही देखा जा सकता है जैसा ब्राउज़र को दिखता है. इसका मतलब है कि एलिमेंट टूल का इस्तेमाल करके, रॉ एचटीएमएल, रॉ सीएसएस स्टाइल, और डॉक्यूमेंट ऑब्जेक्ट मॉडल देखा जा सकता है. साथ ही, इनमें से किसी भी तरीके में रीयल टाइम में बदलाव किया जा सकता है.
संसाधन
आपका वेब पेज या ऐप्लिकेशन, वेब सर्वर से कौनसे कॉम्पोनेंट इस्तेमाल करने का अनुरोध कर रहा है, इन अनुरोधों में कितना समय लगता है, और इसके लिए कितनी बैंडविथ की ज़रूरत है, यह जानने के लिए रिसॉर्स टूल का इस्तेमाल करें. अपने हर रिसॉर्स के लिए, एचटीटीपी अनुरोध और रिस्पॉन्स हेडर भी देखे जा सकते हैं. पेज लोड होने की अवधि को तेज़ी से बढ़ाने में मदद करने के लिए, संसाधन टूल एक बेहतरीन टूल है.
स्क्रिप्ट
किसी पेज की JavaScript के अंदर पीयरिंग करने के लिए, आपको स्क्रिप्ट टूल का इस्तेमाल करना होगा. यहां आपको पेज के लिए ज़रूरी स्क्रिप्ट की सूची और पूरी तरह से फ़ीचर्ड स्क्रिप्ट डीबगर मिल सकता है. यहां तक कि आप तुरंत JavaScript को भी बदल सकते हैं!
टाइमलाइन
टाइमिंग और स्पीड के बेहतर विश्लेषण के लिए टाइमलाइन टूल, Chrome की पर्दे के पीछे की गई गतिविधियों को बारीकी से देखने की सुविधा देता है. आपके पास यह जानने का विकल्प होता है कि डीओएम इवेंट, पेज लेआउट को रेंडर करने, और विंडो को पेंट करने में ब्राउज़र को कितना समय लगता है.
प्रोफ़ाइलें
प्रोफ़ाइल टूल की मदद से, JavaScript स्क्रिप्ट की परफ़ॉर्मेंस कैप्चर की जा सकती है और उसका विश्लेषण किया जा सकता है. उदाहरण के लिए, यह जाना जा सकता है कि किन फ़ंक्शन को एक्ज़ीक्यूट करने में सबसे ज़्यादा समय लगता है और किन फ़ंक्शन को ऑप्टिमाइज़ करना है.
डिवाइस का स्टोरेज
मॉडर्न वेब ऐप्लिकेशन में कुकी के मुकाबले ज़्यादा स्थिरता की ज़रूरत होती है. स्टोरेज टूल, लोकल ब्राउज़र स्टोरेज को ट्रैक करने, क्वेरी करने, और डीबग करने में आपकी मदद करता है. यह टूल, लोकल डेटाबेस, लोकल स्टोरेज, सेशन स्टोरेज, और कुकी में स्टोर किए गए डेटा को दिखा सकता है और उसके बारे में क्वेरी कर सकता है.
ऑडिट
ऑडिट टूल में अपने वेब ऑप्टिमाइज़ेशन सलाहकार को अपने बगल में बैठाया जा सकता है. यह टूल, पेज के लोड होने पर उसका विश्लेषण कर सकता है. साथ ही, पेज के लोड होने की अवधि को कम करने और रिस्पॉन्स मिलने में लगने वाले समय को बढ़ाने के लिए, सुझाव और ऑप्टिमाइज़ेशन भी दे सकता है.
कंसोल
आखिर में, डेवलपर टूल पूरी तरह से चुनिंदा कंसोल उपलब्ध कराता है. कंसोल की मदद से, आर्बिट्रेरी JavaScript डाला जा सकता है और अपने पेज के साथ प्रोग्राम के हिसाब से इंटरैक्ट किया जा सकता है.
शुरू हो रहा है
Chrome में रहते हुए डेवलपर टूल शुरू करना आसान है.
किसी भी ऑपरेटिंग सिस्टम के लिए, पेज में मौजूद किसी भी एलिमेंट पर राइट क्लिक करें और संदर्भ मेन्यू से "एलिमेंट की जांच करें" विकल्प चुनें. इससे डेवलपर टूल खुल जाएगा और सीधे उस एलिमेंट पर जाएं जिस पर आपने क्लिक किया है.
इसे काम करता देखने के लिए, Chrome ब्राउज़र में http://www.google.com पर जाएं. Google लोगो पर राइट क्लिक करें और आपको ये विकल्प दिखेंगे:
"एलिमेंट की जांच करें" चुनने पर डेवलपर टूल सामने आ जाएगा, जो कुछ ऐसा दिखना चाहिए:
देखें कि कैसे एलिमेंट टैब में डेवलपर टूल खोला गया और Google लोगो के लिए <img> टैग तक अपने-आप ड्रिल-डाउन और हाइलाइट किया गया. यह तरीका उस समय काफ़ी मददगार होता है, जब आपको यह जानना होता है कि किस एचटीएमएल से कोई पेज एलिमेंट जनरेट हुआ है.
आप एक सामान्य कीबोर्ड शॉर्टकट से भी डेवलपर टूल खोल सकते हैं. अपने ऑपरेटिंग सिस्टम के आधार पर, नीचे दिया गया तरीका आज़माएं:
- Windows और Linux पर,
Control-Shift-Jबटन चुनें. - Mac पर,
Command-Option-Jबटन चुनें.
आखिर में, मुख्य ब्राउज़र मेन्यू से टूल खोलने का विकल्प चुना जा सकता है.
Mac पर और मुख्य ऐप्लिकेशन मेन्यू बार से, View, Developer, Developer Tools चुनें.
Windows पीसी पर, सबसे ऊपर दाईं ओर मौजूद पेज मेन्यू का इस्तेमाल करें. इसके बाद, 'डेवलपर टूल' चुनें.
अब जब आपके पास डेवलपर टूल खुला और तैयार है, तो आइए Google के होम पेज पर एलिमेंट को एक्सप्लोर करके शुरू करें.
एलिमेंट
डेवलपर टूल में पहला टैब एलिमेंट होता है. यह वेब पेज की संरचना में आपकी विंडो है, जो आपके ब्राउज़र को दिखाई देती है.
DOM ब्राउज़िंग
पेज के किसी पहलू के लिए एचटीएमएल स्निपेट की पहचान करने के लिए, आपको अक्सर एलिमेंट टैब पर जाना होगा. उदाहरण के लिए, हो सकता है कि आपको यह जानने में दिलचस्पी हो कि किसी इमेज में एचटीएमएल आईडी एट्रिब्यूट है या नहीं और उस एट्रिब्यूट की वैल्यू क्या है.
कभी-कभी एलिमेंट टैब, किसी पेज का "सोर्स देखने" का बेहतर तरीका होता है. एलिमेंट टैब के अंदर, पेज के डीओएम को सही तरीके से फ़ॉर्मैट किया जाएगा. इससे आपको एचटीएमएल एलिमेंट, उनके वंशज, और उनके डिसेंडेंट आसानी से दिखेंगे. कई बार, विज़िट किए जाने वाले पेजों का एचटीएमएल छोटा किया जाता है या खराब एचटीएमएल होता है. इससे यह देखना मुश्किल हो जाता है कि पेज किस तरह स्ट्रक्चर किया गया है. एलिमेंट टैब की मदद से, पेज का असल स्ट्रक्चर देखा जा सकता है.
उदाहरण के लिए, Google के होम पेज के "व्यू सोर्स" से मिला आउटपुट नीचे दिया गया है.
ऊपर दिए गए सोर्स को पढ़ना मुश्किल है, क्योंकि इसे ऑप्टिमाइज़ और छोटा किया गया है. यह फ़ॉर्मैट क्लाइंट और सर्वर के लिए अच्छा है, लेकिन डेवलपर के लिए मुश्किल है!
इसके बजाय, जब आपको किसी पेज का सोर्स पढ़ना हो, तो एलिमेंट टैब का इस्तेमाल करें. इससे प्रिट-प्रिंट किए गए सिंटैक्स में हाइलाइट किए गए एलिमेंट की हैरारकी को देखा जा सकता है.
एलिमेंट टैब की मदद से, पेज पर मौजूद किसी भी एलिमेंट को ब्राउज़ किया जा सकता है, इंटरैक्ट किया जा सकता है, और कभी-कभी उनकी स्टाइल, मेट्रिक, प्रॉपर्टी, और इवेंट लिसनर भी बदले जा सकते हैं.
स्टाइल ब्राउज़िंग
CSS की कैस्केडिंग प्रकृति, एलीमेंट टैब में मौजूद स्टाइल ब्राउज़र को बहुत उपयोगी बनाती है. कभी-कभी, स्टाइल अपने-आप खत्म हो जाती हैं और अनचाहे विज़ुअल दिखने लगते हैं. यह जानकर कि एलिमेंट पर ब्राउज़र कौनसा स्टाइलिंग नियम लागू कर रहा है, आपको इस तरह की समस्या को डीबग करने में मदद मिलती है.
एलिमेंट टैब में किसी भी एलिमेंट पर क्लिक करने पर, उससे जुड़ी सभी स्टाइल दिखेंगी.
आप ऊपर दिए गए स्क्रीनशॉट में देख सकते हैं कि हम लागू किए जा रहे सभी शैली एट्रिब्यूट के बारे में बता सकते हैं. उदाहरण के लिए, पैडिंग सीधे तौर पर <img> एलिमेंट के स्टाइल एट्रिब्यूट से मिलती है. हालांकि, ऊंचाई और चौड़ाई की जानकारी उनके मूल एट्रिब्यूट से मिलती है. दिलचस्प बात यह है कि कुछ स्टाइल, <center> टैग, <body> टैग वगैरह से भी इनहेरिट किए गए हैं.
अलग-अलग स्टाइल और उनके सोर्स को देखना अच्छा विकल्प है. हालांकि, एलिमेंट पर कंप्यूट और लागू करने के बाद, स्टाइल के फ़ाइनल सेट को देखना भी अच्छा विकल्प है. जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है, कंप्यूटेड स्टाइल मेन्यू को चुनकर फ़ाइनल प्रॉडक्ट देखा जा सकता है.
इसके बाद, हम एलिमेंट टैब से मिलने वाली अन्य सुविधाओं के बारे में कम शब्दों में जानेंगे. आने वाले समय में, हम आगे के लेखों में इनके बारे में ज़्यादा जानकारी देंगे.
बॉक्स मॉडल
मेट्रिक मेन्यू चुनकर, बॉक्स मॉडल को ऐसे देखा जा सकता है जो चुने गए एलिमेंट पर लागू होता है:
एलिमेंट के प्रॉपर्टी
प्रॉपर्टी मेन्यू को चुनकर, एलिमेंट की सभी प्रॉपर्टी को देखा जा सकता है, क्योंकि JavaScript और DOM उसे दिखेगा:
घटना श्रोता
और आखिर में, इवेंट लिसनर मेन्यू के ज़रिए एलिमेंट के साथ जुड़े इवेंट लिसनर या बबल को भी देखा जा सकता है:
खास जानकारी
'एलिमेंट' टैब में कई सुविधाएं उपलब्ध हैं. साथ ही, आने वाले समय में जिन लेखों को पब्लिश किया जाएगा उनमें अलग-अलग मेन्यू के बारे में विस्तार से बताया जाएगा.
ब्राउज़र को कोई पेज कैसा दिखता है, यह देखने के लिए आपको एलिमेंट टैब का इस्तेमाल करना होगा. "इस स्टाइल की गणना कैसे की गई है?" या "इस कॉम्पोनेंट को कौनसे एचटीएमएल टैग ने जनरेट किया?" जैसी सामान्य समस्याओं का एलिमेंट टैब के ज़रिए तुरंत और आसानी से जवाब दिया जाता है.
एलिमेंट टैब को किसी uber-"व्यू सोर्स" की तरह समझें और अपने पेज को बहुत तेज़ी से देखें.
पेज की जांच करने के बाद, आपके मन में यह ख्याल आ सकता है कि एचटीएमएल, सीएसएस, और इमेज कैसे पहली बार आए. इसके बाद, 'संसाधन' टैब में बताया गया है कि क्लाइंट ब्राउज़र और वेब सर्वर इन संसाधनों को भेजने के लिए कैसे बातचीत करते हैं.
संसाधन
जब आपका ऐप्लिकेशन काम करने लगता है, तो आपका अगला कदम नेटवर्क और बैंडविथ की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना होना चाहिए. आपको अपने ऐप्लिकेशन को एक सर्वर से दूसरे क्लाइंट तक, जल्द से जल्द और बेहतर तरीके से ट्रांसफ़र करने की कोशिश करनी चाहिए. आपके उपयोगकर्ता तेज़ी से पेज लोड होने के लिए आपको धन्यवाद देंगे, आप बैंडविड्थ और सर्वर संसाधनों पर पैसे बचाएंगे और Google की खोज परिणाम रैंक में भी बेहतर स्कोर हासिल करेंगे (जो अब साइट स्पीड को ध्यान में रखता है).
'डेवलपर टूल' में मौजूद 'संसाधन' टैब की मदद से, वेब सर्वर और क्लाइंट ब्राउज़र के बीच कम्यूनिकेशन को देखा जा सकता है. आप ब्राउज़र द्वारा अनुरोध किए गए सभी संसाधन देख सकते हैं (यह हमेशा हैरान करने वाला होता है!), उन्हें सर्वर से प्राप्त करने में लगने वाला समय और स्थानांतरण के दौरान कितनी बैंडविड्थ का उपयोग होता है.
विडंबना यह है कि संसाधन टैब चलाने से पेज लोड परफ़ॉर्मेंस प्रभावित होती है, इसलिए यह डिफ़ॉल्ट रूप से बंद रहता है. पहली बार सुविधा को ऐक्सेस करने पर, आपको उस पेज के लिए इसे चालू करना होगा जिसे देखा जा रहा है.
हमारा सुझाव है कि आप "सिर्फ़ इस सेशन के लिए चालू करें" को डिफ़ॉल्ट तौर पर चालू रखें, क्योंकि आपको परफ़ॉर्मेंस पर होने वाला छोटा-मोटा जुर्माना नहीं देना है. "संसाधन ट्रैकिंग चालू करें" पर क्लिक करने के बाद, पेज फिर से लोड होगा. साथ ही, डेवलपर टूल सर्वर से भेजे गए संसाधनों की निगरानी करेगा और उन्हें दिखाएगा.
इस स्क्रीनशॉट में, Google के होम पेज के लिए ज़रूरी और लोड किए गए संसाधन दिखाए गए हैं.
इस स्क्रीन पर बहुत सारी जानकारी दी गई है. आइए, एक-एक करके इस पर गौर करें.
डिफ़ॉल्ट तरीका आपको यह दिखाता है कि किसी पेज के लिए अनुरोध करने और सभी संसाधनों को लोड करने में कितना समय लगा. संसाधनों की सूची को नीचे स्क्रोल करने पर आपको हैरानी हो सकती है, क्योंकि हो सकता है कि आपको यह पता न हो कि क्लाइंट ने कितने अलग-अलग अनुरोध किए हैं. क्लाइंट से बड़ी संख्या में अनुरोध मिलने पर, परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. यह पता लगाना कि किस तरह की क्वेरी का अनुरोध किया गया है, संसाधनों को ऑप्टिमाइज़ करने और उनकी संख्या में कमी लाने का पहला कदम है.
अगर आपकी दिलचस्पी सिर्फ़ इमेज या स्टाइल शीट में है, तो आपके पास संसाधन को फ़िल्टर करने का विकल्प होता है. ऐसा करने के लिए, सीधे मुख्य टैब विंडो के नीचे मौजूद मेन्यू का इस्तेमाल करें.
इसके अलावा, आपको यह भी पता चलेगा कि संसाधनों के अनुरोध किस क्रम में किए गए हैं. टाइमलाइन डिसप्ले का इस्तेमाल करके बेहतर तरीके से यह समझा जा सकता है कि आपके पेज पर मौजूद कुछ एलिमेंट, दूसरों की तुलना में बाद में क्यों दिखते हैं.
अनुरोध किए गए सभी संसाधनों की खास जानकारी पाने और अनुरोध की पूरी समयावधि को तैयार करने के तरीके के बारे में जानने के बाद, आपको अलग-अलग संसाधनों के लिए ड्रिल-डाउन करना होगा.
अगर हर बार पेज ऐक्सेस करने पर कुछ रिसॉर्स के लिए अनुरोध किया जाता है, तो इसका मतलब है कि आपके कैश मेमोरी में मौजूद हेडर सही तरीके से कॉन्फ़िगर नहीं किए गए हैं. किसी संसाधन के सभी हेडर देखने के लिए, बाईं ओर दी गई सूची में संसाधन पर क्लिक करें.
हेडर डिसप्ले का इस्तेमाल करके यह पक्का करें कि उम्मीद के मुताबिक एचटीटीपी रिस्पॉन्स कोड सेट किया गया है और सही हेडर दिए गए हैं. उदाहरण के लिए, अगर संसाधन बहुत कम या कभी नहीं बदला गया है, तो आपके सर्वर को काफ़ी आगे के लिए, समयसीमा खत्म होने की जानकारी वाला हेडर सेट करना चाहिए. इससे ब्राउज़र को पता चलेगा कि उस तारीख तक, संसाधन के लिए फिर से अनुरोध नहीं किया जाना चाहिए. इससे आपके पेज के लिए ज़रूरी एचटीटीपी कनेक्शन कम हो जाते हैं और आपकी साइट तेज़ी से लोड होती है.
खास जानकारी
संसाधन टैब में और भी बहुत कुछ है, जिसकी जानकारी हम अगले लेख में देंगे.
आपका क्लाइंट ब्राउज़र, वेब सर्वर के साथ कैसे कम्यूनिकेट कर रहा है, यह जानने के लिए रिसॉर्स टैब का इस्तेमाल करें. अनुरोध का समय, अनुरोध के साइज़, और अनुरोध के ऑर्डर जैसी इस जानकारी का इस्तेमाल करके, स्मार्ट ऑप्टिमाइज़ेशन किए जा सकते हैं. इससे सर्वर के लोड को कम किया जा सकता है, लागत कम की जा सकती है, और स्पीड बढ़ाई जा सकती है. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.
आपकी वेबसाइट, उपयोगकर्ताओं, और सर्च इंजन के लिए स्पीड का होना बहुत ज़रूरी है. आपके रिसॉर्स की संख्या और साइज़ कम होने और सही एचटीटीपी बातचीत होने के बाद, अगला कदम अपने पेज पर चल रही स्क्रिप्ट की जांच करना और उन्हें ऑप्टिमाइज़ करना है. अच्छी बात यह है कि आगे जिस स्क्रिप्ट टैब के बारे में बात की गई है, वह ऐसा ही करता है.
जानकारी पाने के दूसरे तरीके
डेवलपर टूल के बारे में ज़्यादा जानकारी के लिए, हम आपको ये सुझाव दे सकते हैं:
- Chrome Developer Tools प्रज़ेंटेशन का वीडियो और Google I/O 2010 की स्लाइड
- Chrome डेवलपर टूल ट्यूटोरियल
और बेशक, इस लेख के बहुत से अन्य बढ़िया HTML5 और Chrome सामग्री के साथ html5rocks.com पर बने रहें.