इंस्पेक्ट एलिमेंट का उपयोग करके सफारी पर वेबपेज कैसे संपादित करें

अपने इंस्पेक्ट एलिमेंट टूल के साथ, सफारी आपको किसी भी वेबपेज के फ्रंट-एंड कोड के साथ छेड़छाड़ करने देता है। यदि आप यह जांचना चाहते हैं कि विभिन्न पाठ या छवियों के साथ एक पृष्ठ कैसा दिखेगा, तो आप इसके कोड को निरीक्षण तत्व के साथ बदलकर ऐसा कर सकते हैं।

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

निरीक्षण तत्व क्या है?

निरीक्षण तत्व एक डेवलपर उपकरण है। यह सफारी पर उपलब्ध है, हालांकि क्रोम, फ़ायरफ़ॉक्स और एज जैसे अन्य वेब ब्राउज़रों पर भी। इंस्पेक्ट एलिमेंट के साथ, आप किसी वेबसाइट के परदे के पीछे से उसके फ्रंट-एंड कोड को प्रकट कर सकते हैं, जैसे HTML और CSS। हालाँकि, यह आपको इसके डेटाबेस की तरह, बैक-एंड की दृश्यता प्रदान नहीं करता है।

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

आपको निरीक्षण तत्व का उपयोग क्यों करना चाहिए?

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

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

अभी के लिए, हम निरीक्षण तत्व का उपयोग करके वेबपेज की मूल बातें संपादित करने पर ध्यान केंद्रित करने जा रहे हैं।

सफारी पर इंस्पेक्ट एलिमेंट को कैसे एक्सेस करें

आप डेवलपर मेनू का उपयोग करके सफारी पर निरीक्षण तत्व खोल सकते हैं:

1. सफारी खोलें।
2. क्लिक सफारी शीर्ष मेनू बार में।
3. ड्रॉपडाउन मेनू से, चुनें पसंद.
4. का चयन करें उन्नत विकल्प।
5. उस बॉक्स को चेक करें जो कहता है मेन्यू बार में डेवलप मेन्यू दिखाएं.

इस विकल्प को चुनने के बाद, आप कर सकते हैं दाएँ क्लिक करें एक वेबपेज पर और चुनें तत्व का निरीक्षण. वैकल्पिक रूप से, आप चुन सकते हैं विकसित करना मेनू बार में, और फिर वेब इंस्पेक्टर दिखाएँ.

निरीक्षण तत्व में वेब तत्वों को कैसे खोजें

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

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

निरीक्षण तत्व का उपयोग करके वेबसाइट के टेक्स्ट को कैसे संपादित करें

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

यह वास्तव में उतना ही सरल है! यह केवल तभी काम करेगा जब टेक्स्ट वास्तव में एक लोगो की तरह एक छवि का हिस्सा होगा।

निरीक्षण तत्व का उपयोग करके वेबसाइट की छवियों को कैसे संपादित करें

जबकि छवियां आपको सामने के छोर पर दिखाई देती हैं, वेबसाइट कोड में वे लिंक के रूप में दिखाई देती हैं। आप ऐसा कर सकते हैं दाएँ क्लिक करें और छवि और चुनें तत्व का निरीक्षण जहां वह छवि कोड में है वहां जाने के लिए। वेबसाइट छवियों में आमतौर पर JPG, GIF, या PNG फ़ाइल एक्सटेंशन होते हैं, हालांकि विशेष रूप से नहीं।

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

सफारी का उपयोग करने वाली वेबसाइटों में खुदाई करें

सफारी का इंस्पेक्ट एलिमेंट टूल आपको टेक्स्ट और इमेज के अनुरूप कोड को आसानी से ढूंढने और बदलने देता है, जो टेक्स्ट या यूआरएल स्ट्रिंग को स्विच करने जितना आसान है। एक बार जब आप निरीक्षण तत्व के साथ एक वेबसाइट का संपादन कर लेते हैं, तो बस पृष्ठ को रीफ्रेश करें और सब कुछ सामान्य हो जाएगा।

अपने ब्राउज़र के उपयोगकर्ता एजेंट और ट्रिक वेबसाइटों को कैसे बदलें

आगे पढ़िए

लेखक के बारे में