12 JavaScript Debugging Techniques Every Developer Overlooks but Needs to Master for Flawless Code

12 JavaScript ડિબગિંગ ટેકનિક્સ જે દરેક ડેવલપર અવગણે પરંતુ માસ્ટર કરવી જરૂરી છે

1. કન્સોલ લોગ્સનો સ્યોજી ઉપયોગ

JavaScript ડિબગિંગમાં કન્સોલ.log() એક એવું સાધન છે જે большинства ડેવલપર્સ દ્રષ્ટિએ સામાન્ય લાગે છે. પરંતુ કદાચ તમે જાણશો નહિ કે કન્સોલ.log() નો વિભિન્ન પ્રકારો અને સ્વરૂપોથી વધુ અસરકારક રીતે ઉપયોગ કરી શકીએ છીએ.

ઉદાહરણ તરીકે, console.table() ડેટાને લેતી વખતે તે ટેબ્યુલર ફોર્મમાં બતાવે છે, જેના માધ્યમથી ડેટાની સમજૂતી સરળ બને છે. વચ્ચેની કેટલીક value પસંદ કરવી હોય તો console.warn() અથવા console.error() વધુ અસર આપે છે.

આટલું જ નહીં, console.group() અને console.groupEnd() નો ઉપયોગ કરીને લૉગસને લોજીકલી ગ્રુપ કરી શકાય છે, જે ખાસ કરીને મોટા સ્ક્રિપ્ટમાં ડિબગિંગ કરવું સહેલું બનાવે છે. સેલ્સફોર્સ અને Mozilla ની વેબ ડોક્યુમેન્ટેશન આ વિષય પર વધુ માર્ગદર્શિકા આપે છે.

2. બ્રેકપોઇન્ટ્સની શક્તિ

આજકાલ બધા બ્રાઉઝર ડેવલપર ટૂલ્સ બ્રેકપોઇન્ટ સુવિધા આપે છે. એ માત્ર કોડ રન થવાનું રોકતું નથી, પરંતુ ડેટા અને એક્શન સ્થાન પર તપાસ કરવામાં મદદરૂપ થાય છે.

પ્રોગ્રામમાં બ્રેકપોઇન્ટ મૂકી શકાય છે ચોક્કસ કોન્ડીશન્સ માટે પણ, જેથી તે માત્ર તે સમયે જ arbeid કરે જ્યારે ચોક્કસ શરતો પૂરાં પાડી. આ રીતે, કંડિશનલ બગ શોધવાનું સરળ બને છે.

ફાયરફોક્સ અને ક્રોમ ડેવટૂલ્સમાં ખંડિત સ્ટેપ-થ્રુ, વેરિએબલ મૂલ્યો જોવા અને કોલ સ્ટેક ની જाँच કરવાની સહેજ પ્રક્રિયા આપતા હોય છે, જે દરેક જાવાસ્ક્રિપ્ટ ડેવલપર માટે આવશ્યક છે.

3. ડેબગર સ્ટેટમેન્ટનો ઉપયોગ

ફરી એક કિમતી સાધન છે 'debugger;' સ્ટેટમેન્ટ. જ્યારે જાવાસ્ક્રિપ્ટ એ લાઇન સુધી પહોંચી, ત્યારે તે ઓટોમેટિક બ્રેકપોઈન્ટ રૂપે કામ કરે છે અને ડિબગિંગ મોડમાં દાખલ થાય છે.

જો તમે એડિટર અથવા IDE છોડીને ડેવટૂલ્સ ખોલવા વિના ઝડપી ડિબગિંગ કરવું હોય, તો 'debugger;' ઉમેરવી એક સારો વિકલ્પ છે. તે સ્ક્રિપ્ટના ચોક્કસ ભાગમાં જોવાઈ શકે છે.

પરંતુ, પ્રોડક્શન માં આ સ્ટેટમેન્ટ ન જ રહે તે માટે ધ્યાન રાખવું જરૂરી છે કારણ કે તે બિનજરૂરી ડિબગિંગ રોકાવટ કરી શકે છે અને ચક્રવાત પ્રક્રિયા નિર્ણય નિષ્ફળ બની શકે છે.

4. સ્માર્ટ વેરિએબલ નિરીક્ષણ

ડિબગિંગમાં વેરિએબલ્સનું સાચું મૂલ્ય અને પ્રકાર જાણી વિના સમસ્યા ટટાવી શકાતી નથી. ડેવટૂલ્સમાં વેરિએબલને હવર કરીને તેની હાલત જોઈ શકાય છે.

ક્યારેક વેરિએબલ અવારનવાર બદલાતા હોય, ત્યારે Watch Expressionsમાં તેને નિરીક્ષણ માટે ઉમેરી શકો છો. આથી, દરેક બદલાવ સાથે વેરિએબલની સ્થિતિ જાણી શકાય છે.

કોલ સ્ટેક અને સ્કોપ ચેનલ પણ વરસાદીય વેરિએબલ મૂલ્ય સાથે મદદરૂપ બને છે. વધુ માહિતી માટે Mozilla Developer Network (MDN) નો "Debugging JavaScript" વિભાગ વાંચવો જોઈએ.

5. સ્રોત નકશા (Source Maps) નો ઉપયોગ

જ્યારે તમે minified અથવા transpiled JavaScript જેમ કે TypeScript ઉપયોગ કરો છો, ડિબગિંગ ખરે ખરે મુશ્કેલ બની જાય છે. અહીં સોર્સ મૅપ્સ ઉપયોગી સાબિત થાય છે.

સોર્સ મૅપ તમારી મિનિફાઇડ ફાઇલોને તેમની મૂળ સ્ત્રોત ફાઇલો સાથે જોડે છે. આથી, જ્યારે બ્રેકપોઈન્ટ મૂકો ત્યારે મૂળ કોડ પર અટકે છે, જે તમને વાસ્તવિક સમસ્યા શોધવામાં મદદરૂપ છે.

વેબપેક, બેબલ અને ટાઇપસ્ક્રિપ્ટ જેવા ટૂલ્સ આપમેળે સોર્સ મૅપ પેકેજ કરી આપે છે. સ્રોત નકશા પ્રયોગ વગર ડિબગ કરવું લગભગ અશક્ય બની શકે છે.

6. નેટવર્ક તપાસ ફંક્શન

બાયોન્ડ ફ્રન્ટએન્ડ જાવાસ્ક્રિપ્ટ, નેટવર્ક કૉલ્સ અને એPI קומ્યુનિકેશન ઘણી વાર બગ સર્જતા હોય છે. ડેવટૂલ્સનું નેટવર્ક પેનલ આ માટે શ્રેષ્ઠ સ્તરો પ્રદાન કરે છે.

આ પેનલ દ્વારા દરેક ટેક્નિકલ રિકવેસ્ટ અને રિસ્પોન્સ ને જોઈ શકાય છે, તેમજ હેડર્સ અને ડેટા ચકાસી શકીએ છીએ. આ માહિતી અસમાન્ય વર્તન શોધવા માટે ખૂબ ઉપયોગી છે.

જ્યારે JSON ફોર્મેટના રિસ્પોન્સ મળતા હોય, ત્યારે તેને ફોર્મેટ કરીને જોઈ શકીએ છીએ. આ પેનલ ડેટા ટ્રાન્સફર સ્ફટિકસફાઈ કરવા અને ડ્રોપેડ રિકવેસ્ટ માટે તાત્કાલિક સમાધાન લાવે છે.

7. DOM વિશ્લેષણ અને મોનિટરિંગ

કંપની Websitesમાં DOM મેનેજમેન્ટ હાલ કેટલું મહત્વનું છે તે જાણવું જરૂરી છે. ડેવટૂલસમાં Elements પેનલ DOMનું દ્રશ્ય અને તેના ફેરફારો વિશ્લેષિત કરે છે.

Elements પેનલના Event Listeners ફીચર વડે તમે DOM પર લાગેલા દરેક ઇવેન્ટ હેન્ડલર્સ જોઈ શકો છો, જે બગ બિનજરૂરી યાદી આપતો હોય ત્યારે તે શોધવામાં મદદ કરે છે.

ટ્રિગર કરાયેલા કપડાઓનું વિશ્લેષણ DOM મોનિટરિંગ વિના પૂર્ણ થતું નથી. આ માટે Chrome DevTools નું Mutation Observer ટ્રેસર ઉપયોગ કરી શકાય છે.

8. પ્રોફાઇલિંગ સાથે પરફોર્મન્સ ડિબગિંગ

કોઈપણ વધુ તીવ્ર સ્ક્રિપ્ટ પ્રદર્શનની સમસ્યાઓ લાવી શકે છે. ડેવટૂલ્સ માં Profiler સપોર્ટ સાથે તમે ક્યારેયે કોડનો કયો હિસ્સો વધુ સિપીયુ કે મેમરી લે છે તે જોઈ શકો છો.

જ્યારે તમે પ્રોફાઇલિંગ કરો છો, ત્યારે કૉલ સ્ટૅક અને ફંક્શનલ સમય વિતરણ ધ્યાનથી જોવો, જેથી સૌથી વધુ સમય લેતા ફંક્શન્સ માટે ઓપ્ટિમાઇઝેશન કરી શકાય.

કોઈપણ જાવાસ્ક્રિપ્ટ એપ્લિકેશનમાં પ્રદર્શન સુધારવા માટે પ્રોફાઇલિંગ સામાન્ય અને આવશ્યક પ્રક્રિયા છે. વધુ માહિતી માટે Chrome DevTools Guides વાંચવી ખૂબ મદદરૂપ રહેશે.

9. લાઈવ કોડ એડિટિંગ

ડેવટૂલ્સમાં લાઈવ કોડ એડિટિંગ દ્વારા તરત જ કોડ બદલવા અને પરિણામ જોઈ શકાય છે. આ પદ્ધતિ તરત પરીક્ષણ માટે સારી છે અને રોકાણનો સમય લઘુ કરે છે.

તમે કોર ફાઈલોમાં ફરીથી કોડ ન લખી વિના ત્વરિત સુધારા જોઈ શકો છો અને તેને કન્સોલમાંથી અથવા Elements પેનલમાં સીધા સ્નિપેટસ પણ ચાલાવી શકો છો.

આવી લાઈવ એન્વાયર્મેન્ટથી ઝડપી ડિબગિંગ સંભવ બને છે. જોકે, બદલાવ સેવ કરવા માટે સ્ટેટિક ફાઈલોમાં પાછા સાચવવા પડે છે જેથી પ્રોડક્શન પર અસર ન થાય.

10. યુનિટ ટેસ્ટસ સાથે બગ હન્ટિંગ

ડિબગિંગ માત્ર ડેવટૂલ્સ સુધી મર્યાદિત નથી. યુનિટ ટેસ્ટસ આપોઆપ બગ શોધવામાં સહાય કરે છે. Jest, Mocha જેવા ફ્રેમવર્ક સાથે ટીમवर्क માં બગ વસાન ઘટાડે છે.

સારા યુનિટ ટેસ્ટ સાથે તમે કોડમાં આવનારા ફેરફારો માટે પ્રીડિક્ટેબલ પરિણામો હાંસલ કરી શકો છો. દર વખતે ડિબગિંગ કરવાને બદલે, તે કામગીરી તાજેતર માટે પુષ્ટિ આપે છે.

સર્જનાત્મક ડિબગિંગમાં યુનિટ ટેસ્ટ રિપોર્ટ અને કવરેજ જોવા પણ મહત્વનું છે. એન્ડ્રોઇડ અને વેબ બંને માટે આ પદ્ધતિ અપનાવવી જોઈએ.

Featured Articles