Google क्रोम ब्राउज़र के निरीक्षण तत्व का उपयोग करने पर युक्तियाँ

Google क्रोम(Google Chrome) न केवल नियमित इंटरनेट उपयोगकर्ताओं के लिए बल्कि वेब डेवलपर्स के लिए भी डिज़ाइन किया गया है, जो अक्सर वेबसाइट बनाते हैं, ब्लॉग डिज़ाइन करते हैं, आदि। Google क्रोम का (Google Chrome)निरीक्षण तत्व(Inspect Element ) या निरीक्षण(Inspect ) विकल्प उपयोगकर्ताओं को ऐसी वेबसाइट के बारे में कुछ जानकारी खोजने में सहायता करता है जो दृश्य से छिपी हुई है . विंडोज पीसी के लिए (Windows PC)Google क्रोम(Google Chrome) ब्राउज़र के निरीक्षण तत्व(Inspect Element) का उपयोग करने के बारे में यहां कुछ युक्तियां दी गई हैं ।

Google क्रोम के तत्व का निरीक्षण करें

1] Find hidden JavaScript/Media files

Google क्रोम के तत्व का निरीक्षण करें

यदि आगंतुक वेब पेज पर 15 या 20 सेकंड से अधिक समय तक रहता है तो कई वेबसाइट पॉपअप दिखाती हैं। या, कई बार कोई छवि, विज्ञापन या आइकन, बेतरतीब ढंग से कहीं क्लिक करने के बाद खुल जाता है। वेब पेज पर इन छिपी हुई फाइलों को खोजने के लिए, आप निरीक्षण तत्व के (Inspect Element)स्रोत(Sources) टैब का उपयोग कर सकते हैं । यह बाईं ओर एक ट्री-व्यू सूची दिखाता है जिसे खोजा जा सकता है।

2] Get HEX/RGB color code in Chrome

Google क्रोम के तत्वों का निरीक्षण करें टिप्स और ट्रिक्स

कभी-कभी हमें कोई रंग पसंद आता है और हम उसके रंग कोड का पता लगाना चाहते हैं। आप Google क्रोम(Google Chrome) में मूल विकल्प का उपयोग करके किसी विशेष वेब पेज पर उपयोग किए गए HEX या RGB रंग कोड को आसानी से पा सकते हैं । रंग पर राइट-क्लिक करें , और (Right-click)निरीक्षण(Inspect) पर क्लिक करें । अधिकांश समय, आपको अन्य CSS(CSS) के साथ दाईं ओर रंग कोड मिलेगा । यदि आप इसे नहीं देखते हैं, तो ठीक है, आपको कुछ मुफ्त रंग बीनने वाले सॉफ़्टवेयर का उपयोग करना पड़ सकता है।

सुझाव : इन (TIP)कलर पिकर ऑनलाइन टूल(Color Picker online tools) पर भी एक नज़र डालें ।

3] वेब पेज प्रदर्शन सुधार युक्तियाँ प्राप्त करें(3] Get web page performance improvement tips)

Google क्रोम के तत्वों का निरीक्षण करें टिप्स और ट्रिक्स

हर कोई तेजी से खुलने वाली वेबसाइट पर उतरना पसंद करता है। यदि आप अपनी वेबसाइट डिजाइन कर रहे हैं, तो आपको इसे हमेशा ध्यान में रखना चाहिए। पेज लोडिंग स्पीड को जांचने और ऑप्टिमाइज़ करने के लिए कई टूल हैं। हालाँकि, Google Chrome एक इनबिल्ट टूल के साथ आता है जो उपयोगकर्ताओं को वेबसाइट लोडिंग गति को बेहतर बनाने के लिए टिप्स प्राप्त करने की अनुमति देता है। इन उपकरणों तक पहुंचने के लिए, ऑडिट(Audits) टैब पर जाएं, और सुनिश्चित करें कि नेटवर्क उपयोग(Network Utilization) , वेब पेज प्रदर्शन(Web Page Performance) , और पृष्ठ पुनः लोड करें और लोड पर ऑडिट(Reload Page and Audit on Load) चयनित हैं। इसके बाद रन(Run ) बटन पर क्लिक करें। यह पृष्ठ को पुनः लोड करेगा, और आपको कुछ जानकारी दिखाएगा जिसका उपयोग पृष्ठ को तेज़ बनाने के लिए किया जा सकता है। उदाहरण के लिए, आप उन सभी संसाधनों को प्राप्त कर सकते हैं जिनकी कोई कैश समाप्ति नहीं है, जावास्क्रिप्ट(JavaScript)जिसे एक फ़ाइल में जोड़ा जा सकता है, और इसी तरह।

4] जवाबदेही की जाँच करें(4] Check responsiveness)

Google क्रोम के तत्वों का निरीक्षण करें टिप्स और ट्रिक्स

वेब पेज को उत्तरदायी बनाना आजकल महत्वपूर्ण है। ऐसे बहुत से टूल हैं जो यह जांच सकते हैं कि आपकी साइट पूरी तरह उत्तरदायी है या नहीं। हालांकि, गूगल क्रोम(Google Chrome) का यह टूल यूजर्स को यह जानने में मदद करता है कि साइट रिस्पॉन्सिव है या नहीं और साथ ही यह भी जांचती है कि यह किसी खास मोबाइल डिवाइस पर कैसी दिखेगी। कोई भी वेबसाइट खोलें, इंस्पेक्ट एलिमेंट(Inspect Element ) टैब प्राप्त करें, मोबाइल(mobile ) बटन पर क्लिक करें, रिज़ॉल्यूशन सेट करें, या वेब पेज का परीक्षण करने के लिए वांछित डिवाइस का चयन करें।

5] लाइव वेबसाइट संपादित करें(5] Edit live website)

Google क्रोम के तत्वों का निरीक्षण करें टिप्स और ट्रिक्स

आइए मान लें कि आप एक वेब पेज बना रहे हैं, लेकिन आप रंग योजना या नेविगेशन मेनू आकार या सामग्री या साइडबार अनुपात के बारे में उलझन में हैं। आप Google क्रोम के (Google Chrome)इंस्पेक्ट एलिमेंट(Inspect Element) विकल्प का उपयोग करके अपनी लाइव वेबसाइट को संपादित कर सकते हैं । यद्यपि आप किसी लाइव वेबसाइट पर परिवर्तनों को सहेज नहीं सकते हैं, आप सभी संपादन कर सकते हैं ताकि आप इसे आगे उपयोग कर सकें। ऐसा करने के लिए, निरीक्षण तत्व खोलें, बाईं ओर से (Inspect Element)HTML संपत्ति का चयन करें और दाईं ओर स्टाइल परिवर्तन करें। यदि आप सीएसएस(CSS) में कोई बदलाव करते हैं , तो आप फ़ाइल लिंक पर क्लिक कर सकते हैं, पूरे कोड को कॉपी कर सकते हैं और मूल फ़ाइल में पेस्ट कर सकते हैं।

(Inspect Element)Google क्रोम(Google Chrome) का निरीक्षण तत्व प्रत्येक वेब डेवलपर का वास्तविक साथी है। इससे कोई फर्क नहीं पड़ता कि आप एक-पृष्ठ की वेबसाइट विकसित कर रहे हैं या एक गतिशील वेबसाइट, आप निश्चित रूप से इन युक्तियों का उपयोग कर सकते हैं।



Faisal Mand

About the author

मैं एक सॉफ्टवेयर इंजीनियर हूं जिसे क्रोम और गेमिंग एप्लिकेशन दोनों में अनुभव है। मैं पिछले 4 वर्षों से Google क्रोम ब्राउज़र के समाधान पर काम कर रहा हूं और कई अलग-अलग प्लेटफार्मों के लिए गेम पर भी काम किया है। मेरा कौशल सॉफ्टवेयर परियोजनाओं की डिजाइनिंग, परीक्षण और प्रबंधन में निहित है। एक सॉफ्टवेयर इंजीनियर के रूप में अपने काम के अलावा, मुझे गोपनीयता, उपयोगकर्ता खातों और पारिवारिक सुरक्षा के मुद्दों का भी अनुभव है।


Related posts