शुरुआती जानकारी
Google Chrome एक बेहतरीन और दमदार वेब ब्राउज़र है, जो वेब पर ऐप्लिकेशन के इस्तेमाल की संभावनाओं को बढ़ाता है. Google ने असली उपयोगकर्ताओं को तेज़ी से, ठीक से काम करने और बेहतर ब्राउज़िंग का अनुभव देने के लिए कड़ी मेहनत की है. Google ने यह भी पक्का किया है कि आप जैसे डेवलपर को Chrome के साथ बेहतरीन अनुभव मिले. Chrome और Safari में उपलब्ध डेवलपर टूल, बंडल किए गए और उपलब्ध हैं. इनकी मदद से वेब डेवलपर और प्रोग्रामर, ब्राउज़र और अपने वेब ऐप्लिकेशन के अंदरूनी हिस्से को अच्छी तरह से ऐक्सेस कर सकते हैं.
डेवलपर टूल, ओपन सोर्स Webkit प्रोजेक्ट का हिस्सा हैं. इस लेख की ज़्यादातर चर्चा Google Chrome और Safari, दोनों पर लागू होती है. हालांकि, स्क्रीनशॉट Google Chrome 6 का इस्तेमाल करके लिए गए हैं, इसलिए आपके ब्राउज़र में कुछ अंतर हो सकते हैं.
इस लेख में, हम डेवलपर टूल के बारे में खास जानकारी देंगे. साथ ही, टूल के सबसे लोकप्रिय और काम की सुविधाओं के बारे में बताएंगे. हमारी टारगेट ऑडियंस वे वेब डेवलपर हैं जिन्हें डेवलपर टूल के बारे में जानकारी नहीं है या उन्होंने इसके बारे में अब तक कोई जांच नहीं की है. हालांकि, हमें भरोसा है कि अगर आप एक अनुभवी वेब डेवलपर हैं, तब भी आपको एक या दो सलाह ज़रूर मिलेगी.
अगर डेवलपर टूल के आपके इंस्टेंस, इस लेख में दिए गए स्क्रीनशॉट से पूरी तरह मेल नहीं खाते हैं, तो हमारा सुझाव है कि आप अपने मौजूदा वर्शन को 5 पर अपग्रेड करें. ऐसा करने से, आपको यहां बताई गई सभी सुविधाओं का ऐक्सेस मिल जाएगा.
खास जानकारी
कुल मिलाकर, व्यू डेवलपर टूल के आठ मुख्य ग्रुप उपलब्ध हैं. हर रिलीज़ के साथ सुविधाएं बढ़ाई जा रही हैं. Chrome 5 में अब आपको एलिमेंट, संसाधन, स्क्रिप्ट, टाइमलाइन, प्रोफ़ाइल, स्टोरेज, ऑडिट, और कंसोल की सुविधा मिलती है.
एलिमेंट
एलिमेंट टूल की मदद से, वेब पेज को वैसा ही देखा जा सकता है जैसा ब्राउज़र देखता है. इसका मतलब है कि एलिमेंट टूल का इस्तेमाल करके, रॉ एचटीएमएल, रॉ सीएसएस स्टाइल, और दस्तावेज़ ऑब्जेक्ट मॉडल देखा जा सकता है और रीयल टाइम में उनमें बदलाव किया जा सकता है.
रिसॉर्स
आपके वेब पेज या ऐप्लिकेशन के किन कॉम्पोनेंट के लिए वेब सर्वर से अनुरोध किया जा रहा है, इन अनुरोधों में कितना समय लगता है, और कितनी बैंडविड्थ की ज़रूरत है, यह जानने के लिए संसाधन टूल का इस्तेमाल करें. अपने हर रिसॉर्स के लिए, एचटीटीपी अनुरोध और रिस्पॉन्स हेडर भी देखे जा सकते हैं. संसाधन टूल, पेज लोड होने के समय को कम करने में आपकी मदद करता है.
स्क्रिप्ट
किसी पेज की JavaScript में पीयर करने के लिए, आपको स्क्रिप्ट टूल का इस्तेमाल करना होगा. यहां आपको पेज के लिए ज़रूरी स्क्रिप्ट की सूची और सभी फ़ीचर्ड स्क्रिप्ट डीबगर मिल सकता है. आप JavaScript को तुरंत भी बदल सकते हैं!
टाइमलाइन
टाइमिंग और स्पीड का बेहतर विश्लेषण करने के लिए, टाइमलाइन टूल Chrome की पर्दे के पीछे की गतिविधियों की पूरी जानकारी देता है. आपके पास यह जानने का विकल्प होता है कि ब्राउज़र को डीओएम इवेंट मैनेज करने, पेज लेआउट को रेंडर करने, और विंडो को पेंट करने में कितना समय लगता है.
प्रोफ़ाइलें
Profiles टूल, JavaScript स्क्रिप्ट की परफ़ॉर्मेंस को कैप्चर करने और उसका विश्लेषण करने में आपकी मदद करता है. उदाहरण के लिए, आपके पास यह पता करने का विकल्प होता है कि किन फ़ंक्शन को लागू होने में सबसे ज़्यादा समय लगता है और किन फ़ंक्शन को ऑप्टिमाइज़ करना है.
डिवाइस का स्टोरेज
आधुनिक वेब ऐप्लिकेशन को सामान्य तौर पर कुकी की तुलना में ज़्यादा बने रहने की ज़रूरत होती है. साथ ही, स्टोरेज टूल लोकल ब्राउज़र के स्टोरेज को ट्रैक करने, क्वेरी करने, और डीबग करने में आपकी मदद करता है. यह टूल लोकल डेटाबेस, लोकल स्टोरेज, सेशन स्टोरेज, और कुकी में स्टोर किए गए डेटा को दिखा सकता है और उस पर क्वेरी कर सकता है.
ऑडिट
ऑडिट टूल आपके बगल में बैठे हुए आपके वेब ऑप्टिमाइज़ेशन सलाहकार के होने जैसा है. यह टूल, पेज के लोड होने पर उसका विश्लेषण कर सकता है. साथ ही, पेज लोड होने के समय को कम करने और अनुमानित (और सही) रिस्पॉन्सिंग को बढ़ाने के लिए, सुझाव और ऑप्टिमाइज़ेशन की सुविधा दे सकता है.
Console
आखिर में, डेवलपर टूल सभी सुविधाओं वाला कंसोल उपलब्ध कराता है. कंसोल से, आर्बिट्रेरी 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 ब्राउज़िंग
पेज के किसी पहलू के लिए एचटीएमएल स्निपेट की पहचान करने की ज़रूरत पड़ने पर, आप अक्सर एलिमेंट टैब पर जाएंगे. उदाहरण के लिए, आप यह जानना चाहते हैं कि क्या किसी इमेज में एचटीएमएल आईडी एट्रिब्यूट है और उस एट्रिब्यूट की वैल्यू क्या है.
कभी-कभी किसी पेज का "सोर्स देखना", एलिमेंट टैब का बेहतर तरीका होता है. एलिमेंट टैब में, पेज का DOM अच्छी तरह से फ़ॉर्मैट किया जाएगा. इससे आपको एचटीएमएल एलिमेंट, उनका वंशावली, और डिसेंडेंट आसानी से दिखेंगे. कई बार, आपके देखे गए पेजों पर छोटा या खराब एचटीएमएल होता है. इससे यह देखना मुश्किल हो जाता है कि पेज कैसा बना है. एलिमेंट टैब की मदद से, पेज का असल स्ट्रक्चर देखा जा सकता है.
उदाहरण के लिए, Google के होम पेज के "सोर्स देखें" से मिलने वाला आउटपुट नीचे दिया गया है.
ऊपर दिए गए सोर्स को पढ़ना मुश्किल है, क्योंकि इसे ऑप्टिमाइज़ और छोटा किया गया है. यह फ़ॉर्मैट क्लाइंट और सर्वर के लिए अच्छा है, लेकिन डेवलपर के लिए मुश्किल है!
इसके बजाय, जब आपको किसी पेज का सोर्स पढ़ना हो, तो एलिमेंट टैब का इस्तेमाल करके, प्रिंट किए गए सिंटैक्स में हाइलाइट किए गए एलिमेंट की हैरारकी देखें.
एलिमेंट टैब की मदद से, पेज पर मौजूद किसी भी एलिमेंट को ब्राउज़ किया जा सकता है, उससे इंटरैक्ट किया जा सकता है, और कभी-कभी स्टाइल, मेट्रिक, प्रॉपर्टी, और इवेंट लिसनर में भी बदलाव किया जा सकता है.
स्टाइल ब्राउज़िंग
सीएसएस की कैस्केडिंग प्रकृति की वजह से, एलिमेंट टैब में मौजूद स्टाइल ब्राउज़र बहुत काम के बन जाते हैं. कभी-कभी, स्टाइल अपने-आप छिप जाती हैं और अनचाहे विज़ुअल दिखते हैं. यह जानने से कि ब्राउज़र, एलिमेंट पर कौनसा स्टाइल लागू कर रहा है, इस तरह की समस्या को डीबग करने में मदद मिलती है.
एलिमेंट टैब में किसी भी एलिमेंट पर क्लिक करने पर, उस एलिमेंट से अटैच की गई सभी स्टाइल दिखेंगी.
ऊपर दिए गए स्क्रीनशॉट में आप देखेंगे कि हम लागू की जा रही सभी स्टाइल एट्रिब्यूट के बारे में बता सकते हैं. उदाहरण के लिए, पैडिंग (जगह) सीधे <img> एलिमेंट के स्टाइल एट्रिब्यूट से मिलती है. हालांकि, चौड़ाई और ऊंचाई अपने-आप एट्रिब्यूट के आधार पर तय होती है. दिलचस्प बात यह है कि स्टाइल को <center> टैग, <body> टैग, और दूसरे टैग से भी इनहेरिट किया जाता है.
अलग-अलग स्टाइल और वे कहां से आती हैं, यह देखना एक शानदार काम है. हालांकि, एलिमेंट पर कंप्यूटेशन करके उसे लागू करने के बाद, स्टाइल के फ़ाइनल सेट को देखना भी बहुत मददगार होता है. नीचे दिए गए स्क्रीनशॉट में दिखाए गए तरीके से कंप्यूटेड स्टाइल मेन्यू को चुनकर, फ़ाइनल प्रॉडक्ट देखा जा सकता है.
इसके बाद, हम एलिमेंट टैब से मिलने वाली अन्य सुविधाओं के बारे में जानेंगे. हम आने वाले लेखों में इन चीज़ों के बारे में ज़्यादा जानकारी देंगे.
बॉक्स मॉडल
मेट्रिक मेन्यू चुनकर, चुने गए एलिमेंट पर लागू होने वाला बॉक्स मॉडल देखा जा सकता है:
एलिमेंट के प्रॉपर्टी
प्रॉपर्टी मेन्यू को चुनकर, JavaScript और DOM को एलिमेंट की सभी प्रॉपर्टी दिखेंगी:
घटना श्रोता
आखिर में, इवेंट लिसनर मेन्यू के ज़रिए, एलिमेंट से जुड़े इवेंट लिसनर या उस बबल को देखा जा सकता है:
खास जानकारी
एलिमेंट टैब में कई सुविधाएं मिलती हैं. आने वाले समय में आने वाले लेखों में, आपको हर मेन्यू के बारे में विस्तार से बताया जाएगा.
यह देखने के लिए कि पेज ब्राउज़र पर कैसा दिखता है, आपको एलिमेंट टैब का इस्तेमाल करना चाहिए. "इस स्टाइल को कैसे कंप्यूट किया गया है?" या "इस कॉम्पोनेंट को कौनसे एचटीएमएल टैग ने जनरेट किया है?" जैसी सामान्य समस्याओं का जवाब एलिमेंट टैब की मदद से तुरंत और आसानी से दिया जा सकता है.
एलिमेंट टैब को एक uber-"व्यू सोर्स" की तरह देखें, और इससे आपके पेज को बहुत अच्छी तरह से देखा जा सकता है.
पेज की जांच करने के बाद, आपको लग रहा होगा कि एचटीएमएल, सीएसएस, और इमेज को पेज में सबसे पहले कैसे दिखाया गया. आगे बताए गए संसाधन टैब से, आपको यह पता चलता है कि क्लाइंट ब्राउज़र और वेब सर्वर, उन संसाधनों को भेजने के लिए कैसे बातचीत करते हैं.
रिसॉर्स
ऐप्लिकेशन के काम करने के बाद, आपका अगला कदम नेटवर्क और बैंडविड्थ की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना होना चाहिए. आपको अपने ऐप्लिकेशन को सर्वर से क्लाइंट तक, जल्द से जल्द और कम समय में ट्रांसफ़र करने की कोशिश करनी चाहिए. तेज़ी से पेज लोड होने पर आपके उपयोगकर्ता आपका शुक्रिया अदा करेंगे. साथ ही, आप बैंडविथ और सर्वर के संसाधनों पर पैसे बचा पाएंगे. साथ ही, आपको Google के खोज नतीजों की रैंकिंग में भी बेहतर स्कोर मिलेगा, जिसमें अब साइट की स्पीड का हिसाब रखा जाता है.
डेवलपर टूल में मौजूद संसाधन टैब की मदद से, वेब सर्वर और क्लाइंट ब्राउज़र के बीच कम्यूनिकेशन किया जा सकता है. आप ब्राउज़र द्वारा अनुरोध किए गए सभी संसाधनों को देख सकते हैं (यह हमेशा बहुत ही अद्भुत होता है!), उन सभी को सर्वर से मिलने में लगने वाला समय, और स्थानांतरण के दौरान कितनी बैंडविड्थ का उपयोग किया जाता है.
विडंबना यह है कि संसाधन टैब चलाने से पेज लोड होने की परफ़ॉर्मेंस पर असर पड़ता है. इसलिए, यह डिफ़ॉल्ट रूप से बंद रहता है. पहली बार इस सुविधा को ऐक्सेस करने के लिए, आपको इसे उस पेज के लिए चालू करना होगा जिसे देखा जा रहा है.
हमारा सुझाव है कि आप डिफ़ॉल्ट तौर पर "सिर्फ़ इस सेशन के लिए चालू करें" को चुना हुआ रहने दें, क्योंकि आपको परफ़ॉर्मेंस पर बुरा असर नहीं पड़ने देना है. "संसाधन ट्रैकिंग चालू करें" पर क्लिक करने के बाद, पेज फिर से लोड होगा और डेवलपर टूल, सर्वर से भेजे गए संसाधनों की निगरानी करेगा और उन्हें दिखाएगा.
नीचे दिया गया स्क्रीनशॉट, Google के होम पेज के लिए ज़रूरी संसाधनों और लोड किए गए संसाधनों को दिखाता है.
इस स्क्रीन पर बहुत सारी जानकारी है. आइए, एक-एक करके इसके बारे में बात करते हैं.
डिफ़ॉल्ट तरीका आपको यह दिखाना है कि पेज के लिए सभी रिसॉर्स का अनुरोध करने और उन्हें लोड करने में कितना समय लगा. संसाधनों की सूची को नीचे स्क्रोल करने पर आपको हैरानी हो सकती है, क्योंकि आपको शायद यह पता नहीं होगा कि क्लाइंट ने कितने अलग-अलग अनुरोध किए हैं. क्लाइंट से ज़्यादा अनुरोध मिलने से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. अनुरोध की गई चीज़ की जानकारी हासिल करना, ऑप्टिमाइज़ेशन और संसाधनों की कमी का पहला चरण है.
अगर आपकी दिलचस्पी सिर्फ़ इमेज या स्टाइल शीट में है, तो मुख्य टैब विंडो में सीधे मेन्यू का इस्तेमाल करके रिसॉर्स टाइप को फ़िल्टर किया जा सकता है.
आपको यह भी पता चलेगा कि संसाधनों का अनुरोध किस क्रम में किया गया है. टाइमलाइन डिसप्ले का इस्तेमाल करके, आपको इस बारे में बेहतर जानकारी मिल सकती है कि आपके पेज पर कुछ एलिमेंट, दूसरे एलिमेंट के मुकाबले बाद में क्यों दिखते हैं.
अनुरोध किए गए सभी संसाधनों और उनकी मदद से अनुरोध की पूरी समयावधि की खास जानकारी हासिल करने के बाद, अलग-अलग संसाधनों का विश्लेषण किया जा सकता है.
अगर आपको पता चलता है कि हर बार पेज ऐक्सेस करने पर, कुछ संसाधनों का अनुरोध किया जा रहा है, तो यह इस बात का संकेत है कि आपके कैश मेमोरी में सेव किए जाने वाले हेडर सही तरीके से कॉन्फ़िगर नहीं किए गए हैं. बाईं ओर दी गई सूची में संसाधन पर क्लिक करके, उस संसाधन के सभी हेडर देखे जा सकते हैं.
हेडर डिसप्ले का इस्तेमाल करके यह पक्का करें कि उम्मीद के मुताबिक एचटीटीपी रिस्पॉन्स कोड सेट किया गया है और सही हेडर दिए गए हैं. उदाहरण के लिए, अगर संसाधन को बहुत कम या कभी बदला नहीं जाता, तो आपके सर्वर को 'खत्म होने की तारीख' हेडर सेट करना चाहिए, ताकि आने वाले समय में ज़्यादा समय हो. इससे ब्राउज़र को पता चल जाएगा कि इस तारीख तक, इस संसाधन के लिए दोबारा अनुरोध नहीं किया जाना चाहिए. इससे आपके पेज के लिए ज़रूरी एचटीटीपी कनेक्शन की संख्या कम हो जाती है और आपकी साइट तेज़ी से लोड होती है.
खास जानकारी
संसाधन टैब में और भी बहुत कुछ है जिसके बारे में हम आने वाले लेख में बताएंगे.
आपका क्लाइंट ब्राउज़र, वेब सर्वर के साथ कैसे कम्यूनिकेट कर रहा है, यह जानने के लिए संसाधन टैब का इस्तेमाल करें. इस जानकारी का इस्तेमाल करके, अनुरोध के समय, साइज़, और अनुरोध के क्रम जैसी जानकारी का इस्तेमाल करके, सर्वर का लोड कम करने, लागत कम करने, और स्पीड बढ़ाने, और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए स्मार्ट ऑप्टिमाइज़ेशन किए जा सकते हैं.
आपकी वेबसाइट, उपयोगकर्ताओं, और सर्च इंजन के लिए, स्पीड बहुत ज़रूरी है. संसाधनों की संख्या और साइज़ कम कर लेने और सही एचटीटीपी बातचीत होने के बाद, अगला चरण आपके पेज पर चल रही स्क्रिप्ट की जांच करना और उन्हें ऑप्टिमाइज़ करना है. अच्छी बात यह है कि जिस स्क्रिप्ट टैब के बारे में आगे चर्चा की गई है, यह ठीक वैसा ही है.
जानकारी पाने के दूसरे तरीके
डेवलपर टूल के बारे में ज़्यादा जानकारी के लिए, हम आपको ये सुझाव दे सकते हैं:
- Chrome डेवलपर टूल के प्रज़ेंटेशन के वीडियो और स्लाइड, Google I/O 2010 से लिए गए
- Chrome डेवलपर टूल ट्यूटोरियल
और हां, इस लेख के दूसरे हिस्से के लिए, html5rocks.com पर अन्य शानदार HTML5 और Chrome कॉन्टेंट के साथ बने रहें.