कोणत्याही वेब पृष्ठाचे HTML आणि CSS पहा
वेबसाइट कोडच्या ओळींनी तयार केली आहे, परंतु परिणाम विशिष्ट पृष्ठे आहेत ज्यामध्ये प्रतिमा, व्हिडिओ, फॉन्ट आणि बरेच काही आहेत. त्यापैकी एक घटक बदलण्यासाठी किंवा त्यात काय समाविष्ट आहे ते पहाण्यासाठी, आपल्याला त्या कोडवर नियंत्रण करणार्या विशिष्ट ओळी शोधाव्या लागतील. आपण एक घटक निरीक्षण साधन असे करू शकता.
बहुतेक वेब ब्राऊझर आपल्याला एक निरीक्षण साधन डाउनलोड करू किंवा अॅड-ऑन स्थापित करू देत नाहीत. त्याऐवजी, त्यांनी आपल्याला पृष्ठ घटक उजवे-क्लिक करुन घटकांची तपासणी किंवा निरीक्षण करा . तथापि, आपल्या ब्राउझरमध्ये ही प्रक्रिया थोडी वेगळी असू शकते.
Chrome मधील घटक तपासा
Google Chrome च्या सर्वात अलीकडील आवृत्त्या आपल्याला काही प्रकारे पृष्ठाचे निरीक्षण करू देतात, जे त्याच्या सर्व अंगभूत Chrome DevTools वापरतात:
- पृष्ठावर काहीतरी उजवे-क्लिक करा (किंवा रिक्त क्षेत्र) आणि Inspect निवडा
- Ctrl + Shift + I कीबोर्ड शॉर्टकट प्रविष्ट करा
- अधिक साधने> विकसक साधने पर्याय प्रवेश करण्यासाठी Chrome मेनूचा वापर करा
Chrome DevTools आपल्याला सहजपणे कॉपी किंवा HTML लाइन्स संपादित किंवा तत्सम घटक लपवा किंवा हटवा (पृष्ठ रीलोड होईपर्यंत) गोष्टी करू देते.
एकदा DevTools पृष्ठाच्या बाजूवर उघडले की, आपण कुठे स्थान करतो ते बदलू शकता, पृष्ठाच्या बाहेर पॉप करू शकता, सर्व पृष्ठाच्या फाइल्ससाठी शोधू शकता, विशिष्ट परीक्षणासाठी पृष्ठावरील घटक निवडा, फाइल्स आणि URL कॉपी करा आणि एखाद्या समूहची सानुकूलित करा सेटिंग्जच्या
Firefox मध्ये घटकांचे निरीक्षण करा
क्रोमप्रमाणेच, फायरफॉक्सकडे इन्स्पेक्टर नावाचे उपकरण उघडण्याचे वेगवेगळे मार्ग आहेत:
- पृष्ठावर रिकाम्या जागेवर उजवे-क्लिक करा किंवा एक घटक निवडा आणि घटकांची तपासणी करा निवडा
- कीबोर्डसह Ctrl + Shift + T किंवा Ctrl + Shift + I प्रविष्ट करा
- फायरफॉक्स मेनूमधून, विकसक > इंस्पेक्टरवर क्लिक करा
- साधने मेनूवरून, वेब विकसक> निरीक्षक क्लिक करा
आपण आपला माउस फायरफॉक्समधील विविध घटकांकडे हलवताना इन्स्पेक्टर टूल आपोआपच घटकांची स्रोत कोड माहिती शोधून काढतो. घटक क्लिक करा आणि "ऑन-द फ्लाई सर्च" थांबा आणि आपण इंस्पेक्टर खिडकीतून घटक तपासू शकता.
सर्व समर्थित नियंत्रणे शोधण्यासाठी एक घटक उजवे-क्लिक करा आपण HTML च्या रुपात पृष्ठ संपादित करणे, आंतरिक किंवा बाह्य HTML कोड कॉपी, कॉपी करा DOM गुणधर्म, स्क्रीनशॉट किंवा नोड हटवा, सहजपणे नवीन विशेषता लागू करू शकता, सर्व पृष्ठांचे CSS पाहू शकता आणि बरेच काही.
ऑपेरा मधील घटकांचे निरीक्षण करा
ओपेरा सुद्धा डीओएम इंस्पेक्टर उपकरणांबरोबरच घटकांची तपासणी करू शकते. त्यावर कसे जायचे ते येथे आहे:
- कीबोर्ड शॉर्टकट Ctrl + Shift + I वापरा
- मेनू> अधिक साधने> विकसक मेनूवर नेव्हिगेट करा, आणि नंतर मेनू> विकसक> विकसक साधनांद्वारे मेनू उघडा
- पृष्ठावरील कोणत्याही घटकावरील उजवे-क्लिक मेनूवरून, निरीक्षण घटक निवडा
इंटरनेट एक्स्प्लोररमधील एलिमेंटसची तपासणी करा
समान तत्सम साधने शोधण्याचे साधन, विकसक साधने म्हणतात, हे Internet Explorer मध्ये उपलब्ध आहे:
- कीबोर्ड वरील F12 दाबा
- टूल्स> F12 डेव्हलपर मेनू पर्याय वापरा ( Alt + X दाबा जर आपल्याला टूल्स मेनू दिसत नसेल)
- पृष्ठावर उजवे-क्लिक करा आणि घटकांची तपासणी करा क्लिक करा
IE मध्ये या नवीन मेनूमध्ये एक निवडा घटक साधन आहे जे आपल्याला HTML आणि CSS तपशील पाहण्यासाठी कोणत्याही पृष्ठ घटकावर क्लिक करू देते. आपण DOM एक्सप्लोरर टॅबद्वारे ब्राउझ करताना आपण घटक हायलाइट करणे सहजपणे सक्षम / सक्षम करू शकता
वरील ब्राउझरमध्ये इतर घटक निरीक्षक साधनांप्रमाणे, इंटरनेट एक्सप्लोरर आपल्याला घटकांना कट, कॉपी आणि पेस्ट करू देते तसेच HTML संपादित करण्यास, विशेषता जोडण्यास, संलग्न केलेल्या शैलीसह कॉपी घटक आणि अधिक.