चाहे आप एक वेब डिज़ाइनर अपनी साइट के स्रोत कोड को डिबग कर रहे हों या साइट के कोड के बारे में जानने के लिए उत्सुक हों, आप HTML स्रोत को Google Chrome में देख सकते हैं। HTML स्रोत को देखने के दो तरीके हैं: डेवलपर टूल का उपयोग करके स्रोत और निरीक्षण देखें।
स्रोत देखें पृष्ठ स्रोत का उपयोग करके देखें
Chrome को फायर करें और उस वेबपेज पर जाएं जिसे आप HTML स्रोत कोड देखना चाहते हैं। पृष्ठ को राइट-क्लिक करें और "पृष्ठ देखें स्रोत," पर क्लिक करें या एक नया टैब में पृष्ठ के स्रोत को देखने के लिए Ctrl + U दबाएं।
वेबपेज के लिए सभी एचटीएमएल के साथ एक नया टैब खुलता है, पूरी तरह से विस्तारित और बिना सूचना के।
यदि आप HTML स्रोत में किसी विशिष्ट तत्व या भाग की तलाश कर रहे हैं, तो View Source का उपयोग करना थकाऊ और बोझिल है, खासकर यदि पृष्ठ बहुत सारे जावास्क्रिप्ट और सीएसएस का उपयोग करता है।
डेवलपर टूल का उपयोग करके स्रोत का निरीक्षण करें
यह विधि Chrome में डेवलपर टूल फलक का उपयोग करती है और स्रोत कोड को देखने के लिए बहुत क्लीनर दृष्टिकोण है। HTML को अतिरिक्त स्वरूपण और उन तत्वों को संक्षिप्त करने की क्षमता के कारण यहां पढ़ना आसान है, जिन्हें देखने में आपकी रुचि नहीं है।
जिस पृष्ठ का आप निरीक्षण करना चाहते हैं, उसके लिए क्रोम और सिर खोलें; फिर Ctrl + Shift + i दबाएं। आपके द्वारा देखे जा रहे वेबपेज के साथ एक डॉक किया गया फलक खुलेगा।
आगे भी इसे विस्तार देने के लिए एक तत्व के बगल में थोड़ा ग्रे तीर पर क्लिक करें।
यदि आप डिफ़ॉल्ट रूप से पूर्ण पृष्ठ का कोड नहीं देखना चाहते हैं, लेकिन इसके बजाय HTML में किसी विशिष्ट तत्व का निरीक्षण करें, तो पृष्ठ पर उस स्थान पर राइट-क्लिक करें, फिर "निरीक्षण करें" पर क्लिक करें।
जब इस बार फलक खुलता है, तो यह सीधे उस कोड के हिस्से में जाता है जिसमें वह तत्व होता है जिसे आपने क्लिक किया था।
यदि आप डॉक स्थिति को बदलना चाहते हैं, तो आप इसे नीचे, बाएँ, दाएँ, या यहाँ तक कि एक अलग विंडो में अनडॉक कर सकते हैं। मेनू आइकन (तीन डॉट्स) पर क्लिक करें, फिर या तो एक अलग विंडो में अनडॉक चुनें, क्रमशः बाईं ओर डॉक करें, नीचे डॉक करें, या दाईं ओर डॉक करें।
यही सब है इसके लिए। जब आप कोड देखना चाहते हैं, तो या तो स्रोत देखें टैब बंद करें या अपने वेबपेज पर लौटने के लिए डेवलपर टूल फलक में ’X’ पर क्लिक करें।
