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 को रोक दिया गया है. Step into दबाने पर, DevTools इस कोड लाइन को चलाता है. इसके बाद, B पर रुक जाता है.

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

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

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

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 बंद करना लेख पढ़ें.