તમારું Console તમને છેતરી રહ્યું છે

ડિબગિંગ દરમિયાન તમારા બ્રાઉઝર DevTools તમને ગેરમાર્ગે દોરી શકે છે. તે ખરાબ નથી. તે ચોકસાઈ માટે નહીં, પણ ઝડપ માટે ઓપ્ટિમાઇઝ કરવામાં આવ્યું છે.

અહીં કારણો છે કે તમે હંમેશા console.log પર વિશ્વાસ કેમ ન કરી શકો.

• Lazy Evaluation જ્યારે તમે કોઈ ઓબ્જેક્ટ લોગ કરો છો, ત્યારે બ્રાઉઝર તેને તરત જ કોપી કરતું નથી. તે એક લાઈવ રેફરન્સ સ્ટોર કરે છે. જ્યારે તમે તેને વિસ્તારવા માટે એરો (arrow) પર ક્લિક કરો છો ત્યારે જ બ્રાઉઝર તેની પ્રોપર્ટીઝ વાંચે છે. જો તમે ક્લિક કરતા પહેલા તમારો કોડ તે ઓબ્જેક્ટમાં ફેરફાર કરે છે, તો તમે જૂની કિંમતને બદલે નવી કિંમત જોશો.

• The Heisenbug Effect console.log ઉમેરવાથી ખરેખર બગ્સ (bugs) છુપાઈ શકે છે. લોગિંગ કરવા માટે સમય અને સંસાધનોની જરૂર પડે છે. ઝડપી કોડમાં, આ નાનો વિલંબ તમારા એપ્લિકેશનનું ટાઈમિંગ બદલી શકે છે. આનાથી જ્યારે તમે જોઈ રહ્યા હોવ ત્યારે race conditions થતા અટકી શકે છે, જેનાથી બગ અદૃશ્ય થઈ જાય છે.

• React State Traps setCount કોલ કર્યા પછી તરત જ સ્ટેટ લોગ કરવાથી જૂની કિંમત દેખાય છે. આ ક્લોઝર્સ (closures) અને React કેવી રીતે અપડેટ્સ શેડ્યૂલ કરે છે તેના કારણે થાય છે. તમે જે કિંમત લોગ કરો છો તે વર્તમાન render ની છે, આગામી render ની નહીં.

• Source Map Errors પ્રોડક્શનમાં, તમારો કોડ minified અને bundled હોય છે. જો તમારા source maps જૂના અથવા ખોટા હોય, તો કન્સોલ કોડની ખોટી લાઇન બતાવશે. ભૂલ સાચી છે, પરંતુ તેનું સ્થાન ખોટું છે.

વધુ સારી રીતે ડિબગ કેવી રીતે કરવું:

  • સ્નેપશોટ લેવા માટે structuredClone નો ઉપયોગ કરો જો તમારે ઓબ્જેક્ટ અત્યારે જેવો છે તેવો જ જોવો હોય, તો આનો ઉપયોગ કરો: const snap = structuredClone(obj) console.log(snap)

  • મોટા ઓબ્જેક્ટ્સને બદલે પ્રિમીટિવ્સ (primitives) લોગ કરો IDs, timestamps, અથવા status strings લોગ કરો. આનાથી lazy evaluation અને પરફોર્મન્સ પર થતી અસરનું જોખમ ઘટે છે.

  • debugger નો ઉપયોગ કરો એક્ઝિક્યુશન રોકવા માટે breakpoints નો ઉપયોગ કરો. આ તમને તમારા કોડનું ટાઈમિંગ બદલ્યા વિના વાસ્તવિક સ્ટેટ અને call stack તપાસવાની મંજૂરી આપે છે.

  • ફ્રેમવર્ક DevTools નો ઉપયોગ કરો જો તમે React અથવા Vue વાપરતા હોવ, તો તેમના ચોક્કસ DevTools નો ઉપયોગ કરો. તેઓ લોગ્સ કરતા lifecycle અને render phases વધુ સચોટ રીતે બતાવે છે.

કન્સોલ ઝડપી તપાસ માટે એક ઉત્તમ સાધન છે. તેને સત્યના અંતિમ સ્ત્રોત તરીકે ઉપયોગ ન કરો.

સ્ત્રોત: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc