Chrome DevTools कशासाठी आहेत?

क्रोम देवटूल एक आहे Google Chrome मध्ये अंगभूत वेबसाइट तयार करणे आणि डीबगिंग साधनांचा सेट. अर्थात, आम्ही त्यांचा वापर देखील करू शकतो त्याच्या मुक्त स्त्रोत आवृत्तीमध्ये; क्रोमियम

विकसकांसाठी Chrome टूल्समध्ये प्रवेश करणे शक्य आहे Ctrl + Shift + I की संयोजन दाबून, घटकांवर फिरवून आणि तपासणी वर राइट-क्लिक करून.

घटक

आम्ही जेव्हा Chrome DevTools उघडतो तेव्हा आम्ही दिसते की आपण दिसेn आम्ही ब्राउझ करीत असलेल्या पृष्ठाच्या उजवीकडे पॅनेल. त्याच्या भागासाठी, हे पॅनेल ईहे प्रत्येक टूलशी संबंधित टॅबमध्ये विभागले गेले आहे. यामधून साधने विभागांमध्ये विभागली जातात.
विभाग आहेत:

• घटक: पृष्ठाचे भिन्न घटक दर्शविते.
• कन्सोल: आपल्याला विकास दरम्यान डायग्नोस्टिक्स चालविण्यास अनुमती देते किंवा आपण लिनक्स टर्मिनलप्रमाणे जावास्क्रिप्ट कोडसह संवाद साधू शकता.
• स्रोत: जावास्क्रिप्ट कोड डीबग करणे आणि स्थानिक फाइल्ससह कार्य करणे सुलभ करते.
• नेटवर्क: पृष्ठ कार्यप्रदर्शन देखरेख आणि सुधारित करण्यात मदत करते.
• टाइमलाइनः एखाद्या साइटला भेटी दरम्यान येणार्‍या भिन्न इव्हेंटच्या रेकॉर्डिंग आणि अन्वेषणांना अनुमती देते.
• अनुप्रयोगः लोड केलेल्या सर्व स्रोतांचा शोध घेतो; इतरांमधील, इंडेक्सडीडीबी किंवा वेब एसक्यूएल डेटाबेस, स्थानिक आणि सत्र संचयन, कुकीज, अ‍ॅप कॅशे, प्रतिमा, फॉन्ट आणि शैली पत्रके.
• सुरक्षितता: कोडमधील सुरक्षा समस्या शोधते.

आपण ज्यासाठी Chrome DevTools वापरू शकतो ते पाहूया

जे कार्य करत नाही त्याचे निराकरण करा

प्रत्येक विकसकास तसे झाले आहे. कोड लिहा, तेथे त्रुटी नसल्याचे तपासा आणि सत्याच्या क्षणी पृष्ठ जसे पाहिजे तसे कार्य करत नाही. कन्सोल साधन अंमलबजावणीच्या वेळी कोणती त्रुटी उद्भवली आहे ते दर्शविते.

लोडिंग वेळ कमी करा

पृष्ठ लोड होण्यास बराच वेळ लागल्यास, वापरकर्ता कंटाळला आहे आणि दुसर्‍या साइटवर जातो. सुदैवाने, फ्लॅश वेबसाइट्स आणि त्यांचे अ‍ॅनिमेटेड परिचयांचे युग संपुष्टात आले आहे. असं असलं तरी Chrome DevTools चा नेटवर्क टॅब कोणते घटक लोड करण्यास उशीर करीत आहेत हे शोधणे सुलभ करते. आम्ही वेगवेगळ्या कनेक्शन गतींसाठी चाचणी पुन्हा करू शकतो.

कोड सुधारित करा

एलिमेंट्स टॅबमध्ये आपण हे करू शकतो पृष्ठाचे घटक, संबंधित HTML कोड आणि CSS गुणधर्म पहा. आम्ही त्यांना बदलू देखील शकतो.

कमांडद्वारे पेजचा टेक्स्ट एडिट करू शकतो

document.designMode = 'on';

वेगवेगळ्या स्क्रीन आकारांचा प्रयत्न करा

टॅब्लेट, स्मार्टफोन, स्मार्ट टीव्ही, डेस्कटॉप संगणक. आम्ही ज्या उपकरणांसह इंटरनेट सर्फ करतो त्यांची यादी वाढत आहे. आम्ही करू शकतो क्रोम देवटूल सह पृष्ठ वेगवेगळ्या आकारात चांगले दिसते की नाही याची चाचणी घ्या.

बेंचमार्किंग

मॅनेजमेंटमध्ये बेंचमार्किंग या शब्दाचा अर्थ असा आहे की आपल्यासारख्याच गोष्टी करणा .्यांच्या चांगल्या पद्धतींचा अभ्यास करणे. आम्हाला आमच्या वेबसाइटच्या डिझाइनची आवड असल्यास Chrome DevTolls सह एचटीएमएल कोड आणि सीएसएस स्टाईलशीट पहा आणि त्या आमच्या साइटवर कॉपी करा.

Chrome DevTools मिळवित आहे

Google Chrome आणि क्रोमियम ब्राउझरवर Chrome DevTools उपलब्ध आहेत. क्रोमियम मुख्य वितरणाच्या भांडारांमध्ये आहे. च्या स्टोअरमधून देखील स्थापित केले जाऊ शकते स्नॅप. गूगल क्रोमसाठी म्हणून आपण हे करू शकता येथे मिळवा. डीईबी आणि आरपीएम स्वरूपनात