Computer >> कंप्यूटर >  >> सॉफ्टवेयर >> ब्राउज़र्स

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

क्या जानना है

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

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

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

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

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

  2. उस वेब पृष्ठ पर नेविगेट करें जिसकी आप जांच करना चाहते हैं

  3. पेज पर राइट-क्लिक करें और दिखाई देने वाले मेनू को देखें। उस मेनू से, पृष्ठ स्रोत देखें click क्लिक करें ।

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

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

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

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

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

  1. Google Chrome खोलें ।

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

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

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

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

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

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

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

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

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

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

सिर्फ HTML से ज्यादा

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

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


  1. क्रोम एक्सटेंशन का सोर्स कोड कैसे देखें

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

  1. Google Chrome में पृष्ठभूमि कैसे बदलें

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

  1. Google Chrome डिफ़ॉल्ट फ़ॉन्ट कैसे बदलें?

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