3 डी में वेबसाइट संरचनाओं को देखने के लिए फ़ायरफ़ॉक्स के वेब डेवलपर टूल का उपयोग कैसे करें

फ़ायरफ़ॉक्स 11 ने फ़ायरफ़ॉक्स के पहले ही प्रभावशाली शस्त्रागार में दो नए वेब डेवलपर टूल जोड़े। टिल्ट फ़ीचर 3 डी में वेबसाइट संरचनाओं की कल्पना करता है, जबकि स्टाइल एडिटर मक्खी पर सीएसएस स्टाइलशीट संपादित कर सकता है.

3D फीचर, जिसे टिल्ट के नाम से जाना जाता है, एक वेबसाइट के DOM की कल्पना करने का एक तरीका है। यह मौजूदा दस्तावेज़ इंस्पेक्टर के साथ एकीकृत होता है और आपके ब्राउज़र में समृद्ध 3D ग्राफिक्स प्रदर्शित करने के लिए WebGL का उपयोग करता है.

झुकाव - 3 डी वेबसाइट विज़ुअलाइज़ेशन

आप फ़ायरफ़ॉक्स के पेज इंस्पेक्टर के भीतर से झुकाव का उपयोग कर सकते हैं। आरंभ करने के लिए, वेब डेवलपर मेनू से "निरीक्षण" का चयन करके पृष्ठ निरीक्षक खोलें। आप वर्तमान पृष्ठ पर राइट-क्लिक भी कर सकते हैं और एक विशिष्ट तत्व पर निरीक्षक को शुरू करने के लिए "इंस्पेक्ट एलिमेंट" का चयन कर सकते हैं.

इंस्पेक्टर टूलबार पर "3 डी" बटन पर क्लिक करें.

3D मोड को सक्रिय करने के बाद आपको पृष्ठ की संरचना दिखाई देगी, लेकिन जब तक आप इसे घुमाएंगे तब तक यह सपाट दिखेगा.

मॉडल को बाएं क्लिक करके घुमाएं, छवि को राइट-क्लिक करके चारों ओर घुमाएं, और माउस व्हील का उपयोग करके ज़ूम इन और आउट करें.

यह दृश्य निरीक्षक में अन्य उपकरणों के साथ एकीकृत है। यदि आपके पास HTML या स्टाइल पैनल खुले हैं, तो आप उस तत्व के HTML कोड या CSS गुणों को देखने के लिए hte पेज पर एक तत्व पर क्लिक कर सकते हैं.

अधिक 3 डी सुविधाएँ

3 डी विज़ुअलाइज़ेशन फ़ीचर टिल्ट एक्सटेंशन से बाहर था, लेकिन इसमें टिल्ट एक्सटेंशन की सभी विशेषताएं नहीं हैं। यदि आप रंगों को कस्टमाइज़ करना चाहते हैं या विज़ुअलाइज़ेशन को 3D एडिटिंग प्रोग्राम के साथ उपयोग करने के लिए 3D मॉडल फ़ाइल के रूप में निर्यात करना चाहते हैं, तो आपको झुकाव 3D ऐड-ऑन को इंस्टॉल करना होगा। आपके पास होने के बाद, आपको वेब डेवलपर मेनू में एक नया "झुकाव" विकल्प मिलेगा.

जब संकेत दिया जाए तो पुराने संस्करण का उपयोग करने के लिए रद्द करें बटन पर क्लिक करें.

आपको पृष्ठ के शीर्ष पर विंडो के बाईं ओर विज़ुअलाइज़ेशन और निर्यात सुविधा सहित अन्य विकल्पों को अनुकूलित करने के लिए नियंत्रण मिलेगा।.

सीएसएस स्टाइल एडिटर

पृष्ठ की CSS शैली पत्रक देखने और संपादित करने के लिए, वेब डेवलपर मेनू से शैली संपादक खोलें.

स्टाइल एडिटर वर्तमान पृष्ठ पर स्टाइलशीट को सूचीबद्ध करता है। स्टाइलशीट के नाम के बाईं ओर आंख आइकन पर क्लिक करके स्टाइलशीट को चालू या बंद करें। इसे चुनकर और कोड को संशोधित करके एक स्टाइलशीट संपादित करें.

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

आप अपने कंप्यूटर पर एक स्टाइलशीट की एक प्रति सहेज सकते हैं, अपने कंप्यूटर से एक मौजूदा स्टाइलशीट आयात कर सकते हैं, या स्टाइल एडिटर विंडो में सेव, इम्पोर्ट या नए लिंक के साथ एक नया, खाली स्टाइलशीट जोड़ सकते हैं।.

3D विज़ुअलाइज़ेशन फ़ीचर वर्तमान पृष्ठ पर परिवर्तन और नोटिस होने पर सूचनाओं के लिए देखता है। जब आप 3 डी इंस्पेक्टर के साथ स्टाइल एडिटर का उपयोग करते हैं, तो आपके परिवर्तन तुरंत 3 डी दृश्य में दिखाई देंगे। यह थर्ड-पार्टी एक्सटेंशन के साथ भी काम करता है जो वेब पेजों को संशोधित करता है, जैसे फायरबग.