ब्रेकपॉइंट के नए साइडबार की मदद से, तेज़ी से डीबग कैसे किया जा सकता है

Kim-Anh Tran
Kim-Anh Tran
Vaatika Dabra Groth
Vaatika Dabra Groth

ब्रेकपॉइंट के पुराने और नए साइडबार पैनल को साथ-साथ दिखाया गया है.

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

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

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

चलिए, अब देखते हैं कि रीडिज़ाइन किए गए YouTube Studio में क्या-क्या उपलब्ध है. साथ ही, नई साइडबार सुविधा का इस्तेमाल कैसे किया जा सकता है! ध्यान दें कि नए डिज़ाइन में, नई सुविधाएं जोड़ने के बजाय मौजूदा सुविधाओं को इस्तेमाल करने में ज़्यादा आसान और सहज बनाने पर फ़ोकस किया गया है.

अपवादों पर रुककर यह पता लगाना कि आपका कोड गड़बड़ी क्यों दिखा रहा है

पहचाने गए और पहचाने नहीं गए अपवादों पर रोकें.

क्या आपके कोड में कोई अपवाद है? चिंता न करें! Chrome DevTools की मदद से, अपवादों पर रोका जा सकता है. इससे, अपवाद के ट्रिगर होने पर कोड का एक्ज़ीक्यूशन रुक जाता है. इससे आपको यह समझने में मदद मिल सकती है कि किस वजह से आपके कोड में गड़बड़ी हुई है. साथ ही, आपको गड़बड़ी की जांच करने में भी मदद मिल सकती है. साइडबार में मौजूद चेकबॉक्स पर सही का निशान लगाकर, यह चुना जा सकता है कि आपको पकड़े गए अपवादों, न पकड़े गए अपवादों या दोनों पर रोकना है या नहीं.

अपने ब्रेकपॉइंट मैनेज करें: काम के ब्रेकपॉइंट ग्रुप को बड़ा करें और दूसरों को छोटा करें, ताकि आप काम की चीज़ों पर ध्यान दे सकें

ब्रेकपॉइंट ग्रुप को छोटा और बड़ा करें.

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

अपने ब्रेकपॉइंट मैनेज करें: कोड पर जाने, ब्रेकपॉइंट हटाने या उन्हें चालू/बंद करने के लिए एक क्लिक करें

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

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

और यह सब सिर्फ़ एक क्लिक में! ये विकल्प, संदर्भ मेन्यू में भी उपलब्ध हैं:

ब्रेकपॉइंट कोड स्निपेट पर क्लिक करके, ब्रेकपॉइंट की जगह पर जाएं

कोड एडिटर में सोर्स कोड की जगह पर जाएं.

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

ब्रेकपॉइंट हटाएं बटन पर क्लिक करके, किसी फ़ाइल में मौजूद एक या सभी ब्रेकपॉइंट हटाएं

किसी फ़ाइल में मौजूद एक या सभी ब्रेकपॉइंट हटाएं.

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

किसी फ़ाइल में मौजूद एक या सभी ब्रेकपॉइंट बंद करना

किसी फ़ाइल में मौजूद एक या सभी ब्रेकपॉइंट को चालू या बंद करें.

किसी ब्रेकपॉइंट को चालू या बंद करने के लिए, उसके बगल में मौजूद चेकबॉक्स पर सही का निशान लगाएं या हटाएं.

किसी फ़ाइल में सभी ब्रेकपॉइंट चालू या बंद करने के लिए, ब्रेकपॉइंट ग्रुप पर कर्सर घुमाएं. इसके बाद, फ़ाइल के नाम के बगल में दिखने वाले चेकबॉक्स पर सही का निशान लगाएं या हटाएं.

ब्रेकपॉइंट की इन कम जानी जाने वाली सुविधाओं का इस्तेमाल करें: स्थिति के हिसाब से ब्रेकपॉइंट और लॉगपॉइंट

ब्रेकपॉइंट की शर्तों में बदलाव करना या ब्रेकपॉइंट में बदलाव करके, लॉगपॉइंट के लॉग में बदलाव करना

ब्रेकपॉइंट की शर्तों में बदलाव करें या लॉगपॉइंट के लॉग बदलें.

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

इसके अलावा, कोड एडिटर में ब्रेकपॉइंट की लाइन चुनें. इसके बाद, ब्रेकपॉइंट में बदलाव करने का डायलॉग खोलने के लिए, Linux पर Control+Alt+b और Mac पर Command+Alt+b टाइप करें.

साइडबार में मौजूद ब्रेकपॉइंट पर कर्सर घुमाकर, अपनी शर्त या लॉगपॉइंट लॉग की तुरंत दोबारा जांच की जा सकती है:

शर्त या लॉगपॉइंट लॉग देखें.

नतीजा

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

अगर आपको इसे बेहतर बनाने के लिए कोई सुझाव देना है, तो गड़बड़ी की शिकायत करें!

झलक दिखाने वाले चैनल डाउनलोड करना

Chrome Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को टेस्ट करने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!

Chrome DevTools टीम से संपर्क करना

नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.