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

थीम , DevTools यूज़र इंटरफ़ेस (यूआई) के लिए कलर थीम सेट करती है.

थीम:

• सिस्टम की प्राथमिकता
• हल्के रंग वाली थीम
• गहरे रंग वाली थीम

पैनल लेआउट पैनल को पैनल में व्यवस्थित करता है.

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

पैनल का लेआउट:

• हॉरिज़ॉन्टल
• वर्टिकल
• अपने-आप

भाषा , DevTools यूज़र इंटरफ़ेस (यूआई) के लिए स्थान-भाषा सेट करती है.

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

भाषा:

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

पैनल स्विच करने के लिए, Ctrl/Cmd + 0-9 शॉर्टकट चालू करें. इससे, कीबोर्ड का इस्तेमाल करके पैनल खोले जा सकते हैं.

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

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

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

पहचान छिपाकर कॉन्टेंट और कॉन्टेंट स्क्रिप्ट में खोजें की मदद से, लोड की गई सभी JavaScript फ़ाइलें खोजी जा सकती हैं. इनमें, Chrome एक्सटेंशन में मौजूद फ़ाइलें भी शामिल हैं. इसके लिए, खोजें टैब का इस्तेमाल करें.

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

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

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

JavaScript सोर्स मैप चालू करें सुविधा की मदद से, DevTools जनरेट की गई या छोटी की गई JavaScript फ़ाइलों के सोर्स ढूंढ सकता है.

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

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

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

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

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

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

अपने-आप पूरा होने की सुविधा, एडिटर में आसान सुझाव देती है.

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

अपने-आप बंद होने वाला ब्रैकेट खोलने पर, क्लोज़िंग ब्रैकेट या टैग अपने-आप जुड़ जाता है.

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

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

कोड फ़ोल्डिंग की मदद से, एडिटर में जाकर, कर्ली ब्रैकेट में कोड ब्लॉक को फ़ोल्ड और अनफ़ोल्ड किया जा सकता है.

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

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

खाली सफ़ेद जगह वाले वर्ण दिखाएं , एडिटर में खाली सफ़ेद जगह वाले वर्ण दिखाता है.

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

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

खाली सफ़ेद जगह वाले वर्ण दिखाएं:

• कोई नहीं
• सभी (...)
• ट्रेलिंग

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

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

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

अपने-आप कम से कम प्रिंट होने वाले छोटे-छोटे सोर्स की मदद से, उन सोर्स को आसानी से पढ़ा जा सकता है.

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

सीएसएस सोर्स मैप चालू करें सुविधा की मदद से, DevTools जनरेट की गई सीएसएस फ़ाइलों के सोर्स (जैसे, .scss) को ढूंढता है और उन्हें आपको दिखाता है.

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

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

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

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

डिफ़ॉल्ट इंडेंट की मदद से, यह तय किया जा सकता है कि एडिटर में टैब बटन का इस्तेमाल किया जाए या नहीं.

डिफ़ॉल्ट इंडेंट:

• दो स्पेस
• चार स्पेस
• आठ स्पेस
• टैब वर्ण

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

उपयोगकर्ता एजेंट का शैडो डीओएम दिखाएं, डीओएम ट्री में शैडो डीओएम नोड दिखाता है.

शब्द रैप, डीओएम ट्री में लंबी लाइनों को तोड़ता है और उन्हें अगली लाइन में रैप करता है.

एचटीएमएल टिप्पणियां दिखाएं, डीओएम ट्री में एचटीएमएल टिप्पणियां दिखाता है.

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

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

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

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

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

ज़्यादा जानें लिंक की मदद से, प्रॉपर्टी पर एमडीएन सीएसएस का रेफ़रंस लिया जा सकता है.

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

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

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

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

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

कैश मेमोरी को बंद करना (जब DevTools खुला हो), नेटवर्क पैनल में कैश मेमोरी बंद करें की तरह ही है. इससे ब्राउज़र की कैश मेमोरी बंद हो जाती है.

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

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

इस साइट पर विज्ञापन ब्लॉक करने के लिए ज़रूरी शर्तें, DevTools खुले होने पर पेज पर जिन विज्ञापनों की पहचान की गई है उन्हें ब्लॉक करता है.

फ़्लेमचर्ट माउस व्हील ऐक्शन फ़्लेम चार्ट पर नेविगेट करने के लिए, आपके माउस व्हील पर स्क्रोल या ज़ूम करने की कार्रवाई असाइन करता है.

फ़्लेम चार्ट माउस व्हील ऐक्शन:

• स्क्रोल करें
• ज़ूम करना

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

नेटवर्क मैसेज छिपाएं, कंसोल में नेटवर्क मैसेज छिपा देता है.

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

सिर्फ़ चुना गया संदर्भ, कंसोल सिर्फ़ चुने गए कॉन्टेक्स्ट के लिए मैसेज दिखाता है: सबसे ऊपर, iframe, वर्कर या एक्सटेंशन.

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

लॉग XMLHttpRequests, कंसोल लॉग XHR को बनाता है और अनुरोध फ़ेच करता है.

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

टाइमस्टैंप दिखाएं से, कंसोल मैसेज के बगल में टाइमस्टैंप दिखाता है.

इतिहास से अपने-आप पूरा होने की सुविधा से कंसोल उन निर्देशों के सुझाव देता है जिन्हें आपने पहले टाइप करते समय चलाया था.

आपको कंसोल > सेटिंग में जाकर यही विकल्प मिल सकता है.

Enter पर, अपने-आप पूरा होने वाले सुझाव को स्वीकार करने पर, Enter दबाने पर, कंसोल आपके चुने गए सुझाव को स्वीकार कर लेता है. यह सुझाव, अपने-आप पूरा होने वाले ड्रॉप-डाउन से लिया जाता है.

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

कंसोल में मिलते-जुलते मैसेज का ग्रुप बनाने पर, कंसोल एक जैसे मैसेज का ग्रुप बना देता है.

आपको कंसोल > सेटिंग में जाकर यही विकल्प मिल सकता है.

कंसोल में सीओआरएस से जुड़ी गड़बड़ियां दिखाएं. इससे कंसोल, लॉग की गई सीओआरएस गड़बड़ियां दिखाता है.

आपको कंसोल > सेटिंग में जाकर यही विकल्प मिल सकता है.

गहरी से जांच इससे कंसोल में आउटपुट की झलक दिखती है, जो कोई कमांड टाइप करता है.

आपको कंसोल > सेटिंग में जाकर यही विकल्प मिल सकता है.

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

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

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

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

console.trace() मैसेज अपने-आप बड़ा होने की सुविधा, कंसोल को लॉग करते समय, बड़े किए गए console.trace() मैसेज दिखाता है.

नेविगेशन पर लॉग सेव करें, कंसोल को हर नेविगेशन पर Navigated to मैसेज लॉग करता है. साथ ही, सभी पेजों के लॉग सेव करता है.

आपको कंसोल > सेटिंग में जाकर यही विकल्प मिल सकता है.

लिंक हैंडलिंग , सोर्स फ़ाइल के लिंक पर क्लिक करने पर फ़ाइलों को खोलने का विकल्प सेट करता है. उदाहरण के लिए, एलिमेंट > स्टाइल पैनल में.

लिंक मैनेज करना:

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

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

ज़्यादा जानकारी के लिए, स्थानीय बदलाव देखें.

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

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

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

एक साथ काम नहीं करने वाली स्टैक ट्रेस बंद करें से कॉल स्टैक में एक साथ काम नहीं करने वाली कार्रवाई की "पूरी कहानी" छिप जाती है.

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

ज़्यादा जानकारी के लिए, एक साथ काम नहीं करने वाली स्टैक ट्रेस देखें पर जाएं.

पॉप-अप के लिए DevTools को अपने-आप खोलें विकल्प तब दिखाता है, जब नए टैब खोलने वाले लिंक पर क्लिक किया जाता है. इसका मतलब है कि target=_blank से जुड़े सभी लिंक.

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

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

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

सेटिंग सिंक करने की सुविधा चालू करें की मदद से, कई डिवाइसों पर DevTools सेटिंग सिंक की जा सकती हैं.

इस सेटिंग का इस्तेमाल करने के लिए, पहले Chrome सिंक को चालू करें. ज़्यादा जानकारी के लिए, सिंक करने की सेटिंग देखें.