Chrome DevTools खोलें

Chrome DevTools को खोलने के कई तरीके हैं. इस पूरी जानकारी में से अपना पसंदीदा तरीका चुनें.

Chrome के यूज़र इंटरफ़ेस (यूआई) या कीबोर्ड का इस्तेमाल करके, DevTools को ऐक्सेस किया जा सकता है:

इसके अलावा, हर नए टैब के लिए DevTools अपने-आप खोलने का तरीका जानें.

Chrome मेन्यू से DevTools खोलें

अगर आपको यूज़र इंटरफ़ेस (यूआई) पसंद है, तो Chrome के ड्रॉप-डाउन मेन्यू से DevTools को ऐक्सेस किया जा सकता है.

डीओएम या सीएसएस की जांच करने के लिए एलिमेंट पैनल खोलें

जांच करने के लिए, पेज पर मौजूद किसी एलिमेंट पर राइट क्लिक करें और जांच करें चुनें.

Chrome के ड्रॉप-डाउन मेन्यू में 'जांच करें' विकल्प दिखता है.

DevTools एलिमेंट पैनल खोलता है और डीओएम ट्री में एलिमेंट चुनता है. स्टाइल पैनल में, चुने गए एलिमेंट पर लागू किए गए सीएसएस नियम देखे जा सकते हैं.

एलिमेंट पैनल में चुना गया एलिमेंट.

Chrome के मुख्य मेन्यू से इस्तेमाल किया गया आखिरी पैनल खोलें

आखिरी DevTools पैनल खोलने के लिए, पता बार की दाईं ओर मौजूद तीन बिंदु वाला मेन्यू. बटन पर क्लिक करें. इसके बाद, ज़्यादा टूल > डेवलपर टूल चुनें.

तीन बिंदु वाले मेन्यू से चुना गया डेवलपर टूल विकल्प.

इसके अलावा, आखिरी पैनल खोलने के लिए शॉर्टकट का इस्तेमाल किया जा सकता है. ज़्यादा जानने के लिए, अगला सेक्शन देखें.

शॉर्टकट का इस्तेमाल करके पैनल खोलना: एलिमेंट, कंसोल या आखिरी पैनल

अगर आपको कीबोर्ड पसंद है, तो अपने ऑपरेटिंग सिस्टम के आधार पर, Chrome में कोई शॉर्टकट दबाएं:

ओएस एलिमेंट कंसोल आपका आखिरी पैनल
Windows या Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

यहां शॉर्टकट को याद रखने का आसान तरीका दिया गया है:

  • C का मतलब है सीएसएस.
  • JavaScript के लिए J दबाएं.
  • मैं आपकी पसंद को तय करता है.

C शॉर्टकट, निरीक्षण करें. इंस्पेक्टर मोड में एलिमेंट पैनल खोलता है. किसी पेज पर एलिमेंट पर कर्सर घुमाने पर, इस मोड में आपको मददगार टूलटिप दिखती हैं. किसी भी एलिमेंट पर क्लिक करके, उसके सीएसएस को एलिमेंट > स्टाइल पैनल में देखा जा सकता है.

टूलटिप के साथ इंस्पेक्टर मोड में एलिमेंट पैनल.

DevTools शॉर्टकट की पूरी सूची देखने के लिए, कीबोर्ड शॉर्टकट देखें.

हर नए टैब पर DevTools अपने-आप खोलें

कमांड लाइन से Chrome चलाएं और --auto-open-devtools-for-tabs फ़्लैग को पास करें:

  1. चल रहे किसी भी Chrome इंस्टेंस से बाहर निकलें.

  2. अपना पसंदीदा टर्मिनल या कमांड लाइन ऐप्लिकेशन चलाएं.

  3. अपने ऑपरेटिंग सिस्टम के आधार पर, नीचे दिए गए निर्देश को चलाएं:

  • MacOS पर:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • Windows:

    start chrome --auto-open-devtools-for-tabs
    
  • Linux:

    google-chrome --auto-open-devtools-for-tabs
    

DevTools तब तक हर नए टैब के लिए अपने-आप खुलेगा, जब तक Chrome को बंद नहीं किया जाता.

आगे क्या करना है?

DevTools नेविगेशन के लिए कुछ काम के शॉर्टकट और सेटिंग के बारे में जानने के लिए, नीचे दिया गया वीडियो देखें.

बेहतर तरीके से सीखने के लिए, DevTools को पसंद के मुताबिक बनाने का तरीका देखें.