JavaScript डीबग करने का रेफ़रंस

Kayce Basques

Sofia Emelianova

Chrome DevTools डीबग करने की इस पूरी जानकारी की मदद से, डीबग करने के नए वर्कफ़्लो खोजें सुविधाएँ.

डीबग करने की बुनियादी बातें जानने के लिए, Chrome DevTools में JavaScript को डीबग करने का तरीका देखें.

ब्रेकपॉइंट की मदद से कोड रोकें

कोड को एक्ज़ीक्यूट करने के दौरान उसे रोकने के लिए, ब्रेकपॉइंट सेट करें. ब्रेकपॉइंट सेट करने का तरीका जानने के लिए, ब्रेकपॉइंट की मदद से अपना कोड रोकें लेख पढ़ें.

रोके जाने पर वैल्यू देखें

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

आकलन किए गए वैरिएबल, कॉन्सटेंट, और ऑब्जेक्ट की क्वेरी करने के लिए, कंसोल का इस्तेमाल किया जा सकता है.

कर्सर घुमाने पर क्लास/फ़ंक्शन प्रॉपर्टी की झलक देखना

जब एक्ज़ीक्यूशन रुक जाए, तब किसी क्लास या फ़ंक्शन के नाम पर कर्सर घुमाकर उसकी प्रॉपर्टी की झलक देखें.

स्टेप थ्रू कोड

जब आपका कोड रुक जाए, तो उस पर एक-एक करके एक्सप्रेशन का इस्तेमाल करें. साथ ही, कंट्रोल फ़्लो और प्रॉपर्टी की वैल्यू की जांच करें.

स्टेप ऑफ़ कोड ऑफ़ कोड

जब कोड की किसी ऐसी लाइन पर रोका गया हो जिसमें एक ऐसा फ़ंक्शन है जो आपकी समस्या के लिए काम का नहीं है डीबग करने के लिए, स्टेप ओवर पर क्लिक करें फ़ंक्शन को एक्ज़ीक्यूट करने के लिए उस पर गौर नहीं किया होगा.

उदाहरण के लिए, मान लें कि नीचे दिए गए कोड को डीबग किया जा रहा है:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

आपको A पर रोक दिया गया है. स्टेप ओवर दबाकर, DevTools ऐसे फ़ंक्शन में मौजूद सभी कोड लागू करता है आप आगे बढ़ रहे हैं, जो B और C हैं. इसके बाद, DevTools D पर रुक जाएगा.

कोड की लाइन इस्तेमाल करें

जब आपकी समस्या से जुड़े फ़ंक्शन कॉल वाले कोड की लाइन पर रोका गया हो डीबग करने के लिए, इसमें इस्तेमाल करें पर क्लिक करें उस फ़ंक्शन की जांच करने के लिए आगे.

उदाहरण के लिए, मान लें कि नीचे दिए गए कोड को डीबग किया जा रहा है:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

आपको A पर रोक दिया गया है. इसमें जाएं बटन दबाकर, DevTools कोड की इस लाइन को एक्ज़ीक्यूट करता है. इसके बाद, यह रुक जाता है B.

कोड की पंक्ति से बाहर जाएं

जब किसी ऐसे फ़ंक्शन के अंदर रोका गया हो जो उस समस्या से संबंधित नहीं है जिसे आप डीबग कर रहे हैं, तो चरण out को लागू करने के बाकी चरण फ़ंक्शन का कोड.

उदाहरण के लिए, मान लें कि नीचे दिए गए कोड को डीबग किया जा रहा है:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

आपको A पर रोक दिया गया है. बाहर निकलें बटन को दबाकर, DevTools बाकी के कोड को एक्ज़ीक्यूट करता है getName(), जो इस उदाहरण में सिर्फ़ B है. यह C से रुक जाएगा.

सभी कोड एक खास लाइन तक चलाएं

लंबे फ़ंक्शन को डीबग करते समय, कई कोड ऐसे हो सकते हैं जो आपकी समस्या से मेल न खाते हों डीबग करना.

आप इन सभी पंक्तियों को पार कर सकते हैं, लेकिन यह काफ़ी उबाऊ हो सकता है. आप एक लाइन-ऑफ़-कोड सेट कर सकते हैं अपनी पसंद की लाइन पर ब्रेकपॉइंट डालें. इसके बाद, स्क्रिप्ट एक्ज़ीक्यूशन फिर से शुरू करें को दबाएं , लेकिन एक ज़्यादा तेज़ तरीका है.

जिस कोड लाइन में आपकी दिलचस्पी है उस पर राइट क्लिक करें. इसके बाद, यहां जारी रखें को चुनें. DevTools सभी कोड को उस पॉइंट तक चलाता है और फिर उस लाइन पर रुक जाता है.

स्क्रिप्ट एक्ज़ीक्यूशन फिर से शुरू करें

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

स्क्रिप्ट एक्ज़िक्यूशन ज़बरदस्ती चालू करें

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

थ्रेड का कॉन्टेक्स्ट बदलें

वेब वर्कर या सर्विस वर्कर के साथ काम करते समय, Thread पैनल में दिए गए कॉन्टेक्स्ट पर क्लिक करें उस कॉन्टेक्स्ट पर स्विच करें. नीला ऐरो आइकॉन यह दिखाता है कि फ़िलहाल कौनसा कॉन्टेक्स्ट चुना गया है.

ऊपर दिए गए स्क्रीनशॉट में मौजूद थ्रेड पैनल को नीले रंग से आउटलाइन किया गया है.

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

कॉमा लगाकर अलग किए गए एक्सप्रेशन पर जाएं

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

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

छोटा किए जाने पर, इसमें कॉमा लगाकर अलग किया गया foo(),foo(),42 एक्सप्रेशन होता है:

function foo(){}function bar(){return foo(),foo(),42}bar();

डीबगर इसी तरह के एक्सप्रेशन से गुज़रता है.

इसलिए, स्टेपिंग का तरीका एक जैसा है:

• छोटा किया गया और लिखे गए कोड के बीच.
• छोटे किए गए कोड को ओरिजनल कोड के हिसाब से डीबग करने के लिए, सोर्स मैप का इस्तेमाल करते समय. दूसरे शब्दों में, जब आपको सेमीकॉलन दिखते हैं, तो उन्हें पढ़ा जा सकता है. भले ही, जिस सोर्स को डीबग किया जा रहा है वह कम से कम हो.

स्थानीय, बंद, और ग्लोबल प्रॉपर्टी देखें और उनमें बदलाव करें

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

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

ऊपर दिए गए स्क्रीनशॉट में मौजूद स्कोप पैनल को नीले रंग से आउटलाइन किया गया है.

मौजूदा कॉल स्टैक देखें

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

किसी एंट्री पर क्लिक करके, सीधे उस कोड की लाइन पर जाएं जहां उस फ़ंक्शन को कॉल किया गया था. नीले रंग के ऐरो का आइकॉन इससे पता चलता है कि DevTools फ़िलहाल कौनसा फ़ंक्शन हाइलाइट कर रहा है.

ऊपर दिए गए स्क्रीनशॉट में कॉल स्टैक पैनल को नीले रंग से आउटलाइन किया गया है.

कॉल स्टैक में किसी फ़ंक्शन (फ़्रेम) को रीस्टार्ट करना

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

फ़्रेम को रीस्टार्ट करने के लिए:

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

2. कॉल स्टैक पैनल में, किसी फ़ंक्शन पर राइट क्लिक करें और ड्रॉप-डाउन मेन्यू से फ़्रेम रीस्टार्ट करें को चुनें.

   

फ़्रेम रीस्टार्ट करें के काम करने का तरीका समझने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() फ़ंक्शन, 0 को तर्क के तौर पर लेता है और उसे लॉग करता है. साथ ही, bar() फ़ंक्शन को कॉल करता है. इसके बदले में, bar() फ़ंक्शन आर्ग्युमेंट को बढ़ाता है.

दोनों फ़ंक्शन के फ़्रेम को रीस्टार्ट करने के लिए, नीचे दिए गए तरीके अपनाएं:

1. ऊपर दिए गए कोड को नए स्निपेट में कॉपी करें और उसे चलाएं. एक्ज़ीक्यूशन debugger लाइन-ऑफ़-कोड ब्रेकपॉइंट पर रुक जाता है.
2. ध्यान दें कि डीबगर आपको फ़ंक्शन एलान के बगल में मौजूदा वैल्यू दिखाता है: value = 1.
3. bar() फ़्रेम रीस्टार्ट करें.
4. F9 दबाकर, वैल्यू बढ़ाने की जानकारी देने वाले स्टेटमेंट पर जाएं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है ध्यान दें कि मौजूदा वैल्यू बढ़ जाती है: value = 2.
5. इसके अलावा, स्कोप पैनल में जाकर, वैल्यू में बदलाव करने के लिए उस पर दो बार क्लिक करें और अपनी पसंद की वैल्यू सेट करें.

6. bar() फ़्रेम को रीस्टार्ट करने और बढ़ते हुए क्रम में लगाने के स्टेटमेंट को कई बार पढ़ने की कोशिश करें. वैल्यू लगातार बढ़ रही है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

1. अब कॉल स्टैक में foo() फ़्रेम को रीस्टार्ट करें. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है ध्यान दें कि वैल्यू फिर से 0 है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

JavaScript में, आर्ग्युमेंट में किए गए बदलाव, फ़ंक्शन के बाहर नहीं दिखते. नेस्ट किए गए फ़ंक्शन को वैल्यू मिलती हैं, न कि मेमोरी में उनकी जगह की जानकारी. 1. इस ट्यूटोरियल को पूरा करने के लिए, स्क्रिप्ट एक्ज़ीक्यूशन (F8) को फिर से शुरू करें.

अनदेखा करने की सूची में शामिल फ़्रेम दिखाएं

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

तीसरे पक्ष के फ़्रेम के साथ-साथ पूरे कॉल स्टैक को देखने के लिए, कॉल स्टैक सेक्शन में, उन फ़्रेम को अनदेखा करें जिन्हें अनदेखा किया गया है को चालू करें.

इसे इस डेमो पेज पर आज़माएं:

1. स्रोत पैनल में, src खोलें > app app.component.ts फ़ाइल.
2. increment() फ़ंक्शन पर ब्रेकपॉइंट सेट करें.
3. कॉल स्टैक सेक्शन में, अनदेखे किए जाने वाले फ़्रेम दिखाएं चेकबॉक्स पर सही का निशान लगाएं या हटाएं. साथ ही, कॉल स्टैक में फ़्रेम की पूरी या काम की सूची देखें.

एक साथ काम नहीं करने वाले फ़्रेम देखें

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

इस मामले में, कॉल स्टैक में एसिंक कॉल फ़्रेम के साथ-साथ पूरा कॉल इतिहास दिखता है.

स्टैक ट्रेस कॉपी करें

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

आउटपुट का एक उदाहरण यहां दिया गया है:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

फ़ाइल ट्री पर जाना

फ़ाइल ट्री पर जाने के लिए, पेज पैनल का इस्तेमाल करें.

ग्रुप ने फ़ाइल ट्री में फ़ाइलों को लिखा और डिप्लॉय किया है

React या Angular फ़्रेमवर्क का इस्तेमाल करके वेब ऐप्लिकेशन डेवलप करते समय, बिल्ड टूल (जैसे कि webpack या Vite) से जनरेट की गई छोटी-छोटी फ़ाइलों की वजह से सोर्स को नेविगेट करना मुश्किल हो सकता है.

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

• लिखा गया. यह आईडीई में देखी जाने वाली सोर्स फ़ाइलों की तरह होती है. DevTools ये फ़ाइलें, आपके बिल्ड टूल से मिले सोर्स मैप के आधार पर जनरेट करता है.
• डिप्लॉय किया गया. वे फ़ाइलें जिन्हें ब्राउज़र पढ़ता है. आम तौर पर, ये फ़ाइलें छोटी की जाती हैं.

ग्रुप बनाने के लिए, को चालू करें > 'लिखे हुए/डिप्लॉय किए गए' के हिसाब से फ़ाइलों का ग्रुप बनाएं फ़ाइल ट्री के सबसे ऊपर मौजूद तीन बिंदु वाले मेन्यू में जाएं.

फ़ाइल ट्री से, अनदेखा करने की सूची में शामिल सोर्स छिपाएं

सिर्फ़ अपने बनाए कोड पर फ़ोकस करने में मदद पाने के लिए, Sources > पेज पैनल, सेटिंग > में जोड़ी गई सभी स्क्रिप्ट या डायरेक्ट्री को धूसर कर देता है डिफ़ॉल्ट रूप से, सूची को अनदेखा करें.

ऐसी स्क्रिप्ट को पूरी तरह से छिपाने के लिए, स्रोत चुनें > पेज > > उन सोर्स को छिपाएं जिन्हें नज़रअंदाज़ किया गया है .

स्क्रिप्ट या स्क्रिप्ट के पैटर्न को अनदेखा करें

डीबग करते समय किसी स्क्रिप्ट को छोड़ने के लिए, उसे अनदेखा कर दें. अनदेखा करने पर, स्क्रिप्ट कॉल स्टैक पैनल में छिपी रहती है और स्क्रिप्ट के काम करने के चरण में आपको इसका इस्तेमाल नहीं करना पड़ता अपने कोड के माध्यम से.

उदाहरण के लिए, मान लें कि आप इस कोड का इस्तेमाल कर रहे हैं:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A तीसरे पक्ष की ऐसी लाइब्रेरी है जिस पर आपको भरोसा है. अगर आपको भरोसा है कि समस्या को डीबग किया जा रहा है तीसरे पक्ष की लाइब्रेरी से जुड़ी हुई नहीं है, तो स्क्रिप्ट को अनदेखा करना सही रहेगा.

फ़ाइल ट्री से किसी स्क्रिप्ट या डायरेक्ट्री को अनदेखा करें

किसी एक स्क्रिप्ट या पूरी डायरेक्ट्री को अनदेखा करने के लिए:

1. स्रोत में > पेज, किसी डायरेक्ट्री या स्क्रिप्ट फ़ाइल पर राइट-क्लिक करें.
2. डायरेक्ट्री/स्क्रिप्ट को नज़रअंदाज़ किए जाने वाले कोड की सूची में जोड़ें को चुनें.

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

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

एडिटर पैनल से स्क्रिप्ट को अनदेखा करना

एडिटर पैनल से किसी स्क्रिप्ट को अनदेखा करने के लिए:

1. फ़ाइल खोलें.
2. कहीं भी राइट-क्लिक करें.
3. सूची को अनदेखा करने के लिए स्क्रिप्ट जोड़ें चुनें.

आप सेटिंग > में जाकर, नज़रअंदाज़ किए गए नामों की सूची से स्क्रिप्ट को हटा सकते हैं सूची को अनदेखा करें.

कॉल स्टैक पैनल से किसी स्क्रिप्ट को अनदेखा करें

कॉल स्टैक पैनल से किसी स्क्रिप्ट को अनदेखा करने के लिए:

1. स्क्रिप्ट से किसी फ़ंक्शन पर राइट क्लिक करें.
2. सूची को अनदेखा करने के लिए स्क्रिप्ट जोड़ें चुनें.

आप सेटिंग > में जाकर, नज़रअंदाज़ किए गए नामों की सूची से स्क्रिप्ट को हटा सकते हैं सूची को अनदेखा करें.

सेटिंग में जाकर स्क्रिप्ट को अनदेखा करें

सेटिंग > देखें सूची को अनदेखा करें.

किसी भी पेज से डीबग कोड के स्निपेट चलाएं

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

ज़्यादा जानने के लिए, किसी भी पेज से कोड के स्निपेट चलाएं देखें.

कस्टम JavaScript एक्सप्रेशन की वैल्यू देखें

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

• एक्सप्रेशन जोड़ें पर क्लिक करें ताकि आप नया वॉच एक्सप्रेशन बना सकें.
• रीफ़्रेश करने के लिए, रीफ़्रेश करें पर क्लिक करें सभी मौजूदा एक्सप्रेशन की वैल्यू सबमिट करें. कोड का इस्तेमाल करते समय वैल्यू अपने-आप रीफ़्रेश हो जाती हैं.
• किसी एक्सप्रेशन पर कर्सर घुमाएं और एक्सप्रेशन मिटाएं पर क्लिक करें उसे मिटाने के लिए.

स्क्रिप्ट की जांच करें और उनमें बदलाव करें

पेज पैनल में कोई स्क्रिप्ट खोलने पर, DevTools आपको एडिटर पैनल में उसका कॉन्टेंट दिखाता है. एडिटर पैनल में, अपना कोड ब्राउज़ करके उसमें बदलाव किया जा सकता है.

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

छोटी की गई फ़ाइल को पढ़ने लायक बनाना

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

छोटी फ़ाइल को लोड होने के तौर पर देखने के लिए, एडिटर के सबसे नीचे बाएं कोने में मौजूद { } पर क्लिक करें.

फ़ोल्ड कोड ब्लॉक

किसी कोड ब्लॉक को फ़ोल्ड करने के लिए, बाएं कॉलम में लाइन नंबर पर कर्सर घुमाएं और छोटा करें पर क्लिक करें.

कोड ब्लॉक को खोलने के लिए, उसके बगल में मौजूद {...} पर क्लिक करें.

इस व्यवहार को कॉन्फ़िगर करने के लिए, सेटिंग > देखें प्राथमिकताएं > सोर्स.

स्क्रिप्ट में बदलाव करना

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

स्क्रिप्ट में बदलाव करने के लिए:

1. सोर्स पैनल के एडिटर पैनल में फ़ाइल खोलें.
2. एडिटर पैनल में बदलाव करें.

3. Command+S (Mac) या Ctrl+S (Windows, Linux) दबाएं सेव करें. DevTools पूरी JS फ़ाइल को Chrome के JavaScript इंजन में पैच करता है.

   

   ऊपर दिए गए स्क्रीनशॉट में मौजूद एडिटर पैनल को नीले रंग में आउटलाइन किया गया है.

रोके गए फ़ंक्शन में लाइव बदलाव करें

जब एक्ज़ीक्यूशन रुक जाए, तब नीचे दी गई सीमाओं के साथ मौजूदा फ़ंक्शन में बदलाव किया जा सकता है. साथ ही, बदलावों को लाइव लागू किया जा सकता है:

• कॉल स्टैक में, सिर्फ़ सबसे ऊपर मौजूद फ़ंक्शन में बदलाव किया जा सकता है.
• स्टैक के नीचे एक ही फ़ंक्शन के लिए बार-बार होने वाला कोई कॉल नहीं होना चाहिए.

फ़ंक्शन को लाइव एडिट करने के लिए:

1. ब्रेकपॉइंट का इस्तेमाल करके एक्ज़ीक्यूशन को रोकें.
2. रोके गए फ़ंक्शन में बदलाव करें.
3. बदलाव लागू करने के लिए, Command / Control + S दबाएं. डीबगर, अपने-आप फ़ंक्शन को रीस्टार्ट करता है.
4. एक्ज़ीक्यूशन जारी रखें.

इस वर्कफ़्लो के बारे में जानने के लिए, नीचे दिया गया वीडियो देखें.

इस उदाहरण में, शुरू में addend1 और addend2 वैरिएबल का string टाइप गलत है. इसलिए, संख्याएं जोड़ने के बजाय स्ट्रिंग जोड़ी जाती हैं. इसे ठीक करने के लिए, लाइव एडिटिंग के दौरान parseInt() फ़ंक्शन जोड़े जाते हैं.

स्क्रिप्ट में टेक्स्ट खोजें और बदलें

स्क्रिप्ट में टेक्स्ट खोजने के लिए:

1. सोर्स पैनल के एडिटर पैनल में फ़ाइल खोलें.
2. पहले से मौजूद खोज बार खोलने के लिए, Command+F (Mac) या Ctrl+F (Windows, Linux) दबाएं.
3. बार में, अपनी क्वेरी डालें. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसके अलावा, आपके पास ये विकल्प भी हैं:
   • अपनी क्वेरी को केस-सेंसिटिव बनाने के लिए, केस मिला लें पर क्लिक करें.
   • रेगुलर एक्सप्रेशन का इस्तेमाल करके खोज करने के लिए, रेगुलर एक्सप्रेशन का इस्तेमाल करें पर क्लिक करें.
4. Enter दबाएँ. खोज के पिछले या अगले नतीजे पर जाने के लिए, 'अप' या 'डाउन' बटन दबाएं.

आपको जो टेक्स्ट मिला है उसे बदलने के लिए:

1. खोज बार में, बदलें बटन पर क्लिक करें.
2. वह टेक्स्ट टाइप करें जिसे बदलना है. इसके बाद, बदलें या सभी को बदलें पर क्लिक करें.

JavaScript बंद करें

Chrome DevTools की मदद से JavaScript बंद करना लेख पढ़ें.