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