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