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

Kayce Basques

Sofia Emelianova

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

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

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

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

अगर आपको पता है कि कोड का कौनसा हिस्सा सही है, तो कोड की लाइन के ब्रेकपॉइंट का इस्तेमाल करें. कोड की इस लाइन के चालू होने से पहले, DevTools हमेशा रुकता है.

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

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

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

आपके कोड में, कोड की लाइन के ब्रेकपॉइंट

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

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

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

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

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

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

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

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

कोड की लाइन के ब्रेकपॉइंट को लॉग करना

कोड की लाइन के ब्रेकपॉइंट (लॉगपॉइंट) का इस्तेमाल करके, कंसोल में मैसेज लॉग करें. ऐसा करने से, कोड को console.log() कॉल से भरा नहीं जाएगा और न ही प्रोग्राम के चलने में रुकावट आएगी.

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

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

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

   उदाहरण के लिए, ये लॉग किए जा सकते हैं:

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

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

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

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

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

कोड की लाइन के ब्रेकपॉइंट में बदलाव करें

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

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

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

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

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

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

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

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

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

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

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

  

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

  

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

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

'यहां कभी न रोकें' सुविधा की मदद से ब्रेकपॉइंट को स्किप करना

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

ब्रेक की जगह को म्यूट करने के लिए:

1. सोर्स पैनल में, सोर्स फ़ाइल खोलें और वह लाइन ढूंढें जिस पर आपको ब्रेक नहीं लगाना है.
2. बाईं ओर उस स्टेटमेंट के बगल में मौजूद लाइन नंबर कॉलम में लाइन नंबर पर राइट क्लिक करें जिसकी वजह से ब्रेक लग रहा है.
3. ड्रॉप-डाउन मेन्यू से, यहां कभी रोकें चुनें. लाइन के बगल में, नारंगी (कंडिशनल) ब्रेकपॉइंट दिखता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. फ़ंक्शन के दायरे में कहीं भी कोड की लाइन के लिए ब्रेकपॉइंट सेट करें.
2. ब्रेकपॉइंट को ट्रिगर करें.
3. DevTools कंसोल में debug() को कॉल करें, जबकि आपके कोड की लाइन के ब्रेकपॉइंट पर कोड अब भी रुका हुआ है.

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

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

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

• सिंक से जुड़े उल्लंघन देखें.

  

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

• नीति के उल्लंघन देखें.

  

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

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

• सुरक्षा से जुड़े अपने लक्ष्यों को पूरा करने के लिए, भरोसेमंद टाइप की मदद से, डीओएम पर आधारित क्रॉस-साइट स्क्रिप्टिंग से जुड़ी सुरक्षा से जुड़ी समस्याओं को रोकना लेख पढ़ें.
• डीबग करने के लिए, Chrome DevTools में CSP और भरोसेमंद टाइप की डीबगिंग लागू करना लेख पढ़ें.