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

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 को रुक जाता है.

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

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

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

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 अगर कोई हो, तो अगले ब्रेकपॉइंट तक स्क्रिप्ट को लागू करता है.

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

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

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

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

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

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

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

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

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 ये फ़ाइलें, आपके बिल्ड टूल से मिले सोर्स मैप के आधार पर जनरेट करता है.
• डिप्लॉय किया गया. वे फ़ाइलें जिन्हें ब्राउज़र पढ़ता है. आम तौर पर, ये फ़ाइलें छोटी की जाती हैं.

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

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

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

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

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

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

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

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