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

दिलचस्प लेख

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

विंडोज 10 में BSOD ऑटो रिस्टार्ट करें
विंडोज 10 में BSOD ऑटो रिस्टार्ट करें
डिफ़ॉल्ट सेटिंग्स के साथ, विंडोज 10 एक स्वचालित पुनरारंभ करता है जब मौत की एक नीली स्क्रीन (बीएसओडी) दुर्घटना होती है। इससे उपयोगकर्ता को क्रैश कोड देखने के लिए बहुत कम समय मिलता है। कभी-कभी minidump बहुत जल्दी बन जाता है और इससे पहले कि उपयोगकर्ता क्रैश कोड पढ़ सके, यह पुनरारंभ हो जाता है। यह उपयोगी नहीं है। ढूँढ़ने के लिए
अपनी फेसबुक प्रतिबंधित सूची में किसी को कैसे जोड़ें
अपनी फेसबुक प्रतिबंधित सूची में किसी को कैसे जोड़ें
सोशल मीडिया का पूरा विचार वह पहला शब्द है, सोशल। मौजूदा दोस्तों से मिलने के लिए, नए लोगों से मिलें और आम तौर पर लोगों के बारे में और जानें। हमेशा एक दोस्त होता है जो लगातार अनुरोध, टिप्पणियों के साथ आप पर बमबारी करता है
आईफोन पर iMessage में वॉयस मैसेज कैसे भेजें
आईफोन पर iMessage में वॉयस मैसेज कैसे भेजें
iMessage Apple मैसेजिंग ऐप है जिसका उपयोग एंड-टू-एंड एन्क्रिप्टेड टेक्स्ट, फोटो, वीडियो और ऑडियो भेजने के लिए किया जाता है - Apple डिवाइस के बीच। ऐसे समय में ध्वनि संदेश भेजना सुविधाजनक होता है जब हमारे पास कहने के लिए बहुत कुछ होता है। यदि आप जानना चाहते हैं कि कैसे
नोकिया लूमिया 735 रिव्यू
नोकिया लूमिया 735 रिव्यू
नोकिया का लूमिया 735, लूमिया 830 के साथ, माइक्रोसॉफ्ट के वॉयस-संचालित व्यक्तिगत डिजिटल सहायक, कोरटाना को पेश करने वाले पहले स्मार्टफोन में से एक था, जब इसे पहली बार जारी किया गया था। यह भी पाने वाले फोनों में से एक होगा
विंडोज 10 में नैरेटर को सक्षम करने के सभी तरीके
विंडोज 10 में नैरेटर को सक्षम करने के सभी तरीके
हम सेटिंग्स, शॉर्टकट कुंजियों और अन्य सहित हाल के विंडोज 10 संस्करणों में नरेटर को सक्षम करने के सभी संभावित तरीकों की समीक्षा करते हैं।
डिस्कॉर्ड सर्वर को कैसे बूस्ट करें
डिस्कॉर्ड सर्वर को कैसे बूस्ट करें
क्या आप कलह को अगले स्तर पर ले जाने के लिए तैयार हैं? अगर आप डिस्कॉर्ड नाइट्रो यूजर हैं तो आपके लिए अच्छी खबर है। आप विभिन्न स्तर के बूस्ट के साथ अपनी सेवा को $9.99 प्रति माह सदस्यता शुल्क से आगे बढ़ा सकते हैं।
Android से USB फ्लैश ड्राइव में चित्र कैसे स्थानांतरित करें
Android से USB फ्लैश ड्राइव में चित्र कैसे स्थानांतरित करें
हो सकता है कि आप अपने Android फ़ोन से अपने पीसी पर चित्र स्थानांतरित करना चाहें। वैकल्पिक रूप से, आपने सुरक्षित संग्रहण का उपयोग करके अपनी छवियों का बैकअप लेने का निर्णय लिया होगा। किसी भी तरह से, आप प्रक्रिया को पूरा करने के लिए USB फ्लैश ड्राइव का उपयोग कर सकते हैं, और