आमतौर पर किसी वेब पेज को एडिट करते समय हम एक विशिष्ट एडिटिंग टूल जैसे Adobe Dreamweaver, CoffeeCup, Bluefish या किसी अन्य डेवलपमेंट टूल का उपयोग करते हैं। लेकिन क्या होगा अगर हम सिर्फ दिमाग लगा रहे हैं या लाइव पेज पर कुछ आज़माना चाहते हैं? हम अपनी पसंद के टूल में पेज की एक कॉपी बना सकते हैं और उसी के साथ खेल सकते हैं। या हम इसे अपने वेब ब्राउजर में कर सकते हैं। यह ट्यूटोरियल आपको यह दिखाने जा रहा है कि अपने ब्राउज़र में वेब पेज को कैसे संपादित किया जाए।
डेवलपर टूल के रूप में संदर्भित, फ़ायरफ़ॉक्स ने फीचर इंस्पेक्ट एलिमेंट को कॉल किया, जबकि क्रोम इसे निरीक्षण कहता है। किसी भी तरह से, यह ब्राउजर के लिए एक तरीका है कि वह आपके डिजाइन की शाइन के पीछे जाए और उस कोड को देख ले जो उसे ड्राइव करता है। यह सुविधा काफी प्रसिद्ध है और इसका बहुत उपयोग किया जाता है। बहुत अच्छी तरह से ज्ञात नहीं है कि मक्खी पर उस कोड में परिवर्तन करने की क्षमता है।
आपके द्वारा किया गया कोई भी परिवर्तन सहेजा नहीं जाएगा और यह लाइव को प्रभावित नहीं करेगा। यदि आप अपने डेवलपर टूल में पेज लोड नहीं करना चाहते हैं, तो यह प्रयोग करने का एक अच्छा तरीका है।
अपने ब्राउज़र में किसी भी वेब पेज को संपादित करें
ड्रीमविवर और इसके जैसे टूल में एक अंतर्निहित ब्राउज़र एमुलेटर है जो अनुकरण करता है कि विभिन्न ब्राउज़रों में डिज़ाइन कैसा दिखेगा। जितने अच्छे हैं, वे हमेशा सटीक नहीं होते हैं और आप अक्सर एक साइट लॉन्च करते समय पाते हैं कि आपके डेवलपर टूल में जो शानदार दिख रहा था वह स्टैंडअलोन ब्राउज़र में थोड़ा अलग दिखता है।
आमतौर पर आप इस कारण से लाइव लॉन्च करने से पहले एक आंतरिक वेब सर्वर पर साइट लॉन्च करेंगे और एक ब्राउज़र में परीक्षण करेंगे। यदि कोई पृष्ठ पहले से ही लाइव है या आप केवल कुछ आज़माना चाहते हैं, तो उसे अपने विकास उपकरण में कॉपी और लोड करने की कोई आवश्यकता नहीं है, आप बस ब्राउज़र के डेवलपर टूल का उपयोग कर सकते हैं।
मैं फ़ायरफ़ॉक्स का उपयोग करता हूं इसलिए मैं आपको दिखाऊंगा कि कैसे उपयोग करना है। क्रोम हालांकि बहुत समान है।
- एक वेबपेज खोलें जिसे आप अपने ब्राउज़र में प्रयोग करना चाहते हैं।
- पृष्ठ पर कहीं भी राइट क्लिक करें और निरीक्षण का चयन करें।
आपको अपने पृष्ठ को दो में विभाजित करना चाहिए जिसमें एक नया फलक दिखाई दे रहा है जिसमें नीचे कुछ कोड है। यह कोड आपके द्वारा चुने गए पृष्ठ की प्रेरक शक्ति है। विभिन्न पृष्ठ तत्व निचले टैब के शीर्ष पर टैब से सुलभ हैं। उदाहरण के लिए, हम फ़ायरफ़ॉक्स में इंस्पेक्टर, कंसोल, डीबगर, स्टाइल एडिटर आदि देखते हैं।
यदि आप अपने कर्सर को निचले फलक की तर्ज पर चलाते हैं तो आपको वेब पेज हाइलाइट के विभिन्न भाग दिखाई देंगे। हाइलाइट के दौरान आप जिस कोड पर होते हैं, वह कोड होता है जो पेज के उस हिस्से को प्रभावित करता है।
- यदि आप पृष्ठ के साथ खेलना चाहते हैं, तो स्टाइल एडिटर आज़माएं।
- यदि आप पृष्ठ के साथ काम करना चाहते हैं, तो कंसोल या एक्सेस करने का प्रयास करें।
- यदि आप बग को शांत करना चाहते हैं या किसी समस्या को हल करना चाहते हैं, तो कंसोल या डीबगर का उपयोग करें
प्रदर्शन ऑनसाइट एसईओ के लिए उपयोगी है, लेकिन मेमोरी, नेटवर्क और स्टोरेज का इतना उपयोग नहीं किया जाता है।
याद रखें, आप डेवलपर टूल में जितना चाहें उतना गड़बड़ कर सकते हैं और यह साइट को प्रभावित नहीं करेगा। केवल आपके व्यक्तिगत ब्राउज़र में पृष्ठ कैसे प्रदर्शित किया जाता है, इसके बारे में कोई भी बदलाव किया जाता है, आप वेबसाइट को ही प्रभावित नहीं करते हैं। एक बार जब आप उपकरण बंद कर देते हैं, तो सभी परिवर्तन खो जाते हैं।
पृष्ठ में परिवर्तन करना
अब आप जानते हैं कि वास्तविक वेबसाइट को प्रभावित किए बिना आप अपनी पसंद के अनुसार कुछ भी बदल सकते हैं, चलिए थोड़ा मजा लेते हैं। उस पृष्ठ पर एक तत्व ढूंढें जिसे आप संपादित करना चाहते हैं। आप एक फ़ॉन्ट, एक फ़ॉन्ट रंग, पृष्ठभूमि छवि या जो कुछ भी आप चाहें बदल सकते हैं। इस उदाहरण के लिए, मैं बैनर शीर्षक का फ़ॉन्ट रंग बदलने जा रहा हूँ।
- उस सटीक तत्व पर राइट क्लिक करें जिसे आप बदलना चाहते हैं और निरीक्षण का चयन करें।
- पंक्ति को 'शीर्षक' या 'H1' के साथ हाइलाइट करें, ताकि पाठ शीर्ष फलक में हाइलाइट हो।
- बाएं दो पैन पर नेविगेट करें और फ़ॉन्ट रंग ढूंढें।
- कुछ अलग करने के लिए मान बदलें या चयनकर्ता का उपयोग करने के लिए रंग डॉट का चयन करें।
परिवर्तन समाप्त करते ही आपका परिवर्तन गतिशील रूप से प्रकट होगा। आप रंग, आकार, फ़ॉन्ट, पृष्ठभूमि और फ़ॉन्ट के बारे में सब कुछ बदल सकते हैं। आप कार्य को नहीं बचा सकते हैं लेकिन आपके परिवर्तन उस सत्र के लिए बने रहेंगे।
आप उस पृष्ठ के बारे में सब कुछ बदल सकते हैं जो आदर्श है यदि आपके पास एक विचार है और अपने सभी विकास एप्लिकेशन को फायर करने से पहले इसे जल्दी से देखना चाहते हैं। आपको बस यह याद रखना है कि आपने क्या बदलाव किए हैं और जहां आप उन्हें यहां नहीं बचा सकते हैं। आपको स्क्रीनशॉट लेने या परिवर्तनों को रिकॉर्ड करने और इसे छड़ी बनाने के लिए अपने डेवलपर टूल के भीतर दोहराने की आवश्यकता होगी।
अपने ब्राउज़र में एक वेब पेज का संपादन करना, पृष्ठों के साथ प्रयोग करने या खेलने का एक अच्छा तरीका है। यह महंगा डेवलपर टूल खरीदने के बिना वेब विकास के बारे में थोड़ा जानने का एक अच्छा तरीका है। अब तुम्हें पता है कि कैसे, जाओ और एक नाटक है!
