3 डी में डोम ट्री का दृश्य (फ़ायरफ़ॉक्स एक्सटेंशन)

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

जैसा कि आप जानते हैं, दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) का उपयोग करते हुए, किसी भी HTML दस्तावेज़ को नोड्स के पेड़ के रूप में दर्शाया जा सकता है, जिनमें से प्रत्येक नोड एक तत्व, विशेषता, पाठ, ग्राफिक या अन्य ऑब्जेक्ट है। यह विस्तार इस तरह के एक पेड़ का निर्माण करता है, उस पर पाठ और ग्राफिक्स की बनावट होती है जो पेड़ के संबंधित नोड्स में स्थित होते हैं।

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



विस्तार के लेखक विक्टर पोरॉफ़ (मुख्य भाग), सेड्रिक विवियर ( वेबजीएल टेक्सचर के रूप में डोम तत्व प्रदान करते हैं, कैनवास के समतुल्य हैं। विंदो, बग नंबर 653656 देखें) और रोब कैंपबेल (विचार के लेखक)।

गुथुब स्रोत कोड
डेवलपर ब्लॉग
अंतिम स्थिर निर्माण: tilt.xpi

एक्सटेंशन स्थापित करने के बाद, इसे Ctrl + Shift + L (या पॉपपी पर Cmd + Shift + L) दबाकर या ब्राउज़र में संबंधित मेनू आइटम का चयन करके और Esc दबाकर बाहर निकलें। एक्सटेंशन किसी भी पेज पर काम करता है।

भविष्य में, डेवलपर्स ने नई सुविधाओं को जोड़ने की योजना बनाई है, जिसमें मक्खी पर 3 डी मॉडल को अपडेट करना और अपडेट करना शामिल है (जैसे ही पृष्ठ बदलता है, प्रत्येक नोड के लिए सीएसएस परिवर्तन शुरू किया जाता है; 3 डी नोड्स की पारदर्शिता और सापेक्ष स्थिति सहित तत्वों के प्रदर्शन का अनुकूलन); न केवल पूरे पृष्ठ, बल्कि z- इंडेक्स का उपयोग करते हुए अलग-अलग भागों का प्रतिपादन; वेब डेवलपर के लिए अधिक सुविधाजनक उपकरण का निर्माण; ऐस संपादक और फ़ायरफ़ॉक्स डेवलपर टूल्स (वर्तमान में चयनित नोड, तत्काल 3 डी पूर्वावलोकन को उजागर करना) के साथ बेहतर एकीकरण, 3 डी ग्राफिक्स को अन्य ब्राउज़रों या अनुप्रयोगों (3 डी ऑब्जेक्ट्स के साथ एक फ़ाइल के माध्यम से, शायद .obj और / या COLLADA) के साथ निर्यात करना।

सामान्य 2D- मोड में, सबसे बड़ी सफलता पृष्ठों के बीच 3D-सर्फिंग की संभावना होगी।

विस्तार को बेहतर बनाने के लिए योजनाओं की पूरी सूची के लिए, TODO.md सूची देखें।