Client Side JS का डिबगिंग

Client side JS का डिबगिंग एक परेशानी हो सकता है क्योंकि हर बार जब आप URL बदलते हैं (जिसमें उपयोग किए गए params या param values में बदलाव शामिल है) तो आपको ब्रेकपॉइंट को रीसेट करना और पृष्ठ को फिर से लोड करना पड़ता है।

debugger;

यदि आप एक JS फ़ाइल के अंदर debugger; लाइन रखते हैं, तो जब ब्राउज़र JS को निष्पादित करता है, यह उस स्थान पर डिबगर को रोक देगा। इसलिए, स्थायी ब्रेकपॉइंट सेट करने का एक तरीका होगा सभी फ़ाइलों को स्थानीय रूप से डाउनलोड करना और JS कोड में ब्रेकपॉइंट सेट करना।

Overrides

ब्राउज़र ओवरराइड्स कोड की एक स्थानीय प्रति रखने की अनुमति देते हैं जो निष्पादित होने जा रहा है और इसे दूरस्थ सर्वर से आने वाले कोड के बजाय निष्पादित करते हैं।
आप "Dev Tools" --> "Sources" --> "Overrides" में ओवरराइड्स तक पहुँच सकते हैं।

आपको ओवरराइड्स को स्टोर करने के लिए एक स्थानीय खाली फ़ोल्डर बनाना होगा, इसलिए बस एक नया स्थानीय फ़ोल्डर बनाएं और उसे उस पृष्ठ में ओवरराइड के रूप में सेट करें।

फिर, "Dev Tools" --> "Sources" में उस फ़ाइल का चयन करें जिसे आप ओवरराइड करना चाहते हैं और दाएं क्लिक करके "Save for overrides" चुनें।

यह JS फ़ाइल को स्थानीय रूप से कॉपी करेगा और आप ब्राउज़र में उस कॉपी को संशोधित कर सकेंगे। इसलिए बस debugger; कमांड को जहाँ चाहें जोड़ें, परिवर्तन को सहेजें और पृष्ठ को फिर से लोड करें, और हर बार जब आप उस वेब पृष्ठ तक पहुँचते हैं आपकी स्थानीय JS कॉपी लोड होगी और आपका डिबगर कमांड अपने स्थान पर बना रहेगा:

संदर्भ

• https://www.youtube.com/watch?v=BW_-RCo9lo8&t=1529s