अगर आपने Chrome 111 या उसके बाद का वर्शन इंस्टॉल किया है, तो हो सकता है कि आपने पहले ही यह नोटिस कर लिया हो कि हमने ब्रेकपॉइंट साइडबार का डिज़ाइन बदल दिया है. Chrome 113 में, नया साइडबार पुराने डिज़ाइन की जगह ले लेता है. रीडिज़ाइन का हमारा मकसद, ब्रेकपॉइंट वर्कफ़्लो को बेहतर बनाना था. इसके लिए, हमने ये काम किए:
सेट किए गए सभी ब्रेकपॉइंट के बारे में बेहतर खास जानकारी देना. ब्रेकपॉइंट की मदद से, सामान्य उपयोगकर्ता वर्कफ़्लो को आसानी से ऐक्सेस और ज़्यादा आसान बनाया जा सकता है. ब्रेकपॉइंट की मौजूदा शानदार सुविधाओं को दिखाना.
इस पोस्ट में यह माना गया है कि आपको ब्रेकपॉइंट का इस्तेमाल करके डीबग करने के बारे में पहले से पता है. अगर आपने पहले कभी ब्रेकपॉइंट का इस्तेमाल नहीं किया है, तो ब्रेकपॉइंट के बारे में खास जानकारी लेख पढ़ें. साथ ही, अपने कोड को डीबग करने के लिए, ब्रेकपॉइंट का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानें.
अब देखते हैं कि रीडिज़ाइन किए गए वर्शन में क्या-क्या है और नए साइडबार का इस्तेमाल कैसे किया जा सकता है! ध्यान दें कि नए डिज़ाइन में, नई सुविधाएं जोड़ने के बजाय, मौजूदा सुविधाओं को ज़्यादा आसान और बेहतर बनाने पर ध्यान दिया गया है.
अपवादों पर रोक लगाकर, यह जांच करना कि आपका कोड गड़बड़ी क्यों दिखा रहा है
क्या आपका कोड कोई अपवाद दिखाता है? परेशान न हों! Chrome DevTools की मदद से, अपवादों पर प्रोसेस को रोका जा सकता है. इससे, अपवाद मिलने पर प्रोसेस को उसी जगह पर रोका जा सकता है. इससे आपको उन स्थितियों की जांच करने और उन्हें बेहतर तरीके से समझने में मदद मिल सकती है जिनमें आपका कोड गड़बड़ी दिखाता है. साइडबार में मौजूद चेकबॉक्स पर सही का निशान लगाकर, यह चुना जा सकता है कि आपको पकड़े गए अपवादों पर रोक लगानी है, पकड़े नहीं गए अपवादों पर रोक लगानी है या दोनों पर रोक लगानी है.
ब्रेकपॉइंट मैनेज करना: काम के ब्रेकपॉइंट ग्रुप को बड़ा करें और काम के ब्रेकपॉइंट पर फ़ोकस करने के लिए, अन्य ब्रेकपॉइंट को छोटा करें
ब्रेकपॉइंट कई फ़ाइलों में हो सकते हैं. ब्रेकपॉइंट साइडबार, ब्रेकपॉइंट को उस फ़ाइल के हिसाब से ग्रुप करता है जिससे वे जुड़े हैं. काम के ब्रेकपॉइंट ग्रुप को बड़ा करके और बाकी ग्रुप को छोटा करके, सिर्फ़ उन पर फ़ोकस करें जो आपके मौजूदा डीबगिंग सेशन के लिए ज़रूरी हैं.
ब्रेकपॉइंट मैनेज करना: कोड पर जाने, ब्रेकपॉइंट हटाने या चालू/बंद करने के लिए एक क्लिक
ब्रेकपॉइंट साइडबार की मदद से, एक क्लिक में सामान्य काम किए जा सकते हैं. यहां इस बारे में खास जानकारी दी गई है कि ...
कोड एडिटर में ब्रेकपॉइंट की जगह पर जाएं. किसी फ़ाइल में एक या सभी ब्रेकपॉइंट हटाएं. किसी फ़ाइल में एक ब्रेकपॉइंट या सभी ब्रेकपॉइंट चालू या बंद करें.
और यह सब सिर्फ़ एक क्लिक में! ये विकल्प, संदर्भ मेन्यू में भी उपलब्ध हैं:
ब्रेकपॉइंट कोड स्निपेट पर क्लिक करके, ब्रेकपॉइंट की जगह पर जाएं
क्या आपको यह देखना है कि आपने कोड में ब्रेकपॉइंट कहां सेट किया है और आस-पास के कोड का विश्लेषण करना है? साइडबार में ब्रेकपॉइंट के कोड स्निपेट पर क्लिक करें. इससे, कोड एडिटर में कोड की जगह खुल जाएगी.
हटाएं बटन पर क्लिक करके, किसी फ़ाइल में मौजूद एक ब्रेकपॉइंट या सभी ब्रेकपॉइंट हटाएं
किसी ब्रेकपॉइंट या ब्रेकपॉइंट ग्रुप पर कर्सर घुमाएं, ताकि 'हटाएं' बटन दिखे. इस बटन पर क्लिक करने से, फ़ाइल में मौजूद एक या सभी ब्रेकपॉइंट हट जाते हैं.
किसी फ़ाइल में एक या सभी ब्रेकपॉइंट बंद करना
ब्रेकपॉइंट को चालू या बंद करने के लिए, उसके बगल में मौजूद चेकबॉक्स पर सही का निशान लगाएं या हटाएं.
किसी फ़ाइल में सभी ब्रेकपॉइंट चालू या बंद करने के लिए, ब्रेकपॉइंट ग्रुप पर कर्सर घुमाएं और फ़ाइल के नाम के बगल में दिखने वाले चेकबॉक्स पर सही का निशान लगाएं या उस पर से सही का निशान हटाएं.
ब्रेकपॉइंट की इन सुविधाओं का इस्तेमाल करें, जिनके बारे में कम लोग जानते हैं: स्थिति के हिसाब से ब्रेकपॉइंट और लॉगपॉइंट
ब्रेकपॉइंट की शर्तों में बदलाव करना या ब्रेकपॉइंट में बदलाव करके अपना लॉगपॉइंट लॉग बदलना
ब्रेकपॉइंट पर कर्सर घुमाकर, ब्रेकपॉइंट की शर्त या लॉग में बदलाव करें. इसके बाद, बदलाव करें बटन पर क्लिक करें. इससे ब्रेकपॉइंट का टाइप और ब्रेकपॉइंट की जानकारी बदलने के लिए एक डायलॉग बॉक्स खुलेगा.
इसके अलावा, कोड एडिटर में ब्रेकपॉइंट की लाइन चुनें और ब्रेकपॉइंट में बदलाव करने वाला डायलॉग बॉक्स खोलने के लिए, Linux पर Control+Alt+b और Mac पर Command+Alt+b टाइप करें.
साइडबार में ब्रेकपॉइंट पर कर्सर घुमाकर, अपनी शर्त या लॉगपॉइंट लॉग की दोबारा जांच भी की जा सकती है:
नतीजा
ब्रेकपॉइंट साइडबार को फिर से डिज़ाइन करने का हमारा मकसद, ब्रेकपॉइंट की मदद से डीबगिंग को आसान बनाना था. सबसे अहम बात यह है कि हमने इन चीज़ों को ज़्यादा व्यवस्थित बनाने की कोशिश की है, ताकि इन्हें आसानी से ऐक्सेस और समझा जा सके. हमें उम्मीद है कि इन सुधारों से, आपको अगले डीबगिंग सेशन में मदद मिलेगी!
अगर आपको इस सुविधा को और बेहतर बनाने के लिए कोई सुझाव है, तो गड़बड़ी की शिकायत करें!
झलक वाले चैनल डाउनलोड करना
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome कैनरी, डेवलपर या बीटा का इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
- DevTools में ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के बारे में YouTube वीडियो में क्या नया है या DevTools के बारे में YouTube वीडियो में सलाह पर टिप्पणियां करें.