Chrome DevTools खोलें

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

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

• Chrome के ड्रॉप-डाउन मेन्यू से.
• ऐसे खास शॉर्टकट की मदद से जो Elements, Elements या इस्तेमाल किए गए आखिरी पैनल को खोलते हैं.

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

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

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

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

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

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

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.
• I आपकी पसंद तय करता है.

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

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
  

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

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

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

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