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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

थीम

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

थीम: DevTools थीम को सिस्टम की प्राथमिकता से गहरे रंग वाली थीम में बदला जा रहा है.
  • सिस्टम की प्राथमिकता
  • हल्का
  • गहरा

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

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

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

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

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

स्रोत

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट

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

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

नेटवर्क

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

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

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

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

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

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

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

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

परफ़ॉर्मेंस

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

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

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

कंसोल

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

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

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

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

इस वीडियो में, सेटिंग पर टैप करें. सेटिंग और कंसोल > सेटिंग, दोनों में इस विकल्प को चालू करने का तरीका बताया गया है. साथ ही, 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 आपको पहले नतीजे पर ले जाता है.

सिंक करें

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