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

कोड की पंक्ति से बाहर निकलना

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

'बाहर निकलें' चुनें.

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

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 पैनल में सूची में दिए गए कॉन्टेक्स्ट पर क्लिक करें. इससे, उस कॉन्टेक्स्ट पर स्विच किया जा सकेगा. नीले तीर के निशान से पता चलता है कि फ़िलहाल कौनसा संदर्भ चुना गया है.

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() फ़्रेम को रीस्टार्ट करें. Bar() फ़्रेम को रीस्टार्ट करना.
  4. F9 दबाकर वैल्यू बढ़ाने की जानकारी वाले स्टेटमेंट में आगे बढ़ें. मौजूदा वैल्यू बढ़ाई जा रही है. ध्यान दें कि मौजूदा वैल्यू बढ़ जाती है: value = 2.
  5. इसके अलावा, स्कोप पैनल में, वैल्यू में बदलाव करने के लिए उस पर दो बार क्लिक करें और अपनी पसंद की वैल्यू सेट करें. स्कोप पैनल में वैल्यू में बदलाव करना.
  6. bar() फ़्रेम को रीस्टार्ट करें और कई बार बढ़ोतरी स्टेटमेंट देखने की कोशिश करें. वैल्यू लगातार बढ़ रही है. Bar() फ़्रेम को फिर से रीस्टार्ट करना.

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

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

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

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) का इस्तेमाल करके वेब ऐप्लिकेशन डेवलप करते समय, सोर्स को नेविगेट करना मुश्किल हो सकता है. ऐसा बिल्ड टूल (उदाहरण के लिए, वेबपैक या वाइट) से जनरेट की गई छोटी फ़ाइलों की वजह से होता है.

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

  • कोड का आइकॉन. लिखा गया. यह उन सोर्स फ़ाइलों जैसा होता है जिन्हें आप अपने IDE में देखते हैं. 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 बंद करना देखें.