क्रोम, फ़ायरफ़ॉक्स और एज का उपयोग करके वेबसाइटों से कोड कैसे कॉपी करें

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

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

क्रोम का उपयोग करके वेबसाइटों से कोड कैसे कॉपी करें

आप Chrome पर निम्न विधियों का उपयोग करके किसी वेबसाइट से कोड कॉपी कर सकते हैं।

पृष्ठ स्रोत के माध्यम से

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

क्लिक पृष्ठ का स्त्रोत देखें या बस दबाएं सीटीआरएल + यू (विंडोज़, लिनक्स) या कमान + यू (मैक ओएस)। आप जो कोड चाहते हैं उसका हिस्सा कॉपी करें या इसे पूरा करें और इसे अपने पसंदीदा कोड संपादक में पेस्ट करें।

F12 शॉर्टकट के माध्यम से

आप किसी वेबसाइट पर जाकर और बस दबाकर आसानी से Chrome डेवलपर टूल तक पहुंच सकते हैं F12. क्रोम डेवलपर टूल्स में वेबसाइट कोड होता है और देवों के लिए डिबगिंग टूल के रूप में दोगुना हो जाता है।

अपने इच्छित सभी कोड का चयन करें, इसे कॉपी करें, और इसे अपनी पसंद के कोड संपादक में पेस्ट करें।

Chrome डेवलपर टूल पैनल में प्रवेश करने का दूसरा तरीका निरीक्षण टूल के माध्यम से है। ऐसा करने के लिए, उस लक्ष्य वेबसाइट पर जाएँ जिससे आप कोड कॉपी करना चाहते हैं। अब, दबाएं Ctrl + Shift + I (विंडोज़, लिनक्स) या कमान + विकल्प + आई (macOS), यह आपको सीधे Dev Tools पर ले जाएगा।

वैकल्पिक रूप से, पृष्ठ के किसी भी स्पष्ट हिस्से पर राइट-क्लिक करें और चुनें निरीक्षण मेनू विकल्प से, पृष्ठ स्रोत देखने के विकल्प के ठीक नीचे।

क्रोम के अधिक क्रिया मेनू के माध्यम से

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

अपने इच्छित सभी कोड को कॉपी करें और अपनी पसंद के किसी भी कोड संपादक में पेस्ट करें। साथ ही, डिबगिंग टूल होने के अलावा, आप भी कर सकते हैं स्क्रीनशॉट लेने के लिए क्रोम देव टूल्स का उपयोग करें.

फ़ायरफ़ॉक्स का उपयोग करके वेबसाइटों से कोड कैसे कॉपी करें

यहां फ़ायरफ़ॉक्स का उपयोग करके वेबसाइट कोड कॉपी करने के विभिन्न तरीके दिए गए हैं।

पृष्ठ का स्त्रोत देखें

पृष्ठ स्रोत को देखकर फ़ायरफ़ॉक्स में वेबसाइट कोड तक पहुँचने और कॉपी करने के लिए, बस लक्षित वेबसाइट पर राइट-क्लिक करें और क्लिक करें पृष्ठ का स्त्रोत देखें.

वैकल्पिक रूप से दबाएं सीटीआरएल + यू (विंडोज़, लिनक्स) या कमान + यू (मैक ओएस)। अपने इच्छित सभी कोड को कॉपी करें और इसे अपनी पसंद के कोड संपादक में पेस्ट करें।

आप तीन-पंक्ति हैमबर्गर मेनू पर क्लिक करके, चयन करके फ़ायरफ़ॉक्स में पृष्ठ स्रोत को आसानी से देख सकते हैं अधिक उपकरण, और क्लिक करना पृष्ठ उदगम.

F12 कीबोर्ड शॉर्टकट के माध्यम से

क्रोम की तरह, आप अपने कीबोर्ड पर केवल F12 कुंजी दबाकर Firefox Dev Tools में किसी वेबसाइट के कोड तक पहुंच सकते हैं।

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

फिर से, क्रोम की तरह, आप बिल्ट-इन इंस्पेक्ट टूल का उपयोग करके फ़ायरफ़ॉक्स में वेबसाइट कोड को समान रूप से एक्सेस कर सकते हैं। ऐसा करने के लिए, लक्षित वेबसाइट के किसी स्पष्ट भाग पर राइट-क्लिक करें और या तो दबाएँ क्यू या क्लिक करें निरीक्षण. आप प्रेस भी कर सकते हैं Ctrl + Shift + I (विंडोज़, लिनक्स) या कमान + विकल्प + आई (मैक ओएस)।

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

फ़ायरफ़ॉक्स अधिक क्रिया मेनू के माध्यम से

फ़ायरफ़ॉक्स में अधिक क्रिया मेनू के माध्यम से वेबसाइट कोड कॉपी करने के लिए, जिस वेबसाइट के कोड को आप कॉपी करना चाहते हैं, ऊपरी-दाएँ कोने में तीन-पंक्ति हैमबर्गर मेनू पर क्लिक करें।

चुनना अधिक उपकरण, तब दबायें वेब डेवलपर उपकरण. वांछित कोड को कॉपी करने के लिए यहां से आप इंस्पेक्टर या स्टाइल एडिटर का उपयोग कर सकते हैं।

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

एज का उपयोग करके वेबसाइटों से कोड कैसे कॉपी करें

आप निम्नानुसार एज का उपयोग करके विभिन्न तरीकों से वेबसाइट कोड को आसानी से कॉपी कर सकते हैं।

पृष्ठ का स्त्रोत देखें

माइक्रोसॉफ्ट एज में पृष्ठ स्रोत को देखकर वेबसाइट कोड कॉपी करने के लिए, लक्ष्य साइट के किसी भी स्पष्ट हिस्से पर बस राइट-क्लिक करें और चुनें पृष्ठ का स्त्रोत देखें.

वैकल्पिक रूप से, आप बस दबा सकते हैं सीटीआरएल + यू (विंडोज़, लिनक्स) या कमान + यू (macOS), जो भाग आप चाहते हैं उसे कॉपी करें, इसे एक संपादक में पेस्ट करें, और कोड को अनुकूलित करना प्रारंभ करें।

F12 कीबोर्ड शॉर्टकट के माध्यम से

यदि आप एज का उपयोग करते हैं, तो आप उस वेबसाइट पर जाते समय केवल F12 कुंजी दबाकर वेबसाइट कोड को समान रूप से कॉपी कर सकते हैं, जिससे आप कोड कॉपी करना चाहते हैं।

क्लिक करके अपनी पसंद की पुष्टि करें DevTools खोलें. देव टूल्स पैनल पर, आप अपने इच्छित सभी कोड को आसानी से कॉपी कर सकते हैं और अपना काम तेजी से कर सकते हैं।

एज के इंस्पेक्ट टूल का उपयोग करके वेबसाइट कोड को कॉपी करने के लिए, उस वेबसाइट पर जाएं जिसका कोड आप कॉपी करना चाहते हैं, किसी भी स्पष्ट हिस्से पर राइट-क्लिक करें और चुनें निरीक्षण.

आप प्रेस भी कर सकते हैं Ctrl + Shift + I (विंडोज़, लिनक्स) या कमान + विकल्प + आई (मैक ओएस)। फिर आप उस कोड को कॉपी और पेस्ट कर सकते हैं जिसे आप डुप्लिकेट और संपादित करना चाहते हैं।

एज के मोर एक्शन बटन के माध्यम से

एज आपको इसके DevTools पैनल को अधिक क्रिया मेनू के माध्यम से एक्सेस करने की अनुमति भी देता है। ऐसा करने के लिए, उस वेबसाइट पर जाएं जिसका कोड आप कॉपी करना चाहते हैं। ऊपरी-दाएँ कोने में तीन डॉट्स बटन पर क्लिक करें और क्लिक करें अधिक उपकरण, तब डेवलपर उपकरण.

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

आप जो भी दृष्टिकोण अपनाते हैं और जो भी क्रोमियम-आधारित ब्राउज़र आप उपयोग करते हैं (Chrome, Firefox, या Edge), आप देव टूल्स पैनल के तीन डॉट्स मेनू पर क्लिक करके विशिष्ट फाइलों या तत्वों की खोज कर सकते हैं और का चयन खोज. वैकल्पिक रूप से, बस दबाएं CTRL+SHIFT+F (विंडोज़, लिनक्स) या कमान + विकल्प + एफ (मैक ओएस)।

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

मौजूदा वेबसाइट कोड का उपयोग करके अपने कौशल को निखारें

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

हालाँकि, वेबसाइट कोड की नकल केवल आपके स्वयं के सीखने और ऑफ़लाइन घूमने के लिए की जानी चाहिए। किसी मौजूदा वेबसाइट की प्रतिकृति बनाने का प्रयास करना और उसे यथास्थिति में प्रकाशित करना कॉपीराइट उल्लंघन का कारण बन सकता है। आप मोबाइल कोड संपादकों के साथ चलते-फिरते भी अपनी कोडिंग ले सकते हैं।