कुनै पनि वेब पृष्ठको एचटीएमएल र सीएसएस हेर्नुहोस्
वेबसाइट कोड को रेखाहरु संग बनाइयो, तर यो परिणाम विशिष्ट पृष्ठहरु छवियों, भिडियो, फन्ट्स र अधिक संग। ती तत्वहरू मध्ये एकलाई परिवर्तन गर्न वा यो कुन समावेश छ, यो कोडको निर्दिष्ट लाइन फेला पर्दछ जुन यसलाई नियन्त्रण गर्दछ। तपाईं एक तत्व निरीक्षण उपकरणसँग गर्न सक्नुहुनेछ।
धेरै वेब ब्राउजरले तपाइँलाई एक निरीक्षण उपकरण डाउनलोड गर्न वा एड-अन स्थापना गर्न सक्दैन। बरु, उनीहरूलाई पृष्ठ तत्व दाँया क्लिक गर्नुहोस् र चयन गर्नुहोस् वा तत्वलाई निरीक्षण गर्नुहोस् । यद्यपि, यो प्रक्रिया तपाईको ब्राउजरमा सानो फरक हुन सक्छ।
Chrome मा निरीक्षण तत्वहरू
गुगल क्रोमको भर्खरका संस्करणहरू तपाईंलाई पृष्ठमा केहि तरिकाहरूको निरीक्षण गर्न अनुमति दिन्छ, जसको सबै यसको निर्मित-इन क्रोम DevTools प्रयोग गर्दछ:
- पृष्ठमा केहि दायाँ क्लिक गर्नुहोस् (वा खाली क्षेत्र) र निरीक्षण छनौट गर्नुहोस्
- Ctrl + Shift + I किबोर्ड सर्टकट प्रविष्टि गर्नुहोस्
- अधिक उपकरण> विकासकर्ता उपकरण विकल्प पहुँच गर्न Chrome मेनु प्रयोग गर्नुहोस्
Chrome DevTool ले तपाईंलाई चीजहरू गर्न अनुमति दिन्छ जस्तै एचटीएमएल रेखाहरू प्रतिलिपि गर्न वा सम्पादन गर्न वा सम्पूर्ण तत्वहरू लुकाउनुहोस् वा मेटाउनुहोस् (पृष्ठ पुन: लोड नभएसम्म)।
एक पटक DevTool पृष्ठको छेउमा खोल्दा, तपाइँ यसलाई कहाँ स्थितिमा परिवर्तन गर्न सक्नुहुन्छ, पृष्ठबाट बाहिर पप गर्नुहोस्, सबै पेजको फाईलहरू खोज्नुहोस्, विशिष्ट परीक्षाका लागि पृष्ठबाट तत्वहरू चयन गर्नुहोस्, फाइलहरू र URL प्रतिलिपि गर्नुहोस्, र भित्री अनुकूलन गर्नुहोस् सेटिङहरूको।
फायरफक्समा निरीक्षण तत्वहरू
क्रोम जस्तै, फायरफक्ससँग यसको इन्स्पेक्टर भनिने उपकरण खोल्न केही फरक तरिका छन्:
- पृष्ठमा रिक्त क्षेत्रमा राइट-क्लिक गर्नुहोस् वा एक तत्व छान्नुहोस्, र चयन गर्नुहोस् ई element निरीक्षण गर्नुहोस्
- Ctrl + Shift + T वा Ctrl + Shift + I थिच्नुहोस्
- फायरफक्स मेनुबाट, विकासकर्ता > निरीक्षक क्लिक गर्नुहोस्
- उपकरण मेनुबाट, वेब विकासकर्ता> निरीक्षक क्लिक गर्नुहोस्
जब तपाईं फायरफक्समा विभिन्न तत्वहरूमा आफ्नो माउस सार्नुहुन्छ, निरीक्षक उपकरणले स्वचालित रूपमा तत्वको स्रोत कोड जानकारी पाउँछ। एउटा तत्वमा क्लिक गर्नुहोस् र "अन-फ्लाइट सर्च" बन्द हुनेछ र तपाईले इन्स्पेक्टर सञ्झ्यालबाट तत्त्वको जाँच गर्न सक्नुहुनेछ।
सबै समर्थित नियन्त्रणहरू फेला पार्न एक तत्त्वमा दाँया क्लिक गर्नुहोस्। तपाईं चीजहरू गर्न सक्नुहुनेछ जस्तै पृष्ठ सम्पादन गर्न HTML, प्रतिलिपि वा पेस्ट आन्तरिक वा बाह्य एचटीएमएल कोड को रूपमा, DOM गुणहरू देखाउनुहोस्, स्क्रिनसट वा नोड मेट्नुहोस्, सजिलैसँग नयाँ विशेषताहरू लागू गर्नुहोस्, पृष्ठको सबै CSS हेर्नुहोस् र अधिक।
ओपेरामा तत्वहरू निरीक्षण गर्नुहोस्
ओपेराले तत्वहरू पनि निरीक्षण गर्न सक्छन्, यसको साथमा डोम इन्स्पेक्टर उपकरणसँग क्रोमको समान छ। यहाँ यो कसरी प्राप्त छ:
- किबोर्ड सर्टकट प्रयोग गर्नुहोस् Ctrl + Shift + I
- मेनुलाई नेभिगेट गर्नुहोस् > थप उपकरणहरू> विकासकर्ता मेनु देखाउनुहोस् , र त्यसपछि मेनु खोल्नुहोस् मेनु> विकासकर्ता> विकासकर्ता उपकरण मार्फत
- पृष्ठको कुनैपनि तत्त्वमा दायाँ-क्लिक मेनुबाट, निरीक्षण तत्व चयन गर्नुहोस्
इन्टरनेट एक्सप्लोररमा निरीक्षण तत्वहरू
एक समान निरीक्षण तत्त्व उपकरण, जो विकासकर्ता उपकरण भनिन्छ, इन्टरनेट एक्सप्लोररमा उपलब्ध छ:
- किबोर्डमा F12 थिच्नुहोस्
- उपकरणहरू> F12 विकासकर्ता मेनु विकल्प प्रयोग गर्नुहोस् (यदि तपाईँले उपकरण मेनु छैन भने Alt + X मा जानुहोस्)
- पृष्ठमा दायाँ-क्लिक गर्नुहोस् र एनिमेसन निरीक्षण गर्नुहोस् क्लिक गर्नुहोस्
IE ले यस नयाँ मेनुमा चयन तत्व तत्व छ जसले तपाईंलाई HTML र CSS विवरणहरू हेर्नको लागि कुनैपनि पृष्ठ तत्वमा क्लिक गर्न दिन्छ। तपाईं DOM एक्सप्लोरर ट्याब मार्फत ब्राउज गर्दै बेलामा हाइलाइटिंगलाई सजिलै असक्षम गर्न सक्षम / सक्षम गर्न सक्नुहुनेछ।
माथिको ब्राउजरहरूमा अन्य तत्त्व निरीक्षक उपकरणहरू जस्तै, इन्टरनेट एक्लो एक्सप्लोररले तपाईंलाई एचटीएमएल सम्पादन गर्न, प्रतिलिपि, र टाँस्नु साथै साथसाथै सम्पादन गर्न अनुमति दिन्छ, विशेषताहरू, संलग्न तत्वहरूसँग प्रतिलिपि तत्वहरू र थप।