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 को रोक दिया गया है. बाहर निकलें दबाने पर, 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 बंद करना लेख पढ़ें.