मुख्य क्रोम Google Chrome में HTML स्रोत कैसे देखें

Google Chrome में HTML स्रोत कैसे देखें



पता करने के लिए क्या

  • वेब पेज पर राइट-क्लिक करें और चुनें पृष्ठ का स्त्रोत देखें .
  • शॉर्टकट: दबाएँ Ctrl + में (विंडोज़ पीसी) या आज्ञा + विकल्प + में (मैक)।
  • Chrome के डेवलपर टूल का उपयोग करने के लिए, चुनें मेन्यू (तीन बिंदु) > अधिक उपकरण > डेवलपर उपकरण .

यह आलेख बताता है कि Google Chrome वेब ब्राउज़र में किसी वेबसाइट के HTML स्रोत कोड तक कैसे पहुंचें, साथ ही Chrome के डेवलपर टूल तक कैसे पहुंचें और उसका उपयोग करें। किसी साइट का स्रोत कोड देखना शुरुआती लोगों के लिए HTML सीखने का एक उत्कृष्ट तरीका है।

क्रोम में सोर्स कोड देखें

तो आप किसी वेबसाइट के सोर्स कोड को कैसे देखते हैं? Google Chrome ब्राउज़र का उपयोग करके ऐसा करने के लिए चरण-दर-चरण निर्देश यहां दिए गए हैं।

  1. खोलें गूगल क्रोम वेब ब्राउज़र (अगर आपके पास नहीं है Google Chrome इंस्टॉल किया गया , यह मुफ्त डाउनलोड है)।

  2. पर नेविगेट करें वह वेब पेज जिसका आप परीक्षण करना चाहेंगे .

  3. दाएँ क्लिक करें पृष्ठ और दिखाई देने वाले मेनू को देखें. उस मेनू से, क्लिक करें पृष्ठ का स्त्रोत देखें .

    Chrome वेब ब्राउज़र के लिए प्रासंगिक मेनू में पृष्ठ स्रोत देखें
  4. उस पृष्ठ का स्रोत कोड अब ब्राउज़र में एक नए टैब के रूप में दिखाई देगा।

  5. वैकल्पिक रूप से, आप के कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं Ctrl + में किसी साइट के स्रोत कोड को प्रदर्शित करने वाली एक विंडो खोलने के लिए पीसी पर। मैक पर, यह शॉर्टकट है आज्ञा + विकल्प + में .

हिलेरी एलिसन/लाइफवायर

वीचैट चैट इतिहास कैसे निर्यात करें

Chrome के डेवलपर टूल का उपयोग करें

सरल के अलावापृष्ठ का स्त्रोत देखेंGoogle Chrome जो क्षमता प्रदान करता है, आप भी उनकी उत्कृष्टता का लाभ उठा सकते हैं डेवलपर उपकरण किसी साइट में और भी गहराई तक खुदाई करना। ये उपकरण आपको न केवल HTML देखने की अनुमति देंगे, बल्कि उस HTML दस्तावेज़ में तत्वों को देखने के लिए लागू होने वाले CSS को भी देखने की अनुमति देंगे।

Chrome के डेवलपर टूल का उपयोग करने के लिए:

  1. खुला गूगल क्रोम .

  2. पर जाए वह वेब पेज जिसकी आप जांच करना चाहते हैं .

  3. का चयन करें तीन-बिंदु मेनू ब्राउज़र विंडो के ऊपरी-दाएँ कोने में।

  4. मेनू से, पर होवर करें अधिक उपकरण और फिर चुनें डेवलपर उपकरण दिखाई देने वाले मेनू में.

    Google Chrome में डेवलपर टूल मेनू आइटम
  5. एक विंडो खुलेगी जिसमें फलक के बाईं ओर HTML स्रोत कोड और दाईं ओर संबंधित CSS दिखाई देगा।

  6. वैकल्पिक रूप से, यदि आप राइट-क्लिक करते हैं एक वेब पेज में एक तत्व और चुनें निरीक्षण दिखाई देने वाले मेनू से, क्रोम के डेवलपर टूल पॉप अप होंगे और दाईं ओर दिखाए गए संबंधित सीएसएस के साथ HTML में आपके द्वारा चुने गए विशिष्ट भाग को हाइलाइट करेंगे। यदि आप किसी साइट के किसी विशेष भाग के बारे में अधिक जानना चाहते हैं तो यह अत्यंत उपयोगी है।

    लीग में पिंग की जांच कैसे करें
मैक पर किसी तत्व का निरीक्षण कैसे करें

क्या सोर्स कोड देखना कानूनी है?

पिछले कुछ वर्षों में, हमारे पास कई नए वेब डिज़ाइनर हैं जिन्होंने सवाल उठाया है कि क्या किसी साइट के स्रोत कोड को देखना और इसे अपनी शिक्षा और अंततः अपने काम के लिए उपयोग करना स्वीकार्य है। हालाँकि किसी साइट के कोड को थोक में कॉपी करना और उसे किसी वेबसाइट पर अपना बताना निश्चित रूप से स्वीकार्य नहीं है, लेकिन सीखने के लिए स्प्रिंगबोर्ड के रूप में उस कोड का उपयोग करना वास्तव में यह बताता है कि इस उद्योग में कितनी प्रगति हुई है।

कैसे बताऊं कि मेरे पास कौन सा राम है

जैसा कि हमने इस लेख की शुरुआत में उल्लेख किया है, आज आपके लिए ऐसे कामकाजी वेब पेशेवर को ढूंढना कठिन होगा जिसने किसी साइट के स्रोत को देखकर कुछ नहीं सीखा हो! हाँ, किसी साइट का स्रोत कोड देखना कानूनी है। कुछ समान बनाने के लिए संसाधन के रूप में उस कोड का उपयोग करना भी सुरक्षित है। कोड को ज्यों का त्यों लेना और उसे अपने काम के रूप में प्रस्तुत करना, यहीं से आपको समस्याओं का सामना करना शुरू होता है।

अंत में, वेब पेशेवर एक-दूसरे से सीखते हैं और अक्सर उस काम में सुधार करते हैं जिसे वे देखते हैं और उससे प्रेरित होते हैं, इसलिए किसी साइट के स्रोत कोड को देखने और इसे सीखने के उपकरण के रूप में उपयोग करने में संकोच न करें।

सिर्फ HTML से भी अधिक

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

इसमें कई स्क्रिप्ट फ़ाइलें शामिल होने की संभावना है; वास्तव में, प्रत्येक व्यक्ति साइट के विभिन्न पहलुओं को शक्ति प्रदान करता है। सच कहूँ तो, किसी साइट का स्रोत कोड भारी लग सकता है, खासकर यदि आप ऐसा करने में नए हैं। यदि आप तुरंत यह पता नहीं लगा पाते कि उस साइट पर क्या हो रहा है, तो निराश न हों। HTML स्रोत को देखना इस प्रक्रिया में पहला कदम है। थोड़े से अनुभव के साथ, आप बेहतर ढंग से समझना शुरू कर देंगे कि आपके ब्राउज़र में जो वेबसाइट आप देखते हैं उसे बनाने के लिए ये सभी टुकड़े एक साथ कैसे फिट होते हैं। जैसे-जैसे आप कोड से अधिक परिचित होते जाएंगे, आप इससे और अधिक सीख पाएंगे, और यह आपके लिए इतना कठिन नहीं लगेगा।

सामान्य प्रश्न
  • मैं Chrome में HTML कोड कैसे संपादित करूं?

    दबाकर क्रोम में डेवलपर टूल खोलें Ctrl (या आज्ञा मैक पर) + शिफ्ट + आई . वहां से दबाएं Ctrl ( आज्ञा मैक पर) + ओ और उस सहेजी गई स्रोत फ़ाइल का चयन करें जिसे आप खोलने के लिए संपादित करना चाहते हैं।

  • यदि व्यू सोर्स अक्षम है तो मैं क्रोम में पेज सोर्स कोड कैसे देखूं?

    यदि किसी वेबसाइट ने स्रोत देखें विकल्प को अक्षम कर दिया है, तो आप अभी भी हुड के नीचे एक नज़र डालने में सक्षम हो सकते हैं। ब्राउज़र विंडो के शीर्ष से चुनें देखना > डेवलपर > स्रोत देखें , जिसे वेबपेज के स्रोत कोड को ऊपर खींचना चाहिए।

  • मैं अपने एंड्रॉइड डिवाइस का उपयोग करके क्रोम में किसी साइट का स्रोत कोड कैसे देख सकता हूं?

    अपने डिवाइस के Chrome ऐप का उपयोग करके उस वेबसाइट पर नेविगेट करें जिसे आप देखना चाहते हैं, फिर ब्राउज़र का एड्रेस बार चुनें। टेक्स्ट कर्सर को यूआरएल के सामने सबसे बाईं ओर ले जाएं और टाइप करें स्रोत देखें , फिर प्रेस प्रवेश करना या चुनें जाना .

दिलचस्प लेख

संपादक की पसंद

विस्तार स्लॉट क्या है?
विस्तार स्लॉट क्या है?
विस्तार स्लॉट मदरबोर्ड पर एक पोर्ट है जो विस्तार कार्ड स्वीकार करता है। विशिष्ट स्लॉट प्रारूपों में PCIe और PCI शामिल हैं।
सैमसंग पर एंड्रॉइड 14 को कैसे अपडेट करें
सैमसंग पर एंड्रॉइड 14 को कैसे अपडेट करें
क्या आप अपने डिवाइस के लिए Google के ऑपरेटिंग सिस्टम का नवीनतम संस्करण प्राप्त करने के लिए तैयार हैं? यहां संगत फ़ोन और टैबलेट तथा अपग्रेड करने के तरीके बताए गए हैं।
मूवीज और टीवी और वेदर एप्स नए रंगीन आइकॉन प्राप्त करते हैं
मूवीज और टीवी और वेदर एप्स नए रंगीन आइकॉन प्राप्त करते हैं
Microsoft अंतर्निहित ऐप्स के लिए आइकन अपडेट करना जारी रखता है। कैमरा, मेल, कैलेंडर, स्निप और स्केच और माइक्रोसॉफ्ट ऑफिस के बाद मूवी और टीवी और वेदर को नए नए रंगीन आइकन प्राप्त हो रहे हैं। यहाँ है कि वे कैसे दिखते हैं। मूवीज़ एंड टीवी: वेदर: इसके अलावा, ऑफिस सूट, मेल, आउटलुक, के बाद विंडोज 10 में कैमरा ऐप एक नया आइकन प्राप्त करता है,
इंस्टाग्राम ग्रुप कैसे बनाएं
इंस्टाग्राम ग्रुप कैसे बनाएं
इंस्टाग्राम जैसे सोशल मीडिया प्लेटफॉर्म आपको पोस्ट और कहानियां साझा करने और अपने दोस्तों के साथ चैट करने का बहुत अच्छा काम करते हैं। हालाँकि, इंस्टाग्राम ग्रुप बनाने जैसे कुछ विकल्प इतने पारदर्शी नहीं हैं। यदि आप जानना चाहते हैं कि कैसे
टैग अभिलेखागार: NVMe SSD विंडोज 7 स्थापित करें
टैग अभिलेखागार: NVMe SSD विंडोज 7 स्थापित करें
स्नैपचैट ऐप में स्टिकर कैसे हटाएं
स्नैपचैट ऐप में स्टिकर कैसे हटाएं
स्टिकर स्नैपचैट स्नैप्स का एक अनिवार्य हिस्सा बन गए हैं। स्नैपचैट ने एक फीचर भी जोड़ा है जहां आप अपने अनूठे कस्टम स्टिकर बना सकते हैं। लेकिन क्या होगा यदि आपने कोई स्टिकर जोड़ा है जो आप नहीं चाहते हैं? चिंता न करें -
विंडोज 10 के लिए संचयी अद्यतन पूर्वावलोकन, 20 अगस्त, 2020
विंडोज 10 के लिए संचयी अद्यतन पूर्वावलोकन, 20 अगस्त, 2020
Microsoft ने विंडोज 10 संस्करण 1809, 1903 और 1909 के लिए वैकल्पिक संचयी अपडेट जारी किए हैं। अपडेट में 'पूर्वावलोकन' टैग है, और 'चाहने वालों' के लिए उपलब्ध हैं, अर्थात केवल जो उपयोगकर्ता अपडेट बटन की जांच करते हैं, वे मैन्युअल रूप से इन्हें देखेंगे ' पूर्वावलोकन का अद्यतन करें। अन्यथा वे स्वचालित रूप से स्थापित नहीं होंगे। यहाँ परिवर्तन हैं। विंडोज 10, संस्करण