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

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

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

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

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

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

अगर आपको पता है कि कोड का कौनसा हिस्सा सही है, तो कोड की लाइन के ब्रेकपॉइंट का इस्तेमाल करें. कोड की इस लाइन के चालू होने से पहले, 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. Sources पैनल खोलें.
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 नोड या इसके बच्चे.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• जिन अपवादों की पहचान नहीं हुई है उनके लिए रोकें को चुनें.

  

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

• छूटे हुए अपवादों पर रुकें को देखें.

  

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

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

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

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

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

अगला उदाहरण दिखाता है कि डीबगर को एक ऐसे अपवाद पर रोका गया है जिसे अनदेखा नहीं किए गए 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() को कॉल करें. ऐसा तब करें, जब आपके कोड की लाइन पर कोड अब भी रुका हुआ हो ब्रेकपॉइंट तापमान सेट करें.

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

Trust Type API, सुरक्षा से बचाव करता है जिसे क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों के नाम से जाना जाता है.

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

• सिंक के उल्लंघन की जांच करें.

  

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

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

  

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

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

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