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 को रोक दिया है. Step over दबाने पर, DevTools उस फ़ंक्शन में मौजूद सभी कोड को पूरा करता है जिस पर आपने Step over किया है. यह फ़ंक्शन 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 को रोक दिया गया है. Step out दबाने पर, DevTools getName() में बाकी कोड को एक्ज़ीक्यूट करता है. इस उदाहरण में, यह सिर्फ़ B है. इसके बाद, यह C पर रुक जाता है.

किसी लाइन तक का पूरा कोड चलाना

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

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

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

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

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

स्क्रिप्ट को जबरन लागू करना

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

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

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

ऊपर दिए गए स्क्रीनशॉट में, थ्रेड पैनल को नीले रंग से दिखाया गया है.

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

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

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

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, असाइनिक कोड के दोनों हिस्सों को एक साथ जोड़कर, असाइनिक ऑपरेशन को ट्रैक कर सकता है.

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

स्टैक ट्रेस कॉपी करना

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

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

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

फ़ाइल ट्री पर नेविगेट करना

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

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

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

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

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

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

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

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

ऐसी सभी स्क्रिप्ट को छिपाने के लिए, सोर्स > पेज > > 'इग्नोर करें' सूची में शामिल सोर्स छिपाएं को चुनें.

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

डीबग करते समय किसी स्क्रिप्ट को स्किप करने के लिए, उसे अनदेखा करें. अनदेखा किए जाने पर, किसी स्क्रिप्ट को कॉल स्टैक पैनल में छिपा दिया जाता है. साथ ही, कोड में आगे बढ़ने पर, स्क्रिप्ट के फ़ंक्शन कभी नहीं दिखते.

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

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