ब्रेकपॉइंट की मदद से अपने कोड को रोकें

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

अपने JavaScript कोड को रोकने के लिए, ब्रेकपॉइंट का इस्तेमाल करें. इस गाइड में, DevTools में उपलब्ध हर तरह के ब्रेकपॉइंट के बारे में जानकारी दी गई है. साथ ही, यह भी बताया गया है कि हर टाइप को कब इस्तेमाल करें और उसे कैसे सेट करें. डीबग करने की प्रोसेस के इंटरैक्टिव ट्यूटोरियल के लिए, Chrome DevTools में JavaScript को डीबग करना शुरू करना देखें.

हर ब्रेकपॉइंट टाइप को कब इस्तेमाल करना चाहिए, इसकी खास जानकारी

लाइन-ऑफ़-कोड, सबसे लोकप्रिय ब्रेकपॉइंट है. हालांकि, लाइन-ऑफ़-कोड ब्रेकपॉइंट सेट करने में समस्या हो सकती है. खास तौर पर, जब आपको यह पता न हो कि कहां खोजना है या बड़े कोडबेस के साथ काम किया जा रहा है, तो ऐसा हो सकता है. डीबग करते समय अपना समय बचाया जा सकता है. इसके लिए, यह जानें कि अन्य तरह के ब्रेकपॉइंट का इस्तेमाल कैसे और कब करना है.

ब्रेकपॉइंट टाइपइसका इस्तेमाल तब करें, जब आप ...
लाइन-ऑफ़-कोडकोड के सटीक क्षेत्र पर रोकें.
शर्त के साथ कोड की लाइनकोड के सटीक क्षेत्र पर रुकें, लेकिन तभी रोकें, जब कोई अन्य शर्त सही हो.
लॉगपॉइंटएक्ज़ीक्यूशन को रोके बिना, मैसेज को कंसोल में लॉग करें.
डीओएमकिसी खास डीओएम नोड या उसके चाइल्ड को बदलने या हटाने वाले कोड पर रुकें.
एक्सएचआरXHR यूआरएल में स्ट्रिंग पैटर्न होने पर रोकें.
इवेंट लिसनरclick जैसे किसी इवेंट के बाद चलने वाले कोड पर रोक लगाएं.
अपवादउस कोड की लाइन पर रुकें जिसमें कोई छूटा हुआ या पकड़ में न आया अपवाद हो सकता है.
फ़ंक्शनकिसी खास फ़ंक्शन को कॉल करने पर रोकें.
भरोसेमंद टाइपभरोसेमंद किस तरह का है के उल्लंघन पर रोकें.

लाइन-ऑफ़-कोड ब्रेकपॉइंट

अगर आपको कोड का सटीक क्षेत्र पता है, तो लाइन-ऑफ़-कोड ब्रेकपॉइंट का इस्तेमाल करें. कोड की इस लाइन को चलाने से पहले, DevTools हमेशा रुक जाता है.

DevTools में लाइन-ऑफ़-कोड ब्रेकपॉइंट सेट करने के लिए:

  1. सोर्स टैब पर क्लिक करें.
  2. कोड की लाइन वाली वह फ़ाइल खोलें जिसे आपको ब्रेक करना है.
  3. कोड लाइन पर जाएं.
  4. कोड की लाइन की बाईं ओर, 'लाइन नंबर' कॉलम होता है. उस पर क्लिक करें. लाइन नंबर वाले कॉलम के ऊपर नीला आइकॉन दिखता है.

लाइन-ऑफ़-कोड ब्रेकपॉइंट.

इस उदाहरण में, लाइन 29 पर सेट किया गया लाइन-ऑफ़-कोड ब्रेकपॉइंट दिखाया गया है.

आपके कोड में मौजूद लाइन-ऑफ़-कोड ब्रेकपॉइंट

उस लाइन पर रुकने के लिए, अपने कोड से debugger को कॉल करें. यह लाइन-ऑफ़-कोड ब्रेकपॉइंट के बराबर है. हालांकि, इसमें ब्रेकपॉइंट आपके कोड में सेट होता है, DevTools यूज़र इंटरफ़ेस (यूआई) में नहीं.

console.log('a');
console.log('b');
debugger;
console.log('c');

शर्त के साथ कोड की लाइन के तौर पर ब्रेकपॉइंट

अगर आपको एक्ज़ीक्यूटेबल रोकना है, तो कंडिशनल लाइन-ऑफ़-कोड ब्रेकपॉइंट का इस्तेमाल करें. हालांकि, ऐसा तब ही करें, जब कोई शर्त पूरी हो.

ऐसे ब्रेकपॉइंट तब काम आते हैं, जब आपको ऐसे ब्रेक को स्किप करना हो जो आपके केस के लिए काम का नहीं हैं, खास तौर पर लूप में.

शर्त के साथ कोड की लाइन का ब्रेकपॉइंट सेट करने के लिए:

  1. सोर्स टैब खोलें.
  2. कोड की लाइन वाली वह फ़ाइल खोलें जिसे आपको ब्रेक करना है.
  3. कोड लाइन पर जाएं.
  4. कोड की लाइन की बाईं ओर, 'लाइन नंबर' कॉलम होता है. उस पर राइट क्लिक करें.
  5. शर्त के साथ ब्रेकपॉइंट जोड़ें चुनें. कोड की लाइन के नीचे एक डायलॉग दिखेगा.
  6. डायलॉग में अपनी शर्त डालें.
  7. ब्रेकपॉइंट चालू करने के लिए, Enter दबाएं. लाइन नंबर वाले कॉलम के सबसे ऊपर, सवाल के निशान वाला नारंगी आइकॉन दिखता है.

शर्त के साथ कोड की लाइन का ब्रेकपॉइंट.

इस उदाहरण में, शर्त के साथ दिया गया कोड की लाइन का ब्रेकपॉइंट दिखाया गया है. यह ब्रेकपॉइंट सिर्फ़ तब ट्रिगर होता है, जब लूप में i=6 के दौरान, x 10 से ज़्यादा हो जाता है.

लाइन-ऑफ़-कोड ब्रेकपॉइंट लॉग करें

मैसेज को कंसोल में लॉग करने के लिए, लॉग लाइन-ऑफ़-कोड ब्रेकपॉइंट (लॉगपॉइंट) का इस्तेमाल करें. ऐसा करने के लिए, एक्ज़ीक्यूशन को रोका नहीं जाता और अपने कोड को console.log() कॉल की मदद से व्यवस्थित नहीं किया जाता.

लॉगपॉइंट सेट करने के लिए:

  1. सोर्स टैब खोलें.
  2. कोड की लाइन वाली वह फ़ाइल खोलें जिसे आपको ब्रेक करना है.
  3. कोड लाइन पर जाएं.
  4. कोड की लाइन की बाईं ओर, 'लाइन नंबर' कॉलम होता है. उस पर राइट क्लिक करें.
  5. लॉगपॉइंट जोड़ें चुनें. कोड की लाइन के नीचे एक डायलॉग दिखेगा.

  6. डायलॉग में अपना लॉग मैसेज डालें. आप console.log(message) कॉल के लिए इस्तेमाल किए जाने वाले सिंटैक्स का इस्तेमाल कर सकते हैं.

    उदाहरण के लिए, आपके पास ये लॉग करने का विकल्प होता है:

    "A string " + num, str.length > 1, str.toUpperCase(), obj

    इस स्थिति में, लॉग किया गया मैसेज यह होगा:

    // str = "test"
// num = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}

  7. ब्रेकपॉइंट चालू करने के लिए, Enter दबाएं. लाइन नंबर वाले कॉलम के सबसे ऊपर, दो बिंदुओं वाला गुलाबी आइकॉन दिखता है.

ऐसा लॉगपॉइंट, जो कंसोल में स्ट्रिंग और वैरिएबल की वैल्यू को लॉग करता है.

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

लाइन-ऑफ़-कोड ब्रेकपॉइंट में बदलाव करें

लाइन-ऑफ़-कोड ब्रेकपॉइंट बंद करने, उसमें बदलाव करने या हटाने के लिए, ब्रेकपॉइंट पैनल का इस्तेमाल करें.

ब्रेकपॉइंट के ग्रुप में बदलाव करना

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

  • किसी ग्रुप को छोटा या बड़ा करने के लिए, उसके नाम पर क्लिक करें.
  • किसी ग्रुप या ब्रेकपॉइंट को अलग-अलग चालू या बंद करने के लिए, ग्रुप या ब्रेकपॉइंट के बगल में मौजूद चेकबॉक्स. पर क्लिक करें.
  • किसी ग्रुप को हटाने के लिए, उस पर कर्सर घुमाएं और बंद करें. पर क्लिक करें.

इस वीडियो में, ग्रुप को छोटा करने और एक-एक करके या ग्रुप के हिसाब से ब्रेकपॉइंट चालू या बंद करने का तरीका बताया गया है. ब्रेकपॉइंट बंद करने पर, सोर्स पैनल, लाइन नंबर के बगल में मौजूद अपने मार्कर को पारदर्शी बना देता है.

ग्रुप में संदर्भ मेन्यू होते हैं. ब्रेकपॉइंट पैनल में, किसी ग्रुप पर राइट क्लिक करें और इनमें से कोई विकल्प चुनें:

किसी ग्रुप का संदर्भ मेन्यू.

  • फ़ाइल (ग्रुप) से सभी ब्रेकपॉइंट हटाएं.
  • फ़ाइल में सभी ब्रेकपॉइंट बंद करें.
  • फ़ाइल में सभी ब्रेकपॉइंट चालू करें.
  • सभी ब्रेकपॉइंट हटाएं (सभी फ़ाइलों से).
  • अन्य ब्रेकपॉइंट हटाएं (अन्य ग्रुप में).

ब्रेकपॉइंट में बदलाव करें

ब्रेकपॉइंट में बदलाव करने के लिए:

  • ब्रेकपॉइंट को चालू या बंद करने के लिए, उसके आगे मौजूद चेकबॉक्स. पर क्लिक करें. ब्रेकपॉइंट बंद करने पर, सोर्स पैनल, लाइन नंबर के बगल में मौजूद अपने मार्कर को पारदर्शी बना देता है.
  • ब्रेकपॉइंट पर कर्सर घुमाएं. इसके बाद, उसमें बदलाव करने के लिए बदलाव करें पर टैप करें. पर और उसे हटाने के लिए बंद करें. पर क्लिक करें.

  • ब्रेकपॉइंट में बदलाव करते समय, इनलाइन एडिटर की ड्रॉप-डाउन सूची में उसका टाइप बदलें.

    ब्रेकपॉइंट का टाइप बदलना.

  • किसी ब्रेकपॉइंट पर राइट क्लिक करके, उसका संदर्भ मेन्यू देखें और कोई एक विकल्प चुनें:

    ब्रेकपॉइंट का संदर्भ मेन्यू.

    • जगह की जानकारी दिखाएं.
    • स्थिति या लॉगपॉइंट में बदलाव करें.
    • सभी ब्रेकपॉइंट चालू करें.
    • सभी ब्रेकपॉइंट बंद करें.
    • ब्रेकपॉइंट हटाएं.
    • अन्य ब्रेकपॉइंट हटाएं (सभी फ़ाइलों से).
    • सभी ब्रेकपॉइंट हटाएं (सभी फ़ाइलों से).

अलग-अलग ब्रेकपॉइंट में किए गए बदलावों को देखने के लिए, वीडियो देखें: बंद करें, हटाएं, स्थिति में बदलाव करें, मेन्यू से जगह की जानकारी ज़ाहिर करें, और टाइप बदलें.

डीओएम बदलाव के लिए ब्रेकपॉइंट

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

डीओएम बदलाव के लिए ब्रेकपॉइंट सेट करने के लिए:

  1. एलिमेंट टैब पर क्लिक करें.
  2. उस एलिमेंट पर जाएं जिस पर ब्रेकपॉइंट सेट करना है.
  3. एलिमेंट पर राइट क्लिक करें.
  4. ब्रेक ऑन पर कर्सर घुमाएं. इसके बाद, सबट्री में बदलाव, एट्रिब्यूट में बदलाव या नोड हटाना चुनें.

डीओएम बदलाव के लिए ब्रेकपॉइंट बनाने के लिए, संदर्भ मेन्यू.

इस उदाहरण में, डीओएम बदलाव के लिए ब्रेकपॉइंट बनाने के लिए, संदर्भ मेन्यू दिखाया गया है.

डीओएम बदलाव के लिए ब्रेकपॉइंट की सूची यहां देखी जा सकती है:

  • एलिमेंट > DOM ब्रेकपॉइंट पैनल.
  • सोर्स > DOM ब्रेकपॉइंट साइड पैनल.

एलिमेंट और सोर्स पैनल में डीओएम ब्रेकपॉइंट की सूचियां.

वहां, ये काम किए जा सकते हैं:

  • इन्हें चेकबॉक्स. से चालू या बंद करें.
  • डीओएम में, उन पर राइट क्लिक करें > हटाएं या दिखाएं.

डीओएम बदलाव के लिए ब्रेकपॉइंट के टाइप

  • सबट्री में बदलाव. तब ट्रिगर होता है, जब चुने गए नोड के किसी चाइल्ड को हटाया या जोड़ा जाता है या चाइल्ड का कॉन्टेंट बदला जाता है. चाइल्ड नोड विशेषता परिवर्तन या वर्तमान में चुने गए नोड में किसी भी परिवर्तन पर ट्रिगर नहीं होता है.
  • एट्रिब्यूट में बदलाव: तब ट्रिगर होता है, जब मौजूदा समय में चुने गए नोड में कोई एट्रिब्यूट जोड़ा या हटाया जाता है या जब किसी एट्रिब्यूट की वैल्यू में बदलाव होता है.
  • नोड हटाना: चुने गए मौजूदा नोड को हटाने पर ट्रिगर होता है.

XHR/ब्रेकपॉइंट फ़ेच करें

जब किसी XHR के अनुरोध यूआरएल में कोई खास स्ट्रिंग शामिल हो और आपको उस स्थिति को तोड़ना हो, तो XHR/फ़ेच ब्रेकपॉइंट का इस्तेमाल करें. DevTools कोड की उस लाइन पर रुक जाता है जहां XHR को कॉल किया जाता है. send().

यह उपयोगी है, तो इसका एक उदाहरण यह है कि जब आपको पता चलता है कि आपका पेज गलत यूआरएल का अनुरोध कर रहा है और आपको तेज़ी से उस AJAX या फे़च सोर्स कोड को ढूंढना है जिसकी वजह से गलत अनुरोध हो रहा है.

XHR/फ़ेच ब्रेकपॉइंट सेट करने के लिए:

  1. सोर्स टैब पर क्लिक करें.
  2. XHR ब्रेकपॉइंट पैनल को बड़ा करें.
  3. जोड़ें ब्रेकपॉइंट जोड़ें पर क्लिक करें.
  4. वह स्ट्रिंग डालें जिसे ब्रेक करना है. जब यह स्ट्रिंग XHR के अनुरोध वाले यूआरएल में कहीं भी मौजूद होती है, तो DevTools रुक जाता है.
  5. पुष्टि करने के लिए, Enter दबाएं.

XHR/फ़ेच ब्रेकपॉइंट बनाना.

इस उदाहरण में, ऐसे किसी भी अनुरोध के लिए XHR/फ़ेच ब्रेकपॉइंट में XHR/फ़ेच ब्रेकपॉइंट बनाने का तरीका बताया गया है जिसके यूआरएल में org शामिल है.

इवेंट लिसनर ब्रेकपॉइंट

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

  1. सोर्स टैब पर क्लिक करें.
  2. इवेंट लिसनर के ब्रेकपॉइंट पैनल को बड़ा करें. DevTools, इवेंट की कैटगरी की सूची दिखाता है, जैसे कि ऐनिमेशन.
  3. इनमें से किसी एक कैटगरी को चुनकर उस कैटगरी का कोई भी इवेंट ट्रिगर होने पर उसे रोकें या कैटगरी को बड़ा करके किसी खास इवेंट की जांच करें.

इवेंट लिसनर ब्रेकपॉइंट बनाया जा रहा है.

इस उदाहरण में, deviceorientation के लिए इवेंट लिसनर ब्रेकपॉइंट बनाने का तरीका बताया गया है.

इसके अलावा, डीबगर वेब वर्कर या किसी भी तरह के वर्कलेट में होने वाले इवेंट पर रुक जाता है. इनमें शेयर किए गए स्टोरेज वर्कलेट भी शामिल हैं.

डीबगर को सर्विस वर्कर के इवेंट पर रोका गया.

इस उदाहरण में दिखाया गया है कि डीबगर को सर्विस वर्कर में हुए setTimer इवेंट पर रोका गया है.

एलिमेंट > इवेंट लिसनर पैनल में भी, इवेंट लिसनर की सूची देखी जा सकती है.

अपवाद के लिए ब्रेकपॉइंट

अपवाद वाले ब्रेकपॉइंट का इस्तेमाल तब करें, जब आपको उस कोड की लाइन पर रुकना हो जिसकी वजह से कोई अपवाद मिलता है या जिसकी पहचान नहीं की जा सकी है. Node.js के अलावा किसी भी डीबग सेशन में, इन दोनों अपवादों को अलग-अलग रोका जा सकता है.

सोर्स टैब के ब्रेकपॉइंट पैनल में, इनमें से किसी एक या दोनों विकल्पों को चालू करें. इसके बाद, कोड का इस्तेमाल करें:

  • चेकबॉक्स. ऐसे अपवादों पर रोकें को चुनें जिनकी पहचान नहीं हुई है.

    संबंधित चेकबॉक्स चालू होने पर, पता नहीं लगाए गए अपवाद पर रोक.

    इस उदाहरण में, निष्पादन को ऐसे अपवाद पर रोक दिया गया है जिसकी पहचान नहीं हो पाई है.

  • चेकबॉक्स. पकड़े गए अपवादों पर रोकें को चुनें.

    मिलते-जुलते चेकबॉक्स के चालू होने पर, रोके गए अपवाद पर रोक.

    इस उदाहरण में, एक्ज़ीक्यूशन की प्रोसेस को अपवाद के तौर पर रोक दिया गया है.

एसिंक्रोनस कॉल में अपवाद

कैप्चर किए गए और नहीं पढ़े गए चेकबॉक्स के चालू होने या न होने पर, डीबगर सिंक्रोनस और एसिंक्रोनस, दोनों कॉल में संबंधित अपवादों को रोकने की कोशिश करता है. एसिंक्रोनस मामले में, डीबगर यह तय करने के लिए कि कब बंद होना है, प्रॉमिस में अस्वीकार किए गए हैंडलर ढूंढता है.

कैच किए गए अपवाद और अनदेखा किए गए कोड

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

अगले उदाहरण में दिखाया गया है कि डीबगर को, अनदेखा किए गए library.js से रोके गए एक अपवाद पर रोक दिया गया है, जो अनदेखा नहीं किए गए mycode.js से गुज़रता है.

कॉल स्टैक में ऐसे फ़्रेम से होकर रोका जाता है जिसे अनदेखा नहीं किया गया.

एज केस में डीबगर के व्यवहार के बारे में ज़्यादा जानने के लिए, इस डेमो पेज पर स्थितियों के कलेक्शन की जांच करें.

फ़ंक्शन ब्रेकपॉइंट

जब आप किसी खास फ़ंक्शन को कॉल करने पर रोकना चाहें, तब debug(functionName) को वहां कॉल करें, जहां functionName वह फ़ंक्शन है जिसे आपको डीबग करना है. अपने कोड में debug() डाला जा सकता है (जैसे, console.log() स्टेटमेंट) या DevTools कंसोल से इसे कॉल करना. debug(), फ़ंक्शन की पहली लाइन पर लाइन ऑफ़ कोड ब्रेकपॉइंट सेट करने के बराबर है.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

पक्का करना कि टारगेट फ़ंक्शन स्कोप में है

अगर जिस फ़ंक्शन को डीबग करना है वह दायरे में नहीं है, तो DevTools ReferenceError दिखाता है.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

अगर आप DevTools कंसोल से debug() को कॉल कर रहे हैं, तो यह पक्का करना मुश्किल हो सकता है कि टारगेट फ़ंक्शन दायरे में है. यहां एक रणनीति दी गई है:

  1. जहां फ़ंक्शन दायरे में हो वहां लाइन-ऑफ़-कोड ब्रेकपॉइंट सेट करें.
  2. ब्रेकपॉइंट ट्रिगर करें.
  3. DevTools कंसोल में debug() को तब कॉल करें, जब कोड को आपके लाइन-ऑफ़-कोड ब्रेकपॉइंट पर रोका गया हो.

भरोसेमंद टाइप के ब्रेकपॉइंट

भरोसेमंद टाइप एपीआई, सुरक्षा से जुड़े जोखिम से बचाता है. इन्हें क्रॉस-साइट स्क्रिप्टिंग (XSS) हमले कहा जाता है.

सोर्स टैब के ब्रेकपॉइंट पैनल में, सीएसपी उल्लंघन ब्रेकपॉइंट सेक्शन पर जाएं और इनमें से किसी एक या दोनों विकल्पों को चालू करें. इसके बाद, कोड का इस्तेमाल करें:

  • चेकबॉक्स. उल्लंघनों को सिंक करें को चुनें.

    संबंधित चेकबॉक्स के चालू होने पर, सिंक के उल्लंघन पर रोक दिया जाता है.

    इस उदाहरण में, सिंक के उल्लंघन की वजह से प्रोसेस को रोक दिया गया है.

  • चेकबॉक्स. नीति के उल्लंघन देखें.

    नीति का उल्लंघन होने पर, इससे जुड़े चेकबॉक्स के चालू होने पर इसे रोक दिया जाता है.

    इस उदाहरण में, कार्रवाई को नीति के उल्लंघन की वजह से रोक दिया गया है. भरोसेमंद टाइप की नीतियां trustedTypes.createPolicy का इस्तेमाल करके सेट अप की जाती हैं.

एपीआई का इस्तेमाल करने के बारे में ज़्यादा जानकारी पाने के लिए, यह तरीका अपनाएं: