जिस वेब पेज को आप पढ़ रहे हैं वह अन्य चीजों के साथ, स्रोत कोड से बना है। यही वह जानकारी है जो आपका वेब ब्राउजर डाउनलोड करता है और जो आप अभी पढ़ रहे हैं उसमें अनुवाद करता है।
अधिकांश वेब ब्राउज़र किसी भी अतिरिक्त सॉफ़्टवेयर के बिना किसी वेब पेज के स्रोत कोड को देखने की क्षमता प्रदान करते हैं, भले ही आप किस प्रकार के डिवाइस पर हों।
कुछ उन्नत कार्यक्षमता और संरचना भी प्रदान करते हैं, जिससे पेज पर HTML और अन्य प्रोग्रामिंग कोड को समझना आसान हो जाता है।
आप स्रोत कोड क्यों देखना चाहते हैं?
कई कारण हैं कि आप एक पृष्ठ का स्रोत कोड क्यों देखना चाहते हैं। यदि आप एक वेब डेवलपर हैं, तो शायद आप किसी अन्य प्रोग्रामर की विशेष शैली या कार्यान्वयन पर कवर के नीचे एक झांक लेना चाहते हैं। हो सकता है कि आप गुणवत्ता आश्वासन में हों और यह पता लगाने की कोशिश कर रहे हैं कि क्यों एक वेब पेज का एक निश्चित हिस्सा प्रतिपादन या व्यवहार कर रहा है।
आप अपने शुरुआती पृष्ठों को कोड करने और कुछ असली दुनिया के उदाहरणों की तलाश करने के लिए सीखने की कोशिश कर रहे एक नौसिखिया भी हो सकते हैं। बेशक, यह संभव है कि आप इनमें से किसी भी श्रेणी में न आएं और केवल गंभीर जिज्ञासा से स्रोत देखना चाहते हैं।
नीचे सूचीबद्ध आपके ब्राउज़र के पसंद में स्रोत कोड को देखने के निर्देश हैं।
गूगल क्रोम
चल रहा है: क्रोम ओएस, लिनक्स, मैकोज़, विंडोज़
क्रोम का डेस्कटॉप संस्करण पृष्ठ के स्रोत कोड को देखने के लिए तीन अलग-अलग तरीकों की पेशकश करता है, निम्न कीबोर्ड शॉर्टकट का उपयोग करके पहला और सबसे सरल: CTRL + U ( COMMAND + OPTION + U मैकोज़ पर)।
दबाए जाने पर, यह शॉर्टकट सक्रिय पृष्ठ के लिए HTML और अन्य कोड प्रदर्शित करने वाला एक नया ब्राउज़र टैब खुलता है। यह स्रोत रंग-कोडित और संरचित तरीके से है जो इसे विभाजित करने और जो भी आप ढूंढ रहे हैं उसे ढूंढने में आसान बनाता है। आप क्रोम के एड्रेस बार में निम्न पाठ दर्ज करके, वेब पेज के यूआरएल के बाएं हाथ में संलग्न करके और एंटर कुंजी पर क्लिक करके वहां भी जा सकते हैं: व्यू-सोर्स: (यानी, व्यू-सोर्स: https: // www ।)।
तीसरा तरीका क्रोम के डेवलपर टूल के माध्यम से है, जो आपको पृष्ठ के कोड में गहरा गोता लगाने के साथ-साथ परीक्षण और विकास उद्देश्यों के लिए इसे फ्लाईक करने की अनुमति देता है। डेवलपर टूल इंटरफ़ेस को इस कीबोर्ड शॉर्टकट का उपयोग करके खोला और बंद किया जा सकता है: CTRL + SHIFT + I ( COMMAND + OPTION + I मैकोज़ पर)। आप निम्न पथ लेकर उन्हें लॉन्च भी कर सकते हैं।
- ऊपरी दाएं कोने में स्थित क्रोम के मुख्य मेनू बटन पर क्लिक करें और तीन लंबवत-गठबंधन बिंदुओं द्वारा दर्शाया गया है।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो अपने माउस कर्सर को अधिक टूल विकल्प पर होवर करें।
- जब उप-मेनू प्रकट होता है, तो डेवलपर टूल पर क्लिक करें।
एंड्रॉयड
एंड्रॉइड के लिए क्रोम में एक वेब पेज का स्रोत देखना अपने पाठ (या यूआरएल) के सामने निम्न पाठ को जोड़ने और इसे सबमिट करने जैसा आसान है: व्यू-स्रोत :। इसका एक उदाहरण दृश्य-स्रोत होगा: https: // www। । प्रश्न में पृष्ठ से एचटीएमएल और अन्य कोड तत्काल सक्रिय विंडो में प्रदर्शित किया जाएगा।
आईओएस
हालांकि आपके आईपैड, आईफोन या आईपॉड टच पर क्रोम का उपयोग करके सोर्स कोड देखने के लिए कोई मूल तरीका नहीं है, लेकिन सबसे सरल और सबसे प्रभावी तीसरे पक्ष के समाधान जैसे व्यू सोर्स ऐप का उपयोग करना है।
ऐप स्टोर में $ 0.9 9 के लिए उपलब्ध, व्यू स्रोत आपको पृष्ठ के यूआरएल में प्रवेश करने के लिए संकेत देता है (या इसे क्रोम के एड्रेस बार से कॉपी / पेस्ट करता है, जो कभी-कभी लेने का सबसे आसान तरीका होता है) और यही वह है। एचटीएमएल और अन्य स्रोत कोड दिखाने के अलावा, ऐप में टैब भी होते हैं जो अलग-अलग पेज संपत्तियां, दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम), साथ ही पेज आकार, कुकीज़ और अन्य रोचक विवरण प्रदर्शित करते हैं।
माइक्रोसॉफ्ट बढ़त
चल रहा है: विंडोज़
एज ब्राउज़र आपको अपने डेवलपर टूल इंटरफ़ेस के माध्यम से वर्तमान पृष्ठ के स्रोत कोड को देखने, विश्लेषण करने और यहां तक कि कुशलतापूर्वक उपयोग करने देता है। इस आसान टूलसेट तक पहुंचने के लिए आप इनमें से एक कीबोर्ड शॉर्टकट का उपयोग कर सकते हैं: F12 या CTRL + U। यदि आप इसके बजाय माउस पसंद करेंगे, तो एज के मेनू बटन (ऊपरी दाएं कोने में स्थित तीन बिंदु) पर क्लिक करें और सूची से F12 डेवलपर टूल विकल्प चुनें।
देव उपकरण पहली बार चलाने के बाद, एज ब्राउज़र के संदर्भ मेनू में दो अतिरिक्त विकल्प जोड़ता है (वेब पेज के भीतर कहीं भी राइट-क्लिक करके सुलभ): तत्व का निरीक्षण करें और स्रोत देखें , उत्तरार्द्ध जो देव के डीबगर भाग को खोलता है टूल्स इंटरफ़ेस स्रोत कोड के साथ आबादी।
मोज़िला फ़ायरफ़ॉक्स
चल रहा है: लिनक्स, मैकोज़, विंडोज़
फ़ायरफ़ॉक्स के डेस्कटॉप संस्करण में किसी पृष्ठ का स्रोत कोड देखने के लिए आप अपने कीबोर्ड पर CTRL + U ( COMMAND + U पर मैकोज़) दबा सकते हैं, जो सक्रिय वेब पेज के लिए HTML और अन्य कोड वाला एक नया टैब खोल देगा।
निम्न पाठ को फ़ायरफ़ॉक्स के पता बार में सीधे टाइप करना, सीधे पृष्ठ के URL के बाईं ओर, उसी स्रोत को वर्तमान टैब में दिखाना होगा: दृश्य-स्रोत: (यानी, दृश्य-स्रोत: https: // www।) ।
किसी पृष्ठ के स्रोत कोड तक पहुंचने का एक और तरीका फ़ायरफ़ॉक्स के डेवलपर टूल के माध्यम से निम्न चरणों को ले कर सुलभ है।
- अपनी ब्राउज़र विंडो के ऊपरी दाएं कोने में स्थित मुख्य मेनू बटन पर क्लिक करें और तीन क्षैतिज रेखाओं द्वारा दर्शाया गया है।
- जब पॉप-आउट मेनू प्रकट होता है, तो डेवलपर "रैंच" आइकन पर क्लिक करें।
- वेब डेवलपर संदर्भ मेनू अब दिखाई देना चाहिए। पेज स्रोत विकल्प का चयन करें।
फ़ायरफ़ॉक्स आपको पृष्ठ के किसी विशेष भाग के लिए स्रोत कोड देखने देता है, जिससे मुद्दों को अलग करना आसान हो जाता है। ऐसा करने के लिए, पहले उस क्षेत्र को हाइलाइट करें जिसमें आप रुचि रखते हैं। अगला, राइट-क्लिक करें और ब्राउज़र के संदर्भ मेनू से चयन स्रोत देखें चुनें।
एंड्रॉयड
फ़ायरफ़ॉक्स के एंड्रॉइड संस्करण में स्रोत कोड देखना निम्नलिखित पाठ के साथ वेब पेज के यूआरएल को उपसर्ग करके प्राप्त किया जा सकता है: व्यू-सोर्स :। उदाहरण के लिए, HTML स्रोत देखने के लिए आप ब्राउज़र के पता बार में निम्न पाठ सबमिट करेंगे: दृश्य-स्रोत: https: // www। ।
आईओएस
अपने आईपैड, आईफोन या आईपॉड टच पर वेब पेज स्रोत कोड देखने के लिए हमारी अनुशंसित विधि व्यू सोर्स ऐप के माध्यम से है, जो ऐप स्टोर में $ 0.9 9 के लिए उपलब्ध है। जबकि फ़ायरफ़ॉक्स के साथ सीधे एकीकृत नहीं किया गया है, आप एचटीएमएल और प्रश्न के साथ जुड़े अन्य कोड का अनावरण करने के लिए ब्राउज़र से यूआरएल को आसानी से कॉपी और पेस्ट कर सकते हैं।
ऐप्पल सफारी
आईओएस और मैकोज़ पर चल रहा है
आईओएस
हालांकि आईओएस के लिए सफारी में डिफ़ॉल्ट रूप से पेज स्रोत देखने की क्षमता शामिल नहीं है, ब्राउज़र ऐप स्टोर में $ 0.9 9 के लिए उपलब्ध स्रोत स्रोत ऐप के साथ सहजता से एकीकृत करता है।
इस तीसरे पक्ष के ऐप को सफारी ब्राउज़र पर वापस करने के बाद और स्क्रीन के निचले भाग पर स्थित शेयर बटन पर टैप करें और एक वर्ग और ऊपर तीर द्वारा प्रतिनिधित्व किया जाता है। आईओएस शेयर शीट अब आपकी सफारी विंडो के निचले हिस्से को ओवरले करके दिखाई देनी चाहिए। दाईं ओर स्क्रॉल करें और स्रोत देखें बटन का चयन करें।
सक्रिय पृष्ठ के स्रोत कोड का एक रंग-कोडित, संरचित प्रतिनिधित्व अब प्रदर्शित किया जाना चाहिए, अन्य टैब के साथ जो आपको पृष्ठ संपत्तियों, स्क्रिप्ट और अधिक देखने की अनुमति देता है।
मैक ओ एस
सफारी के डेस्कटॉप संस्करण में किसी पृष्ठ के स्रोत कोड को देखने के लिए, आपको पहले इसके विकास मेनू को सक्षम करने की आवश्यकता है। नीचे दिए गए कदम आपको इस छिपे हुए मेनू को सक्रिय करने और पृष्ठ के HTML स्रोत को प्रदर्शित करने के माध्यम से चलते हैं।
- स्क्रीन के शीर्ष पर स्थित ब्राउज़र मेनू में सफारी पर क्लिक करें।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो प्राथमिकता विकल्प का चयन करें।
- सफारी की प्राथमिकताओं को अब दिखाना चाहिए। शीर्ष पंक्ति के दाएं हाथ की ओर स्थित उन्नत आइकन पर क्लिक करें।
- उन्नत अनुभाग के निचले हिस्से में मेनू बार में शो डेवलपमेंट मेनू वाला एक विकल्प है, जिसमें एक खाली चेकबॉक्स है। एक बार चेक बॉक्स डालने के लिए इस बॉक्स पर क्लिक करें, और ऊपरी बाएं कोने में पाए गए लाल 'एक्स' पर क्लिक करके प्राथमिकता विंडो बंद करें।
- स्क्रीन के शीर्ष पर स्थित डेवलपमेंट मेनू पर क्लिक करें।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो पृष्ठ स्रोत दिखाएं चुनें। आप इसके बजाय निम्न कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं: COMMAND + OPTION + U।
ओपेरा
चल रहा है: लिनक्स, मैकोज़, विंडोज़
ओपेरा ब्राउज़र में सक्रिय वेब पेज से स्रोत कोड देखने के लिए निम्न कीबोर्ड शॉर्टकट का उपयोग करें: CTRL + U ( COMMAND + OPTION + U मैकोज़ पर)। यदि आप वर्तमान टैब में स्रोत को लोड करना पसंद करते हैं, तो एड्रेस बार में पेज के यूआरएल के बाईं ओर निम्न पाठ टाइप करें और एंटर दबाएं : व्यू-सोर्स: (यानी, व्यू-सोर्स: https: // www। )।
ओपेरा का डेस्कटॉप संस्करण आपको अपने एकीकृत डेवलपर टूल का उपयोग करके HTML स्रोत, सीएसएस और अन्य तत्वों को देखने की अनुमति देता है। इस इंटरफ़ेस को लॉन्च करने के लिए, जो डिफ़ॉल्ट रूप से आपकी मुख्य ब्राउज़र विंडो के दाईं ओर दिखाई देगा, निम्न कीबोर्ड शॉर्टकट दबाएं: CTRL + SHIFT + I ( COMMAND + OPTION + I मैकोज़ पर)।
निम्नलिखित कदम उठाकर ओपेरा के डेवलपर टूलसेट भी सुलभ हैं।
- अपनी ब्राउज़र विंडो के ऊपरी बाएं कोने में स्थित ओपेरा लोगो पर क्लिक करें।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो अपने माउस कर्सर को अधिक टूल विकल्प पर होवर करें।
- शो डेवलपर मेनू पर क्लिक करें।
- ओपेरा लोगो पर फिर से क्लिक करें।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो अपने कर्सर को डेवलपर पर होवर करें।
- जब उप-मेनू प्रकट होता है, तो डेवलपर टूल पर क्लिक करें।
विवाल्डी
विवाल्डी ब्राउज़र के भीतर पेज स्रोत देखने के कई तरीके हैं। सबसे आसान CTRL + U कीबोर्ड शॉर्टकट के माध्यम से होता है, जो एक नए टैब में सक्रिय पृष्ठ से कोड प्रस्तुत करता है।
आप निम्न पाठ को पृष्ठ के यूआरएल के सामने भी जोड़ सकते हैं, जो वर्तमान टैब में स्रोत कोड प्रदर्शित करता है: व्यू-सोर्स :। इसका एक उदाहरण दृश्य-स्रोत होगा: http: // www। ।
एक और तरीका ब्राउज़र के एकीकृत डेवलपर टूल के माध्यम से है, जो CTRL + SHIFT + I संयोजन को दबाकर या ब्राउज़र के टूल्स मेनू में डेवलपर टूल विकल्प के माध्यम से ऊपरी बाएं कोने में 'वी' लोगो पर क्लिक करके पाया जाता है। देव उपकरण का उपयोग पृष्ठ के स्रोत के अधिक गहन विश्लेषण के लिए अनुमति देता है।