Chrome DevTools खोलें

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

अगर आपको कीबोर्ड का इस्तेमाल करना है, तो अपने ऑपरेटिंग सिस्टम के हिसाब से 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 शॉर्टकट, ink_selection इंस्पेक्टर मोड में Elements पैनल खोलता है. इस मोड में, पेज पर मौजूद एलिमेंट पर कर्सर घुमाने पर आपको काम की टूलटिप दिखती हैं. Elements > Styles टैब में जाकर, किसी भी एलिमेंट की सीएसएस देखी जा सकती है. इसके लिए, उस एलिमेंट पर क्लिक करें.

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

DevTools खुला होने पर, कैश मेमोरी के साथ या उसके बिना पेज को फिर से लोड करना

DevTools खुला होने पर, पेज को तीन तरीकों से फिर से लोड किया जा सकता है. Chrome विंडो के मुख्य ऐक्शन बार में, रीफ़्रेश करें फिर से लोड करें बटन को दबाकर रखें. इसके बाद, इनमें से कोई एक विकल्प चुनें:

• सामान्य रीलोड. यह कुकी, कैश मेमोरी का इस्तेमाल करती है, ताकि पेज को फिर से लोड करने में कम समय लगे.

  शॉर्टकट: Cmd+R (macOS) या Ctrl+R (Windows/Linux).

  ध्यान दें: Network पैनल में कैश मेमोरी की सुविधा बंद करें check_box को चुनने पर, सामान्य रीलोड के लिए कैश मेमोरी का इस्तेमाल नहीं किया जाता.

• फिर से लोड करना मुश्किल. यह कैश मेमोरी को बायपास करता है, लेकिन उसे खाली नहीं करता.

  शॉर्टकट: Cmd+Shift+R (macOS) या Ctrl+Shift+R (Windows/Linux).

• कैश मेमोरी खाली करें और हार्ड रिलोड करें. यह कुकी, रिलोड करने से पहले सभी साइटों के लिए कैश मेमोरी को खाली करती है.

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

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

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

   अहम जानकारी: यह फ़्लैग, सिर्फ़ Chrome के उस पहले इंस्टेंस के लिए काम करता है जिसे आपने खोला है. अगर यह तरीका काम नहीं करता है, तो Windows पर Task Manager में जाकर, 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 अपने-आप खुलता रहेगा.

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

सफलता: बधाई हो! आपने Chrome DevTools की सुविधाओं को अनलॉक कर लिया है.

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

ज़्यादा व्यावहारिक अनुभव पाने के लिए, DevTools को पसंद के मुताबिक बनाने का तरीका देखें.