मुख्यपृष्ठ » सॉफ्टवेअर » क्रोम डेव्हटूल्स: डेव्हलपर टूल्सचा सर्वोत्तम वापर करण्यासाठी एक संपूर्ण मार्गदर्शक
क्रोम डेव्हटूल्स: डेव्हलपर टूल्सचा सर्वोत्तम वापर करण्यासाठी एक संपूर्ण मार्गदर्शक
क्रोम डेव्हटूल्स तुम्हाला ब्राउझरमधूनच कोणत्याही वेबसाइटचे सखोल विश्लेषण आणि ऑप्टिमायझेशन करण्याची सुविधा देते.
त्याचे एलिमेंट्स, नेटवर्क, सोर्सेस आणि कन्सोल पॅनेल व्हिज्युअल डीबगिंग, परफॉर्मन्स, रिसोर्सेस आणि स्क्रिप्ट्स यांचा समावेश करतात.
लाईटहाऊस आणि रेकॉर्डर फंक्शनच्या मदतीने, तुम्ही कार्यप्रदर्शन, सुलभता आणि प्रत्यक्ष वापरकर्त्याच्या अनुभवाची तपासणी करू शकता.
वेबसाइटची कार्यक्षमता, सुलभता आणि शोध इंजिन रँकिंग सुधारू पाहणाऱ्या कोणत्याही वेब डेव्हलपर, डिझायनर किंवा एसईओ तज्ञासाठी क्रोम डेव्हटूल्स एक अपरिहार्य साथीदार बनले आहे. गूगल क्रोममध्ये समाकलित केलेली ही साधने, वेबसाइटच्या कार्यक्षमतेवर सखोल अंतर्दृष्टी आणि नियंत्रण देतात, ज्यामुळे एचटीएमएल आणि सीएसएस तपासणीपासून ते व्यापक नेटवर्क क्रियाकलाप विश्लेषण, कार्यप्रदर्शन चाचणी आणि मोबाइल ऑप्टिमायझेशनपर्यंत सर्वकाही करता येते.
तुम्हाला क्रोम डेव्हटूल्समध्ये प्राविण्य मिळवून, कोणत्याही वेबसाइटवरील समस्या डीबग करण्यासाठी, ऑप्टिमाइझ करण्यासाठी आणि निदान करण्यासाठी त्याच्या सर्व वैशिष्ट्यांचा पुरेपूर वापर करायला आवडेल का? या लेखात, आम्ही उदाहरणे आणि टिप्ससह, या साधनांचा सर्वोत्तम वापर सुरू करण्यासाठी आवश्यक असलेली प्रत्येक गोष्ट स्पष्टपणे समजावून सांगू. यामध्ये ती साधने पटकन कशी उघडावीत, प्रत्येक पॅनलद्वारे तुम्ही कशाचे विश्लेषण करू शकता, प्रत्येक फंक्शन कशासाठी आहे आणि डेव्हलपमेंट व एसइओ (SEO) या दोन्हीमध्ये त्यांचा वापर कसा करावा, याचा समावेश आहे.
क्रोम डेव्हटूल्स काय आहेत आणि ते इतके शक्तिशाली का आहेत?
क्रोम डेव्हटूल्स डेव्हलपर टूल्सचा संच हा गूगल क्रोममधील एक अंगभूत पॅनेल आहे, जो कोणत्याही वापरकर्त्याला अतिरिक्त प्लगइन्स इन्स्टॉल न करता कोणत्याही वेबसाइटच्या कोड आणि परफॉर्मन्सचे विश्लेषण, डीबगिंग आणि ऑप्टिमायझेशन करण्याची सुविधा देण्यासाठी डिझाइन केलेला आहे . त्याच्या असंख्य टॅब्स आणि फीचर्सद्वारे, तुम्ही एलिमेंट्स तपासू शकता, रिअल-टाइममध्ये स्टाइल्समध्ये बदल करू शकता, नेटवर्क ॲक्टिव्हिटीचा मागोवा घेऊ शकता, स्क्रिप्ट्स डीबग करू शकता, परफॉर्मन्सचे मूल्यांकन करू शकता आणि मोबाइल डिव्हाइसेसवर वेबसाइटच्या वर्तनाचे सिम्युलेशनसुद्धा करू शकता . याची व्याप्ती केवळ "सोर्स कोड पाहण्या"च्या पलीकडे जाते: वेबसाइट कशी इंटरॅक्ट करते, गूगल त्याचा अर्थ कसा लावते आणि वापरकर्ता वेगवेगळ्या डिव्हाइसेस किंवा कनेक्शन्सवरून ती कशी नेव्हिगेट करतो, याचा अनुभव घेण्याची संधी हे तुम्हाला देते.
क्रोम डेव्हटूल्स कसे वापरावे: जलद शॉर्टकट आणि संदर्भ मेनू
क्रोम डेव्हटूल्स वापरणे अत्यंत सोपे आहे आणि तुमच्या ऑपरेटिंग सिस्टम व पसंतीनुसार ते करण्याचे अनेक मार्ग आहेत:
ज्या पानाचे विश्लेषण करायचे आहे त्यावर राईट-क्लिक करा. आणि “तपासा” निवडा. ही सर्वात दृश्यमान आणि सामान्यतः वापरली जाणारी पद्धत आहे.
वापरा कीबोर्ड शॉर्टकट तुमच्या ऑपरेटिंग सिस्टमनुसार: Windows / लिनक्स: Ctrl + Shift + I मॅक: सीएमडी + पर्याय + मी
तुम्ही क्रोम मेन्यूमध्ये (ॲड्रेस बारच्या उजवीकडील तीन उभे ठिपके) जाऊन अधिक साधने > डेव्हलपर साधने निवडू शकता.
कीबोर्डचा वापर करून विशिष्ट पॅनेल थेट उघडण्यासाठी:
एलिमेंट्स पॅनल (HTML/CSS): Ctrl + Shift + C (Windows/Linux) किंवा Cmd + Option + C (Mac)
शेवटचे वापरलेले पॅनल: F12 (बहुतेक सिस्टीमवर) किंवा Ctrl + Shift + I / Cmd + Option + I
प्रत्येक नवीन टॅबमध्ये डेव्ह टूल्स आपोआप उघडा (जे लोक डीबगिंगमध्ये आपला वेळ घालवतात त्यांच्यासाठी अत्यंत उपयुक्त): क्रोम या पर्यायासह चालवा --auto-open-devtools-for-tabs कमांड लाइन मधून.
हे विसरू नका: जेव्हा तुम्ही डेव्हटूल्स उघडता, तेव्हा तुम्ही त्यांना विंडोच्या उजवीकडे, डावीकडे, खाली किंवा अगदी एका वेगळ्या विंडोमध्ये पिन करायचे की नाही हे ठरवू शकता—जर तुम्ही एकापेक्षा जास्त स्क्रीनवर काम करत असाल तर ही गोष्ट विशेषतः सोयीची ठरते.
तुम्ही क्रोम डेव्हटूल्सने काय करू शकता? त्याच्या मुख्य वैशिष्ट्यांवर एक नजर.
क्रोम डेव्हटूल्स अनेक पॅनेल्समध्ये विभागलेले आहे. त्यातील प्रत्येक पॅनेल वेब विश्लेषण आणि ऑप्टिमायझेशनच्या एका महत्त्वाच्या पैलूचा समावेश करते. येथे सर्वाधिक वापरले जाणारे पॅनेल्स आणि त्यांची सर्वात संबंधित कार्ये दिली आहेत:
एलिमेंट्स पॅनल: DOM आणि CSS ची थेट तपासणी आणि संपादन
हे पॅनल बहुतेक डीबगिंग आणि व्हिज्युअल विश्लेषण कार्यांसाठी प्रारंभिक बिंदू आहे. हे तुम्हाला पुढील गोष्टी करण्याची परवानगी देते:
DOM (डॉक्युमेंट ऑब्जेक्ट मॉडेल) च्या अचूक संरचनेची तपासणी करा. ब्राउझर जे रेंडर करत आहे, म्हणजेच, स्क्रिप्ट्स चालवल्यानंतर आणि स्टाईल्स लोड केल्यानंतर गूगलला प्रत्यक्षात जे दिसते.
HTML आणि CSS मध्ये तात्काळ बदल करावेबसाइटवर बदल कसे दिसतात हे त्वरित तपासता येते (मूळ सोर्स कोडवर परिणाम न करता प्रोटोटाइपिंग किंवा नवीन शैली नियमांची चाचणी घेण्यासाठी उत्तम).
वर्ग आणि शैली व्यवस्थापित करा घटकांपैकी: तुम्ही नवीन क्लास सक्रिय, निष्क्रिय करू शकता किंवा त्यांची चाचणी घेऊ शकता आणि रिस्पॉन्सिव्ह डिझाइनसाठी दृश्य तपशील संपादित करू शकता.
विशेष गुणधर्म पहा आणि हाताळा (जसे की data-nosnippet), जे एसईओसाठी मूलभूत आहेत, कारण तुम्ही तपासू शकता की गूगल विशिष्ट सामग्री अनुक्रमित करू शकेल की नाही.
वापरकर्त्याच्या कृतीनंतरच दिसणारे घटक किंवा ब्लॉक्स आहेत का ते तपासा (उदाहरणार्थ, टॅब किंवा ड्रॉपडाउन जे प्रदर्शित करण्यासाठी जावास्क्रिप्ट आवश्यक असते).
कन्सोलवरील तपासलेल्या आयटमला $0 म्हणून त्वरित ऍक्सेस. तुम्हाला जावास्क्रिप्टद्वारे थेट त्यात फेरफार करण्याची परवानगी देते.
टीप! तुम्ही या पॅनलमधून विविध स्क्रीन आकार आणि मोबाइल डिव्हाइसेसचे सिम्युलेशन देखील करू शकता, ज्यामुळे तुमची वेबसाइट खऱ्या अर्थाने रिस्पॉन्सिव्ह राहील.
नेटवर्क पॅनल: संसाधनांवरील भाराचे विश्लेषण करते, विलंबाचे निदान करते आणि धीम्या जोडण्यांचे अनुकरण करते.
कार्यप्रदर्शन विश्लेषणासाठी आवश्यक असलेल्या डॅशबोर्डपैकी एक . येथे तुम्ही तो कालक्रमानुसार आणि तपशीलवार पाहू शकता:
पृष्ठ लोड करताना मागितलेली सर्व संसाधने (एचटीएमएल, इमेजेस, सीएसएस, जेएस, व्हिडिओ, फॉन्ट्स, इत्यादी.).
ते कोणत्या क्रमाने डाउनलोड होतात, लोड होण्यास लागणारा वेळ आणि आकार प्रत्येक संसाधनाचे: अडथळे किंवा अनावश्यक संसाधने ओळखण्याची गुरुकिल्ली.
प्रत्येक संसाधनावर क्लिक करून तुम्ही तपासू शकता HTTP हेडर, कॅशिंग धोरणे, प्रतिसाद वेळआणि मिनिमाइज केलेल्या फाइल्स आहेत का ते सुद्धा तपासा.
मंद कनेक्शनचे सिम्युलेशन (3G, 4G, इत्यादी), केवळ तुमच्या स्वतःच्या संगणकावरच नव्हे तर तुमच्या वापरकर्त्यांच्या डिव्हाइसवर वास्तविक कार्यप्रदर्शन पाहण्यासाठी.
साठी कार्य कॅशे साफ करा आणि पुन्हा लोड करानवीन वापरकर्त्याचा अनुभव तपासण्यासाठी उपयुक्त.
विनंती अवरोधन: विशिष्ट संसाधने वगळल्यास होणाऱ्या परिणामाचे विश्लेषण करते (उदाहरणार्थ, main.css अक्षम करणे आणि पृष्ठ कसे चुकीच्या पद्धतीने कॉन्फिगर होते हे पाहणे).
प्रगत फिल्टरिंग: फाईल प्रकार, स्रोत डोमेन, रेग्युलर एक्सप्रेशन्स किंवा विशिष्ट गुणधर्मांनुसार शोधा, बाह्य डाउनलोडचे ऑडिट करण्यासाठी किंवा सुरक्षेचे निरीक्षण करण्यासाठी आदर्श.
स्क्रीनशॉट घेणे पेज लोड होण्याच्या विविध टप्प्यांवर, वापरकर्त्याला टप्प्याटप्प्याने काय दाखवले जात आहे हे पाहण्याची संधी मिळते.
विशेषतः एसईओ (SEO) आणि डब्ल्यूपीओ (WPO) साठी: सर्वात आधी काय लोड होते आणि त्याचा कार्यक्षमतेवर कसा परिणाम होतो याचे विश्लेषण करणे , तसेच वेब व्हायटल्ससाठी (Web Vitals) , गूगल (Google) आणि तुमच्या अभ्यागतांसाठी अनुभव कसा अनुकूलित करायचा हे समजून घेणे.
कन्सोल पॅनल: डीबग करा, स्क्रिप्ट्स चालवा आणि रिअल-टाइम अलर्ट मिळवा
कन्सोलमध्ये तुम्ही वेबसाइटद्वारे जारी केलेले लॉग, जावास्क्रिप्ट त्रुटी आणि सुरक्षा सूचना रिअल-टाइममध्ये पाहू शकता. तुम्ही हे देखील करू शकता:
जावास्क्रिप्ट कमांड थेट कार्यान्वित करा उघड्या पानावर, जलद चाचण्या किंवा ऑटोमेशनसाठी उत्तम.
व्हेरिएबल वापरून शेवटच्या तपासलेल्या घटकाशी संवाद साधा $0 (आणि $1, $2, इत्यादी), प्रगत डीबगिंगला गती देते.
त्रुटी किंवा चेतावण्यांवर क्लिक करून थेट दोषपूर्ण JS फाईलच्या ओळीवर जा.
सोर्सेस पॅनल: स्टॅटिक फाइल्स आणि बाह्य संसाधने पहा आणि डीबग करा
या विभागात वेबसाइटवर अपलोड केलेल्या फाईल्सची रचना (स्क्रिप्ट्स, स्टाईल्स, इमेजेस, इत्यादी) डोमेननुसार आयोजित केलेली दाखवली जाते.
तुम्ही गूगल फॉन्ट्ससारखे बाह्य स्रोत वापरता का, हे शोधून काढा.आणि वेग वाढवण्यासाठी त्यांना स्थानिक पातळीवर होस्ट करण्याचा विचार करत आहे.
यामुळे तुम्हाला चाचणीसाठी सोर्स फाइल्स उघडता येतात, संपादित करता येतात आणि सेव्ह करता येतात.
मिनिफाइड स्क्रिप्ट्सचे विश्लेषण करा, अधिक वाचनीयतेसाठी कोडचा विस्तार करा आणि छुपे डिपेंडेंसी तपासा.
रेकॉर्डर: वापरकर्त्याच्या प्रवासाचे अनुकरण करतो आणि त्यांच्या वास्तविक अनुभवाचे मोजमाप करतो.
रेकॉर्डिंग फंक्शन तुम्हाला वापरकर्त्याच्या प्रत्यक्ष ब्राउझिंगचे अनुकरण करण्यास आणि विशिष्ट समस्या ओळखण्यास अनुमती देते:
तुम्ही नॅव्हिगेशन फ्लो (उदा., मेनूवर क्लिक करणे, फॉर्म भरणे, एका पेजवरून दुसऱ्या पेजवर जाणे) रेकॉर्ड करू शकता, वेबसाइट कसा प्रतिसाद देते हे तपासू शकता आणि प्रत्येक क्रियेच्या लोडिंग वेळेचे विश्लेषण करू शकता.
कन्व्हर्जन किंवा UX च्या महत्त्वाच्या मार्गांमधील अडथळे शोधण्यासाठी आदर्श.
लाइटहाऊस: कार्यप्रदर्शन, सुलभता आणि सर्वोत्तम पद्धतींचे सर्वसमावेशक परीक्षण
सादर करा स्वयंचलित ऑडिट कामगिरी (WPO), सुलभता, सर्वोत्तम पद्धती, एसईओ आणि पीडब्ल्यूए (प्रोग्रेसिव्ह वेब ऍप्लिकेशन्स).
प्रदान करते एकूण स्कोअर आणि आधीच प्रकाशित झालेल्या तसेच विकासाधीन असलेल्या दोन्ही प्रकारच्या वेबसाइट्ससाठी, प्रत्येक विभागाकरिता कृती करण्यायोग्य शिफारसी.
यामुळे तुम्हाला वेबसाइटचे डेस्कटॉप आणि मोबाइल मोडमध्ये विश्लेषण करता येते, ज्यामुळे मोबाइल फ्रेंडलीनेसच्या समस्या ओळखण्यासाठी हे खूप उपयुक्त ठरते.
व्यावहारिक उपयोग: WPO आणि SEO साठी DevTools चा उपयोग कसा करावा
क्रोम डेव्हटूल्स हे सर्व स्तरांवर वेबसाइट ऑप्टिमायझेशनसाठी एक मूलभूत साधन आहे: सुरुवातीच्या डिझाइनपासून ते जाहिरात विनंती विश्लेषण आणि ऑन-पेज एसइओ ऑडिटिंगपर्यंत. त्याच्या काही प्रमुख उपयोगांमध्ये हे समाविष्ट आहे:
कार्यप्रदर्शन ऑप्टिमायझेशन (डब्ल्यूपीओ)
प्रतिमा आणि मोठ्या फाइल्स ओळखते नेटवर्क टॅबमधून त्याच्या ऑप्टिमायझेशनला (कॉम्प्रेशन, नवीन फॉरमॅट्स, लेझी लोड) प्राधान्य द्या.
बाह्य संसाधन भाराचे मूल्यांकन कराजर जास्त वेळ लागत असेल, तर ते तुमच्या स्वतःच्या सर्व्हरवरून डाउनलोड करण्याचा विचार करा.
लोडिंगचा प्राधान्यक्रम अशा प्रकारे बदला की महत्त्वाच्या बाबींना प्रथम प्राधान्य दिले जाईल.गंभीर पथ).
नेटवर्क पॅनलमधून कॅशे अक्षम करा बदलांचे विश्लेषण करताना, माहिती स्थानिक पातळीवर साठवली जात नाही याची खात्री करा.
मोबाईल वापरकर्त्याचा अनुभव तपासण्यासाठी स्लो कनेक्शन सिम्युलेटरचा वापर करा.
संसाधनांचे किमानीकरण (CSS आणि JavaScript)
फॉन्ट्स टॅबमध्ये, अवाढव्य, संकुचित न केलेल्या किंवा डुप्लिकेट फाइल्स शोधते.
विनंत्या कमी करण्यासाठी आणि लोड होण्याचा वेळ सुधारण्यासाठी CSS आणि JS ला एकसमान व संक्षिप्त करा.
संरचनात्मक विश्लेषण, सुलभता आणि एसईओ
शीर्षके, विशेषता आणि HTML अर्थ यांच्या रचनेचा आढावा घ्या.तार्किक रचना (h2, h3, ALT टॅग, भूमिका) Google साठी सर्वोत्तम असल्याची खात्री करा.
लाईटहाऊसकडे चौकशी करा आवश्यक लेबल्स आणि डेटाची उपस्थिती एसईओ, अॅक्सेसिबिलिटी आणि पीडब्ल्यूए साठी.
रेंडरिंगवर जावास्क्रिप्टच्या परिणामाचे विश्लेषण करा आणि हे लक्षात ठेवा की, लोडिंगच्या वेळी वापरकर्त्याच्या परस्परसंवादावर अवलंबून असलेली गोष्ट दिसत नसल्यास, गूगल कदाचित त्याचा अर्थ लावणार नाही.
कुकीज, लोकल स्टोरेज आणि इतर ब्राउझर संसाधनांच्या वापराचे निरीक्षण करते.
स्क्रॅपिंग किंवा निर्यातीसाठी सामग्रीचे निष्कर्षण आणि हाताळणी
मोठे टेबल किंवा याद्या थेट स्प्रेडशीट किंवा कोड एडिटरमध्ये निर्यात करण्यासाठी तुम्ही "कॉपी एलिमेंट" वापरू शकता.
ऑन-स्क्रीन सामग्री कार्यक्षमतेने संपादित करण्यासाठी, कॅप्चर तयार करण्यासाठी किंवा संबंधित माहिती निर्यात करण्यासाठी कन्सोल आणि डिझाइन मोडचा वापर करा.
रिअल-टाइम कस्टमायझेशन आणि डीबगिंग
जाहिरात बॅनर किंवा त्रासदायक घटक थेट लागू करून लपवा प्रदर्शन: काहीही नाही इन्स्पेक्टरमार्फत.
निवडलेल्या घटकांवर आदेश कार्यान्वित करण्यासाठी किंवा पृष्ठाचा संपादन मोड चालू किंवा बंद करण्यासाठी कन्सोलमधून जावास्क्रिप्ट वापरा.
मोबाइल डिव्हाइसवर क्रोम डेव्हटूल्सच्या मर्यादा
जरी 'इन्स्पेक्ट एलिमेंट' आणि सर्व क्रोम डेव्हटूल्स डेस्कटॉप आवृत्त्यांवर नेहमी उपलब्ध असले तरी, स्मार्टफोन आणि टॅब्लेटवर डेव्हटूल्स थेट वापरता येत नाहीत . याची दोन कारणे आहेत: लहान स्क्रीनवर इंटरफेस अव्यवहार्य ठरेल आणि माऊसच्या अचूकतेवर परिणाम होतो. सुदैवाने, तुम्ही तुमच्या डेस्कटॉपवरून मोबाईलसारखा अनुभव मिळवू शकता किंवा साइट्सना रिअल-टाइममध्ये डीबग करण्यासाठी तुमच्या कॉम्प्युटरला एखादे प्रत्यक्ष डिव्हाइस जोडू शकता, जे विशेषतः मोबाईल ॲप डेव्हलपर्ससाठी मौल्यवान आहे. iOS असलेल्या मॅकवर, तुम्हाला 'सेटिंग्ज > ॲडव्हान्स्ड' मध्ये संबंधित पर्याय सक्षम करावा लागेल आणि दोन्ही डिव्हाइसवर एकच आयक्लॉड खाते वापरावे लागेल.
प्रगत वापराची उदाहरणे: डीबगिंगपासून ते स्क्रीनशॉट घेण्यापर्यंत
एसईओ विकास आणि विश्लेषणातील पारंपारिक उपयोगांव्यतिरिक्त, क्रोम डेव्हटूल्स अत्यंत व्यावहारिक प्रगत वैशिष्ट्ये प्रदान करतात:
नेटवर्क बिघाडाच्या परिस्थितीचे अनुकरण करण्यासाठी विशिष्ट फाइल्सचे (उदाहरणार्थ: main.css) लोडिंग अवरोधित करते. आणि बिघाड झाल्यास वेबसाइट कशी वागते ते तपासा.
रेंडरिंग प्रक्रिया टप्प्याटप्प्याने पाहण्यासाठी आणि त्याद्वारे विशिष्ट महत्त्वाचे घटक कसे आणि केव्हा दिसतात हे अधिक चांगल्या प्रकारे समजून घेण्यासाठी नेटवर्क पॅनेलमधील स्क्रीनशॉट फंक्शनचा वापर करा.
जागतिक शोध कार्याचा वापर करून विशिष्ट HTTP शीर्षलेख किंवा प्रतिसाद शोधा (उदा., कोणते संसाधने इष्टतम कॅशिंग धोरणे वापरतात हे शोधण्यासाठी).
बाह्य ट्रॅफिक किंवा महत्त्वपूर्ण संसाधनांचे तपशीलवार विश्लेषण करण्यासाठी विनंत्या प्रकार, डोमेन किंवा पॅटर्ननुसार फिल्टर करा.
HTML आणि CSS बदलांचे जलद प्रोटोटाइप तयार करा आणि मूळ सोर्स फाइल्समध्ये बदल न करता ते तुमच्या टीमसोबत सहजपणे शेअर करा.
क्रोम डेव्हटूल्स हे वेब डेव्हलपमेंट आणि ॲनालिटिक्सचे अष्टपैलू साधन बनले आहे, जे वैयक्तिक प्रकल्पांपासून ते मोठ्या प्लॅटफॉर्म आणि व्यावसायिक प्रकल्पांपर्यंत सर्वांसाठी तितकेच उपयुक्त ठरते. डिझाइनमधील एखाद्या तपशिलाची त्वरित तपासणी करण्यापासून ते WPO, SEO आणि ॲक्सेसिबिलिटी कार्यांसह तुमच्या वेबसाइटच्या सर्व संसाधनांचे संपूर्ण ऑडिट करण्यापर्यंत, लाइटहाऊससारख्या साधनांसोबतचे त्याचे एकत्रीकरण, केवळ गूगलसाठीच नव्हे तर तुमच्या वापरकर्त्यांसाठीही तुमची पृष्ठे ऑप्टिमाइझ करण्यासाठी याला एक अत्यावश्यक साधन बनवते.
