विजुअल स्टूडियो 2012 के साथ प्रभावी वेब विकास: पेज इंस्पेक्टर

किसी भी वेब परियोजना में, कार्य अक्सर पुराने पृष्ठों, नियंत्रणों, पृष्ठ लेआउट, लेआउट, और इसी तरह बदलते रहते हैं। जब आप अपने प्रोजेक्ट में बहुत कम पृष्ठ रखते हैं तो वेब प्रोजेक्ट की पूरी संरचना को ध्यान में रखना आसान होता है। एक और बात यह है कि जब ऐसे सैकड़ों पृष्ठ होते हैं, और वे टेम्पलेट, मास्टर पेज, नियंत्रण और उनमें अंतर्निहित अन्य नियंत्रणों के आधार पर बनते हैं।

ऐसे कभी-कभी भ्रमित करने वाले पृष्ठ रेंडरिंग सिस्टम को समझना बहुत मुश्किल हो सकता है। यह उन विशेषज्ञों के लिए विशेष रूप से सच है, जिन्होंने अभी एक जटिल परियोजना पर काम करना शुरू किया है या जिन्हें समर्थन के लिए एक पुरानी परियोजना मिली है।

इस समस्या को हल करने के लिए, Visual Studio 2012 ने एक नया पेज इंस्पेक्टर टूल जोड़ा है, जो आपको अपनी परियोजना के वेब पेजों की जांच करने की अनुमति देता है, न कि क्लाइंट साइड पर परिणामस्वरूप मार्कअप, जैसे इंटरनेट एक्सप्लोरर डेवलपर टूल या फायरबग, लेकिन सर्वर साइड पर एक कोड बाइंडिंग के साथ। जो इस मार्कअप को उत्पन्न करता है।

पेज इंस्पेक्टर

यदि आप विज़ुअल स्टूडियो 2012 शुरू करते हैं और किसी भी प्रोजेक्ट को वेब एप्लिकेशन के साथ लोड करते हैं (आप MVC4 के आधार पर एक नया बना सकते हैं), तो टूलबार में आपको एक तत्व मिलेगा जो आपको अपने वेब एप्लिकेशन (चित्रा 1) को लॉन्च करने के लिए एक ब्राउज़र चुनने की अनुमति देता है।


चित्र 1। एक वेब एप्लिकेशन लॉन्च करने के लिए एक ब्राउज़र चुनना

आपके सिस्टम में इंस्टॉल किए गए ब्राउज़रों की सूची में एक नया तत्व पेज इंस्पेक्टर होगा, जो आपको किसी भी ब्राउज़र में संभव से अधिक विस्तृत शोध के लिए एप्लिकेशन चलाने की अनुमति देता है।

सूची में पेज इंस्पेक्टर का चयन करके, आप निष्पादन के लिए अपना आवेदन चला सकते हैं। एक ब्राउज़र के बजाय, इसे विकास पर्यावरण यूआई (चित्रा 2) के अंदर लॉन्च किया जाएगा।

नोट। विजुअल स्टूडियो 11 के पूर्व-रिलीज़ संस्करणों में, पेज इंस्पेक्टर शुरू करने के लिए एक पैरामीटर जोड़ने के लिए (स्वचालित) web.config फ़ाइल को बदलने की आवश्यकता होती है। Visual Studio 2012 RC में आगे, इस परिवर्तन की आवश्यकता नहीं है।

अंजीर। २। लॉन्च किया गया पेज इंस्पेक्टर

कृपया ध्यान दें कि हमारा एप्लिकेशन विजुअल स्टूडियो 2012 के अंदर लॉन्च किया गया था, जो एक वेब पेज के साथ काम करने के लिए अतिरिक्त उपकरण प्रदान करता है।

पेज इंस्पेक्टर का सबसे महत्वपूर्ण कार्य पृष्ठों का निरीक्षण करने की क्षमता है, जैसा कि डेवलपर टूल इंटरनेट एक्सप्लोरर में करता है, उदाहरण के लिए, लेकिन IE के विपरीत, लेआउट और लेआउट के बारे में उपयोगी जानकारी के साथ, हमें यह भी जानकारी मिलती है कि यह लेआउट कैसे उत्पन्न हुआ, कहां परियोजना में, किस फ़ाइल में और किस कोड के टुकड़े के साथ।

उदाहरण के लिए, हमें यह पता लगाने की जरूरत है कि "इनपुट" लाइन के साथ इसे बदलने के लिए "लॉग इन" लाइन कहां से उत्पन्न हुई है। परियोजना की जटिलता के आधार पर, आपके पृष्ठों पर विभिन्न फ़ाइलों के दर्जनों घटक हो सकते हैं। इसलिए हमारी परियोजना में एक लेआउट फ़ाइल, पेज फ़ाइल और नियंत्रण है। जल्दी से सही जगह खोजने के लिए, यह बहुत समय ले सकता है।

पेज इंस्पेक्टर आपको कुछ क्षणों में आवश्यक कोड खोजने की अनुमति देता है। बस "निरीक्षण" पर क्लिक करें और लाइन "लॉग इन" पर होवर करें। सब कुछ, आवश्यक घटक में आवश्यक कोड, आवश्यक फ़ाइल में तुरंत आपके सामने दिखाई देगा (चित्रा 3)।


चित्र 3। स्रोत कोड खोज

हमें केवल कोड में परिवर्तन करने की आवश्यकता है। पेज इंस्पेक्टर स्वचालित रूप से इन परिवर्तनों को बनाए रखता है और आपको ब्राउज़र के अंदर पृष्ठ को ताज़ा करने की पेशकश करता है (चित्र 4)।


चित्र 4। पृष्ठ ताज़ा अनुरोध

पृष्ठ को अपडेट करने के बाद, आप सही परिवर्तन (चित्र 5) सुनिश्चित करेंगे।


चित्र 5। पृष्ठ पर परिवर्तित रेखा

नोट। विजुअल स्टूडियो 2012 आरसी में, सभी पेज इंस्पेक्टर का काम विकास के मुख्य यूआई को अवरुद्ध किए बिना, अतुल्यकालिक रूप से किया जाता है, जो इसके साथ काम करना अधिक सुखद बनाता है।

सर्वर कोड निरीक्षण एक बहुत ही उपयोगी विशेषता है। आप बहुत आसानी से अपने पृष्ठों के लेआउट और निर्माण का पता लगा सकते हैं। उदाहरण के लिए, आइए यह निर्धारित करें कि हमारी साइट के तहखाने का निर्माण कौन सा कोड कर रहा है। ऐसा करने के लिए, हमें बस इसके ऊपर मंडराने की जरूरत है (चित्र 6)।


चित्र 6। साइट के तहखाने के साथ काम करें

जैसा कि आप देख सकते हैं, हमारे तहखाने के लिए जिम्मेदार सभी कोड परियोजना के सर्वर कोड में हाइलाइट किए गए हैं, जो हमें सही जगह पर आवश्यक परिवर्तन करने की अनुमति देता है।

पेज टेक्स्ट के साथ काम करें

विज़ुअल स्टूडियो 11 के मध्यवर्ती संस्करणों की तुलना में पेज इंस्पेक्टर में नवाचारों में से एक सर्वर फ़ाइल कोड (चित्रा 7) में इस पाठ के तुल्यकालिक चयन के साथ एक पृष्ठ पर पाठ का चयन करने के लिए समर्थन है।


चित्र 7। पृष्ठ टेक्स्ट, चयन के साथ काम करें

यह आपको एक विशिष्ट पाठ से संबंधित कोड में एक अनुभाग को जल्दी से चुनने और इसके साथ कुछ क्रियाएं करने की अनुमति देता है।

सीएसएस काम

HTML और CSS के साथ पेज इंस्पेक्टर में काम करना डेवलपर टूल या फायरबग जैसे टूल में काम करने के समान है। हालांकि, यहां, पेज इंस्पेक्टर को एक महत्वपूर्ण लाभ है: यह आपको सर्वर साइड पर CSS फ़ाइल कोड में जांच किए गए पृष्ठ तत्व के लिए सभी लागू शैलियों को स्वचालित रूप से खोजने की अनुमति देता है।

सीएसएस शैलियों के साथ काम करते समय, कई फ़ाइलों और शैलियों की समस्या भी होती है जो एक-दूसरे को ओवरराइड करती हैं। सीएसएस फ़ाइल खोजने के लिए सबसे तेज़ तरीका क्या है जहाँ आपको बदलाव करने की आवश्यकता है?

उदाहरण के लिए, कल्पना करें कि हमें मार्कअप (लाल!) में इस्तेमाल किए गए रंगों में से एक "शिलालेख" रजिस्टर और "लॉगिन" (पहले हमारे द्वारा परिवर्तित) का रंग बदलने की आवश्यकता है। निरीक्षक की मदद से, हम आवश्यक तत्व का चयन करते हैं और नीचे से हमें सीएसएस शैलियों मिलती है जो उस पर लागू होती हैं। ट्रेस स्टाइल्स टैब पर जाएं और आपको हमारे तत्व (चित्र 8) के लिए सभी अंतिम शैलियों मिलेंगी।


चित्र 8। आइटम शैलियाँ

अब तक, फायरबग में सब कुछ वैसा ही दिखता है। हम रंग में रुचि रखते हैं, इसलिए रंग तत्व का विस्तार करें और अंतिम मान पर जाएं, जो पिछले सभी को ओवरराइड करता है और पृष्ठ पर तत्व पर लागू होता है (चित्र 9)।


चित्र 9। शैली मान सूची

अगला चरण पेज इंस्पेक्टर को विशेष बनाता है। यदि आप अब शैली परिभाषाओं में से एक पर क्लिक करते हैं, तो आप तुरंत इस परिभाषा (चित्र 10) को उत्पन्न करने वाले सर्वर पर CSS फ़ाइल पर जाएंगे।


चित्र १०। सर्वर शैली परिभाषाओं के लिए खोजें

हमें केवल उस रंग को इंगित करने की आवश्यकता है जिसे हम अपने तत्वों के लिए पृष्ठ पर चाहते हैं। नए विज़ुअल स्टूडियो 2012 के लिए धन्यवाद - अंतर्निहित रंग पिकर, यह करना और भी आसान है (चित्र 11)।


चित्र 11। सीएसएस फ़ाइल में परिभाषित रंगों की सूची से एक रंग का चयन करें

पेज इंस्पेक्टर के अनुरोध पर, हम पेज को रिफ्रेश करेंगे और सुनिश्चित करेंगे कि बदलाव सफलतापूर्वक किए गए थे।

HTML का काम

अधिक दक्षता के लिए, पृष्ठ निरीक्षक आपको मार्कअप कोड (चित्र 12) द्वारा पृष्ठ पर परिणाम ब्लॉकों को ट्रैक करने की अनुमति देता है।


चित्र 12। प्रति पृष्ठ ट्रैकिंग ब्लॉक

यह फ़ंक्शन, यह समझने के अलावा कि एक या दूसरे मार्कअप कोड को कैसे प्रस्तुत किया गया है, इसके परिणामी आकार पर भी डेटा प्रदान करता है।

निष्कर्ष

यह आलेख क्लाइंट-साइड वेब एप्लिकेशन मार्कअप कोड के साथ कुशल कार्य के लिए विज़ुअल स्टूडियो 2012 में सबसे दिलचस्प नवाचारों में से एक पर चर्चा करता है। फायरबग और डेवलपर टूल जैसे टूल के विपरीत, पेज इंस्पेक्टर आपके सर्वर कोड के बारे में सब कुछ जानता है और आपको बताता है कि पेज का यह और कहां या कहां से आया है, तुरंत आपको सर्वर कोड को सही स्थान पर स्थानांतरित कर रहा है।