"इंस्पेक्ट एलीमेंट" फ़ायरफ़ॉक्स ब्राउज़र में एक डेवलपर टूल है जिसका उपयोग आप किसी भी वेब पेज पर HTML कोड को ट्रैक करने के लिए कर सकते हैं। वेब पेज के HTML और CSS स्टाइलशीट को "इंस्पेक्ट एलीमेंट" के साथ संपादित किया जा सकता है। आप किसी पृष्ठ को अपनी पसंद के अनुसार संपादित करने का प्रयास कर सकते हैं और संपादित वेबपृष्ठ को फिर से लोड करके उसे वापस उसी तरह प्राप्त कर सकते हैं जैसे वह था।
कदम
2 का भाग 1: तत्वों की जाँच करना
चरण 1. फ़ायरफ़ॉक्स अपडेट करें (वैकल्पिक)।
यह संभव है कि यदि आप Firefox के पुराने संस्करण का उपयोग कर रहे हैं तो आप इस लेख में चर्चा की गई सुविधाओं तक नहीं पहुंच पाएंगे। जब आप जाँचेंगे कि आप फ़ायरफ़ॉक्स के किस संस्करण का उपयोग कर रहे हैं, तो अपडेट स्वचालित रूप से स्थापित हो जाएगा।
Firefox 9 और पुराने संस्करणों में "तत्व का निरीक्षण करें" टूल बिल्कुल भी नहीं है।
चरण 2. किसी भी वेबपेज तत्व पर राइट-क्लिक करें।
आप किसी भी इमेज, टेक्स्ट, बैकग्राउंड या एलिमेंट पर राइट-क्लिक कर सकते हैं। यदि आपके माउस में केवल एक बटन है, तो बायाँ-क्लिक और नियंत्रण कुंजी के संयोजन के परिणामस्वरूप दायाँ-क्लिक होगा।
चरण 3. ड्रॉप-डाउन मेनू से "तत्व का निरीक्षण करें" पर क्लिक करें।
विंडो के नीचे एक टूलबार दिखाई देगा। टूलबार के नीचे एक पैनल भी दिखाई देगा और सक्रिय पृष्ठ पर HTML कोड प्रदर्शित करेगा।
चरण 4. मौजूदा टूलबार और पैनल के बारे में जानें।
जब आप "इंस्पेक्ट एलिमेंट" का उपयोग करते हैं, तो ब्राउज़र विंडो के नीचे कई पैनल खुलेंगे। निम्नलिखित "इंस्पेक्ट एलिमेंट" में टूलबार और पैनल के नाम और कार्यों का वर्णन करता है:
- शीर्ष पंक्ति में टूलबॉक्स टूलबार है। यहां कई टूल मिल सकते हैं, लेकिन हम बाईं ओर इंस्पेक्टर बटन पर ध्यान देंगे। इस पूरे गाइड में सुनिश्चित करें कि यह बटन सक्रिय है (सक्रिय होने पर नीले रंग में बदल जाने वाले बटन के रंग से संकेत मिलता है)।
- उसके नीचे, HTML तत्वों के ब्रेडक्रंब की एक पंक्ति है जो वर्तमान में चयनित तत्व के स्थान को इंगित करती है।
- नेविगेशन प्रॉम्प्ट के नीचे का फलक वेब पेज का HTML ट्री या "मार्कअप व्यू" दिखाता है। चयनित तत्व का HTML इस फलक में चिह्नित और केंद्रित होगा।
- दाईं ओर का फलक वर्तमान वेब पेज की CSS स्टाइलशीट प्रदर्शित करता है।
चरण 5. किसी अन्य तत्व का चयन करें।
जब टूलबार खुला होता है, तो आप आसानी से अन्य तत्वों का चयन कर सकते हैं। ऐसा करने के तीन तरीके हैं:
- चयनित तत्व को चिह्नित करने के लिए HTML की एक पंक्ति पर होवर करें (इस सुविधा के लिए Firefox 34+ की आवश्यकता है)। उस तत्व को चुनने के लिए HTML पर क्लिक करें।
- टूलबार के बाएं कोने में "सेलेक्ट एलिमेंट" टूल पर क्लिक करें: इसमें एक बॉक्स के ऊपर एक कर्सर के आकार का आइकन होता है। किसी तत्व को चिह्नित करने के लिए वेब पेज पर कर्सर ले जाएँ और उसे चुनने के लिए क्लिक करें।
चरण 6. HTML कोड को ट्रेस करें।
HTML फलक में कहीं भी क्लिक करें। कोड से कोड पर जाने के लिए कीबोर्ड पर बाएँ और दाएँ दिशात्मक कुंजियों का उपयोग करें (इस सुविधा के लिए Firefox 39+ की आवश्यकता है)। यह विधि उन तत्वों का चयन करने के लिए उपयोगी है जो कर्सर के साथ चुने जाने के लिए बहुत छोटे हैं।
- धूसर आउट HTML उन तत्वों को इंगित करता है जो पृष्ठ पर प्रदर्शित नहीं होते हैं। इसमें शामिल तत्व टिप्पणियाँ हैं, जैसे नोड्स, और अन्य तत्व जो CSS डिस्प्ले प्रॉपर्टी द्वारा छिपाए गए हैं।
- सामग्री दिखाने या छिपाने के लिए बॉक्स के बाईं ओर स्थित तीर पर क्लिक करें। संपूर्ण सामग्री प्रदर्शित करने के लिए, तीर पर क्लिक करते समय alt=""Image" या विकल्प को दबाए रखें।</li" />
चरण 7. तत्व का पता लगाएँ।
ब्रेडक्रंब पंक्ति के सबसे दाएं कोने में खोज फ़ील्ड (लूप के आकार का आइकन) देखें। खोज फ़ील्ड का विस्तार करने के लिए क्लिक करें और वह HTML कोड टाइप करें जिसे आप खोजना चाहते हैं। जैसे ही आप टाइप करते हैं, मेल खाने वाले खोज परिणाम दिखाते हुए एक पॉप-अप प्रदर्शित होगा। खोज परिणामों से किसी तत्व पर क्लिक करें और HTML फलक को उस कोड तक स्क्रॉल करें जिसे आप ढूंढ रहे हैं।
भाग २ का २: HTML का संपादन
चरण 1. शुरू करने के लिए पृष्ठ को पुनः लोड करें।
यदि आप वेबसाइट विकास टूल में नए हैं, तो सावधान रहें कि आप अपने द्वारा संपादित किए जाने वाले पृष्ठों में स्थायी परिवर्तन नहीं करते हैं। आपके संपादन केवल आपकी स्क्रीन पर तब तक दिखाई देते हैं जब तक आप पृष्ठ को पुनः लोड या बंद नहीं करते। प्रयोग करने के लिए स्वतंत्र महसूस करें, भले ही आप नहीं जानते कि क्या होगा।
चरण 2. संपादित करने के लिए HTML पर डबल क्लिक करें।
इनलाइन HTML पर डबल क्लिक करें। परिवर्तनों को सहेजने के लिए नया टेक्स्ट टाइप करें और एंटर दबाएं।
चरण 3. अधिक विकल्प लाने के लिए टूल को ब्रेडक्रंब में क्लिक करके रखें।
ध्यान दें कि ब्रेडक्रंब टूलबार HTML ट्री और उसके ऊपर टूलबार के बीच बैठता है। अधिक मेनू खोलने के लिए इस पंक्ति में एक टूल को क्लिक करके रखें। नीचे उपलब्ध विकल्पों का संकेत दिया गया है (संपूर्ण नहीं):
- "HTML के रूप में संपादित करें" आपको प्रत्येक पंक्ति को संपादित करने के बजाय सीधे HTML ट्री से सभी HTML सामग्री को संपादित करने की अनुमति देता है।
- "कॉपी इनर एचटीएमएल" पूरी सामग्री को नोड के अंदर कॉपी करता है, जबकि "कॉपी आउटर एचटीएमएल" सामग्री और नोड्स (जैसे या
- "पेस्ट →" कॉपी पेस्ट करने के लिए कई विकल्प लाता है, जैसे नोड से पहले या नोड के पहले बच्चे के बाद।
- :hover,:active, और:focus जब उपयोगकर्ता इंटरैक्ट करता है तो तत्व का रूप बदल देता है। परिवर्तित प्रभावों को CSS स्टाइलशीट (दाईं ओर के पैनल से संपादन योग्य) से परिभाषित किया गया है।
चरण 4. खींचें और छोड़ें।
कोड में तत्वों को पुनर्व्यवस्थित करने के लिए, बिंदीदार रेखा दिखाई देने तक HTML को क्लिक करके रखें। लाइन को ट्री के ऊपर और नीचे ले जाएँ और जब लाइन जहाँ आप चाहते हैं, माउस बटन को छोड़ दें।
इस सुविधा के लिए Firefox 39 और बाद के संस्करण की आवश्यकता है।
चरण 5. डेवलपर टूलबार को बंद करें।
संपूर्ण निरीक्षण तत्व विंडो को बंद करने के लिए, CSS पैनल के ऊपर स्थित टूलबार के ऊपरी दाएं कोने में X बटन पर क्लिक करें।
टिप्स
- आप विंडो के शीर्ष पर मेनू विकल्पों में से टूलबार भी खोल सकते हैं:
- विंडोज: फायरफॉक्स → वेब डेवलपर → टॉगल टूल्स
- मैक या लिनक्स: टूल्स → वेब डेवलपर → टॉगल टूल्स
- फ़ायरफ़ॉक्स 40 में सीएसएस पैनल को छिपाने का विकल्प है ताकि आपके पास एचटीएमएल संपादित करने के लिए अधिक जगह हो। ब्रेडक्रंब पंक्ति के सबसे दाएं कोने में और खोज फ़ील्ड के दाईं ओर तीर आइकन देखें। CSS पैनल को छिपाने के लिए इस आइकन पर क्लिक करें और इसे ऊपर लाने के लिए फिर से क्लिक करें।
- आप CSS पैनल संपादित भी कर सकते हैं, लेकिन वे इस लेख में सूचीबद्ध नहीं हैं। आप इंटरनेट पर CSS कोड को संपादित करने के लिए निर्देश पा सकते हैं।
