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