प्राथमिकताएँ

Sofia Emelianova
Sofia Emelianova

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

प्राथमिकताएं सेट करने के लिए, सेटिंग. सेटिंग > प्राथमिकताएं खोलें. इसके बाद, स्क्रोल करके यहां बताए गए किसी सेक्शन पर जाएं.

'प्राथमिकताएं' टैब में मौजूद 'दिखने का तरीका' सेक्शन.

यह जानने के लिए कि हर सेटिंग क्या करती है, इस पेज पर सेटिंग का नाम खोजें और सेटिंग के ब्यौरे को बड़ा करें.

इस रेफ़रंस में, अलग-अलग सेटिंग के लिए ये आइकॉन इस्तेमाल किए गए हैं:

  • चेकबॉक्स. चेकबॉक्स
  • ड्रॉप-डाउन सूचियां ड्रॉप-डाउन.
  • समर्थन नहीं होना या रुकना. अब काम नहीं करता

डिफ़ॉल्ट सेटिंग को पहले जैसा करने के लिए, सेटिंग टैब के आखिर तक स्क्रोल करें और डिफ़ॉल्ट सेटिंग वापस लाएं और फिर से लोड करें पर क्लिक करें.

थीम

इस सेक्शन में, DevTools के दिखने के तरीके को पसंद के मुताबिक बनाने के विकल्प मौजूद होते हैं.

एलिमेंट > स्टाइल और मिलते-जुलते टैब के साथ-साथ, सोर्स > डीबगर पैनल पर असर पड़ता है. अपने-आप विकल्प से, लेआउट DevTools की चौड़ाई पर निर्भर करता है.

पैनल का लेआउट: एलिमेंट के पैनल लेआउट को हॉरिज़ॉन्टल से वर्टिकल में बदलना.
  • हॉरिज़ॉन्टल
  • वर्टिकल
  • अपने-आप

इस सेटिंग को लागू करने के लिए, DevTools को फिर से लोड करें.

भाषा: सेटिंग पैनल को चाइनीज़ में दिखाया गया है.
  • ब्राउज़र यूज़र इंटरफ़ेस (यूआई) की भाषा
  • स्थानीय भाषा के विकल्पों में से एक, इस उदाहरण में चाइनीज़

इस वीडियो में, कीबोर्ड शॉर्टकट का इस्तेमाल करके, टैब के बीच स्विच करने का तरीका बताया गया है.

स्रोत

इस सेक्शन में ऐसे विकल्पों की सूची दी गई है जिनसे सोर्स पैनल को पसंद के मुताबिक बनाया जा सकता है.

इस वीडियो में दिखाया गया है कि इस विकल्प के चालू होने पर, टैब के बीच स्विच करने पर सोर्स पैनल, नेविगेशन ट्री में फ़ाइलों को कैसे चुनता है.

सोर्स पैनल, स्टेटस बार में छोटी की गई फ़ाइल का लिंक दिखाता है.

इसके लिए, DevTools को फिर से लोड करना होगा.

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

इसके लिए, DevTools को फिर से लोड करना होगा.

इस वीडियो में सबसे पहले, आठ स्पेस का डिफ़ॉल्ट इंडेंटेशन दिखाया गया है. इस विकल्प को चालू करने पर, यह सोर्स फ़ाइल के डिफ़ॉल्ट इंडेंटेशन को बदल देता है.

इस वीडियो में, पहले कोई सुझाव नहीं दिखता. इसके बाद, इस विकल्प को चालू करने पर, एडिटर कमांड पूरा करने के लिए सुझाव दिखाता है.

इस वीडियो में, ब्रैकेट अपने-आप बंद होने की सुविधा चालू करने से पहले और बाद में, ब्रैकेट खोलने की सुविधा को टाइप करते हुए दिखाया गया है.

इसके लिए, DevTools को फिर से लोड करना होगा.

इस वीडियो में, इस विकल्प को चालू करने पर कोड ब्लॉक को फ़ोल्ड करने का तरीका बताया गया है.

इसके लिए, DevTools को फिर से लोड करना होगा. विकल्पों से ये काम किए जा सकते हैं:

  • सभी, खाली जगह वाले सभी वर्णों को बिंदु (...) के तौर पर दिखाता है. इसके अलावा, एडिटर, Tab वर्ण को लाइन () के तौर पर दिखाता है.
  • ट्रेलिंग, लाइनों के आखिर में मौजूद खाली जगह को हलके लाल रंग में हाइलाइट करता है.
खाली सफ़ेद जगह दिखाएं: चुने गए विकल्प: सभी और ट्रेलिंग.
  • कोई नहीं
  • सभी (...)
  • ट्रेलिंग

इस वीडियो में, ब्रेकपॉइंट पर वीडियो को रोकने पर, सोर्स पैनल को फ़ोकस से बाहर दिखाया गया है. इस विकल्प को चालू करने पर, DevTools सोर्स पैनल में एडिटर खोलता है और आपको ब्रेकपॉइंट वाली कोड लाइन दिखाता है.

प्रीटी प्रिंट होने पर, एडिटर एक लंबी कोड लाइन को कई लाइनों में दिखा सकता है. इसके पहले - होता है, ताकि यह पता चल सके कि यह लाइन जारी है.

सोर्स पैनल में प्रिटी प्रिंट किया गया कोड.
सोर्स पैनल, नेविगेशन ट्री के 'लेखक' सेक्शन में .scss फ़ाइलें दिखाता है. एलिमेंट पैनल में मौजूद स्टाइल पैनल, सीएसएस नियमों के बगल में .scss सोर्स के लिंक दिखाता है.

इस वीडियो में बताया गया है कि इस विकल्प को चालू करने के बाद, फ़ाइल के आखिर तक स्क्रोल कैसे करें.

अगर इसे बंद रखा जाता है, तो DevTools कंसोल में इस तरह के मैसेज लॉग करता है:

Console में एक मैसेज, जिसमें बताया गया है कि सुरक्षा से जुड़ी वजहों से, किसी रिमोट फ़ाइल पाथ से लोड करने की अनुमति नहीं है.
डिफ़ॉल्ट इंडेंटेशन: बदलाव करने के विकल्पों को बंद करना और डिफ़ॉल्ट इंडेंटेशन को दो स्पेस से आठ स्पेस पर बदलना. इसके बाद, इंडेंटेशन को Tab बटन पर सेट करना.
  • दो स्पेस
  • चार स्पेस
  • आठ स्पेस
  • Tab वर्ण

इस उदाहरण में, डिफ़ॉल्ट इंडेंटेशन को पहले आठ स्पेस और फिर Tab वर्ण पर सेट करने का तरीका बताया गया है.

एलिमेंट

इस सेक्शन में, एलिमेंट पैनल को पसंद के मुताबिक बनाने के विकल्प दिए गए हैं.

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

नेटवर्क

इस सेक्शन में, नेटवर्क पैनल को पसंद के मुताबिक बनाने के विकल्प दिए गए हैं. ज़्यादातर विकल्प, पैनल की सेटिंग में मौजूद विकल्पों जैसे ही होते हैं.

लॉग सुरक्षित रखें के बराबर है. पेज लोड होने पर अनुरोधों को सेव करता है.

इस वीडियो में, पेज रीफ़्रेश होने पर अनुरोधों का लॉग रीफ़्रेश होने के बाद, इस विकल्प को चालू करने पर लॉग का बने रहना दिखाया गया है.

नेटवर्क लॉग रिकॉर्ड करें के बराबर है. नेटवर्क लॉग में अनुरोध रिकॉर्ड करने की सुविधा को चालू या बंद करता है.

नेटवर्क पैनल में, 'नेटवर्क लॉग रिकॉर्ड करें' बटन.

इस वीडियो में सबसे पहले यह दिखाया गया है कि अनुरोध ब्लॉक नहीं किए गए हैं. इसके बाद, इस विकल्प को चालू करने पर, नेटवर्क के अनुरोध को ब्लॉक करने वाले ड्रॉअर में मौजूद पैटर्न उन्हें ब्लॉक कर देता है.

फ़्रेम के हिसाब से ग्रुप करें के बराबर है. यह विकल्प, इनलाइन फ़्रेम से शुरू किए गए अनुरोधों को ग्रुप करता है.

इनलाइन फ़्रेम के हिसाब से ग्रुप किए गए अनुरोधों वाला नेटवर्क अनुरोध लॉग.

परफ़ॉर्मेंस

इस सेक्शन में, परफ़ॉर्मेंस पैनल को पसंद के मुताबिक बनाने के विकल्प दिए गए हैं.

फ़्लेम चार्ट में माउस व्हील का इस्तेमाल करके की जाने वाली कार्रवाइयां: फ़्लेम चार्ट के लिए, माउस व्हील की कार्रवाई को स्क्रोल से ज़ूम में बदलना.
  • स्क्रोल करें
  • ज़ूम करें

इस उदाहरण में, परफ़ॉर्मेंस पैनल में फ़्लेम चार्ट पर, माउस व्हील से स्क्रोल करने और ज़ूम करने की दोनों कार्रवाइयां दिखाई गई हैं.

कंसोल

इस सेक्शन में, Console को पसंद के मुताबिक बनाने के विकल्प मौजूद हैं. ज़्यादातर विकल्प, कंसोल की सेटिंग में मौजूद विकल्पों जैसे ही होते हैं.

कंसोल और सेटिंग में मिलते-जुलते विकल्प.

इस वीडियो में, सेटिंग. सेटिंग और कंसोल सेटिंग, दोनों में इस विकल्प की मदद से नेटवर्क मैसेज छिपाने का तरीका बताया गया है.

इस वीडियो में, सेटिंग. सेटिंग और कंसोल > सेटिंग, दोनों में इस विकल्प को चालू करने का तरीका बताया गया है. साथ ही, कंसोल में संदर्भ चुनने का तरीका भी बताया गया है.

इस वीडियो में, सेटिंग. सेटिंग और कंसोल > सेटिंग, दोनों में इस विकल्प को चालू करने का तरीका बताया गया है. साथ ही, XHR finished loading मैसेज को कंसोल में लॉग करने का तरीका भी बताया गया है.

यह विकल्प आपको कंसोल > सेटिंग में भी दिखेगा.

इस वीडियो में, आउटपुट की अलग-अलग झलक दिखाई गई हैं.

दूसरे शब्दों में, यह इवैलुएशन के बाद navigator.userActivation.isActive को true पर सेट करता है. यह विकल्प आपको कंसोल > सेटिंग में भी दिखेगा.

इस वीडियो में, इस विकल्प को चालू करने से पहले और बाद में, navigator.userActivation.isActive के आकलन का नतीजा दिखाया गया है.

Extension

इस सेक्शन में, Chrome DevTools एक्सटेंशन के लिए लिंक मैनेज करने के तरीके को पसंद के मुताबिक बनाने के विकल्प दिए गए हैं.

लिंक हैंडलिंग: लिंक खोलने के लिए कोई विकल्प चुनना.
  • अपने-आप. यह डिफ़ॉल्ट रूप से, सोर्स पैनल में फ़ाइलें खोलता है.
  • कोई भी विकल्प, जिसे DevTools एक्सटेंशन से जोड़ा जा सकता है.

परसिस्टेंस

इस सेक्शन में ऐसे विकल्पों की सूची होती है जिनसे यह कंट्रोल किया जाता है कि DevTools आपके किए गए बदलावों को कैसे सेव करता है.

डीबगर

इस सेक्शन में ऐसे विकल्पों की सूची दी गई है जिनसे डीबगर के काम करने का तरीका कंट्रोल किया जाता है.

JavaScript बंद होने पर आपका वेब पेज कैसा दिखता है और कैसे काम करता है.

पेज को फिर से लोड करके देखें कि पेज लोड होने के दौरान, JavaScript पर निर्भर है या नहीं और अगर है, तो कैसे.

JavaScript बंद होने पर, Chrome पता बार में JavaScript बंद है. आइकॉन दिखाता है. साथ ही, DevTools सोर्स के बगल में चेतावनी वाला चेतावनी. आइकॉन दिखाता है.

पता बार में एक आइकॉन और DevTools में सोर्स के बगल में चेतावनी वाला आइकॉन.

डिफ़ॉल्ट रूप से, डीबगर, असाइन किए गए ऑपरेशन को ट्रैक करने की कोशिश करता है. हालांकि, ऐसा तब ही होता है, जब इस्तेमाल किया जा रहा फ़्रेमवर्क इस तरह की ट्रैकिंग की सुविधा देता हो.

कॉल स्टैक में एक साथ काम करने वाली प्रोसेस.

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

ग्लोबल

इस सेक्शन में ऐसे विकल्पों की सूची दी गई है जिनका असर DevTools में दुनिया भर में होता है.

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

टाइप करते समय खोजें सुविधा की मदद से, DevTools को खोज क्वेरी टाइप करते ही, खोज के पहले नतीजे पर "जंप" किया जा सकता है. अगर यह सुविधा बंद है, तो DevTools आपको नतीजे पर सिर्फ़ तब ले जाता है, जब Enter दबाया जाता है.

इस वीडियो में सबसे पहले यह दिखाया गया है कि खोज क्वेरी टाइप करने पर, DevTools कैसे "जंप" करता है. इस विकल्प को चालू करने के बाद, Enter दबाने पर, DevTools आपको पहले नतीजे पर ले जाता है.

सिंक करें

इस सेक्शन में, डिवाइसों के बीच सेटिंग सिंक करने की सुविधा सेट अप की जा सकती है.