ब्राउज़र में इस्तेमाल होने वाली डिबगिंग तकनीकें

ब्राउज़र डिबगर उपयोग टिप्स

• उन्नत conditional breakpoints

  • side effects वाले expressions का उपयोग करके conditional breakpoint की क्षमता बढ़ाना
  • logpoints/tracepoints के जरिए execution रोके बिना console में logs रिकॉर्ड किए जा सकते हैं
  • console.count का उपयोग करके execution count गिना जा सकता है
  • प्रमुख browsers logpoints/tracepoints को support करते हैं (मई 2020 के अनुसार)

• Watch window का उपयोग

  • Watch window में console.log इस्तेमाल किया जा सकता है
  • DOM change के समय expression चलाने के लिए DOM change breakpoint सेट करें और फिर watch expression जोड़ें

• Call stack tracking

  • function call stack को track करके mismatched calls ढूंढना
  • call stack देखने के लिए conditional breakpoint में console.trace का उपयोग

• Program behavior बदलना

  • browser के भीतर ही तुरंत program behavior बदला जा सकता है
  • function parameters को override करके behavior को adjust करना

• सरल performance profiling

  • console timing API का उपयोग करके code execution time मापना
  • console.time('label') और console.timeEnd('label') का उपयोग करके समय मापना

• Function arity का उपयोग

  • breakpoint को केवल तब activate करना जब function किसी निश्चित संख्या के arguments के साथ call हो
  • function call के दौरान arguments count mismatch ढूंढने के लिए उपयोग

• समय का उपयोग

  • page load के बाद केवल एक निश्चित समय बीतने पर breakpoint activate करना
  • किसी निश्चित समय तक breakpoints को skip करना और उसके बाद ही activate करना

• CSS का उपयोग

  • computed CSS values के आधार पर breakpoint activate करना

• केवल even calls पर break

  • केवल हर दूसरी execution पर breakpoint activate करना

• Sampling के जरिए break

  • execution के केवल random samples पर breakpoint activate करना

• किसी खास line पर break न करें

  • "Never Pause Here" विकल्प का उपयोग करके किसी खास line पर execution रुकने से रोकना

• Automatic instance ID assignment

  • हर class instance को अपने-आप unique ID देना

• Programmatically toggle करना

  • global boolean का उपयोग करके conditional breakpoints को programmatically toggle करना

• monitor() class calls

  • class method calls को track करने के लिए Chrome के monitor command का उपयोग

• Function calls और debugging

  • console में debugger call करने के बाद function को debug करने के लिए उसे call करना

• URL बदलने पर execution रोकना

  • single-page application में URL बदलने से पहले execution रोकना

• Property read debugging

  • object की property पढ़े जाने पर हर बार breakpoint activate करना

• copy() का उपयोग

  • copy() console API का उपयोग करके browser से सीधे clipboard में जानकारी copy करना

• HTML/CSS debugging

  • HTML/CSS समस्याओं की जांच के लिए JS console का उपयोग
  • JS disabled होने की स्थिति में DOM inspect करना
  • conditionally दिखने वाले DOM elements inspect करना
  • DOM snapshots रिकॉर्ड करना
  • focused element को monitor करना
  • bold text वाले elements ढूंढना
  • अभी selected element को refer करना
  • events को monitor करना

GN⁺ की राय

इस लेख की सबसे महत्वपूर्ण बात यह है कि यह ब्राउज़र डिबगर का उपयोग करके developers को code को अधिक कुशलता से debug करने और समस्याएँ हल करने के लिए विभिन्न तकनीकें और टिप्स देता है। यह जानकारी software developers के लिए बहुत उपयोगी है, और खासकर जटिल bugs को track करने या performance समस्याओं को हल करने में समय बचाती है, इसलिए यह दिलचस्प है।

[GN⁺]

Hacker News की राय

• ब्राउज़र में बिल्ट-इन डिबगिंग टूल्स का विकास

  • ब्राउज़र में बिल्ट-इन डिबगिंग टूल्स ने पिछले कई दशकों में काफ़ी प्रगति की है।
  • JavaScript डेवलपर के रूप में, सहज ब्राउज़र कोड डिबगिंग को संभव बनाने वाले सभी लोगों का आभार।
  • बैकएंड डेवलपमेंट या दूसरी भाषाओं में काम करते समय, आधुनिक ब्राउज़र के डिबगिंग टूल्स ecosystem की कमी महसूस होती है।

• debugger; स्टेटमेंट का उपयोग

  • debugger; स्टेटमेंट का उपयोग करना Chrome debugger के recursive stack को मात देने का लगभग एकमात्र तरीका है।
  • साइट विज़िटर्स को अपने obfuscated homepage को समझने से रोकने के लिए डिबगिंग ट्रैप्स इस्तेमाल करने के एक उदाहरण का उल्लेख।

• NodeJS बैकएंड डिबगिंग की मुश्किलें

  • Python/Elixir प्रोग्रामर के रूप में pdb.set_trace()/IEx.pry() का अक्सर उपयोग किया जाता है।
  • एक जटिल NodeJS बैकएंड विरासत में मिलने के बाद, बिना उचित डिबगिंग टूल्स के काम करते हुए कठिनाई हुई।
  • फिर console.log डिबगिंग पर लौटना पड़ा, जो काफ़ी आदिम लगा।
  • सही डिबगिंग REPL न होने पर हैरानी जताई गई और मदद मांगी गई।

• Werkzeug की सिफारिश

  • Django बैकएंड डेवलपमेंट के लिए Werkzeug इस्तेमाल करने की सिफारिश।
  • यह हर बार exception होने पर ब्राउज़र में "PDB" shell का उपयोग करने देता है।

• IIFE के लोकल वेरिएबल्स तक पहुँचने का तरीका

  • तुरंत निष्पादित फ़ंक्शन अभिव्यक्ति (IIFE) के लोकल वेरिएबल्स तक पहुँचने के तरीके पर सवाल।
  • यह देखने की कोशिश कि क्या debugger, IIFE scope के भीतर कोड रोके बिना ऐसा कर सकता है।

• UI स्ट्रिंग्स के ज़रिये डिबगिंग का तरीका

  • Network panel में network request रिकॉर्ड करना शुरू करें।
  • बाएँ sidebar में search का उपयोग करके वह code/UI string दर्ज करें जिसे आप ढूँढना चाहते हैं।
  • bundled js chunk file में परिणाम खोजें, फिर उसे "Sources" में खोलकर debugger; स्टेटमेंट रखें।

• conditional breakpoint का उपयोग करके डिबगिंग

  • {configOption: true} को {get configOption() { debugger; return true; }} में बदलने के तरीके पर सवाल।

• Chrome-विशेष फीचर 'Monitor Events for Element'

  • 'Monitor Events for Element' फीचर का उल्लेख और यह कि यह Chrome-विशेष है।
  • Firefox के लिए कोई विकल्प है या नहीं, इस पर जिज्ञासा।

• queryObjects API की अनुपस्थिति

  • ऐसे queryObjects API का उल्लेख जो किसी विशेष constructor से बने सभी objects की सूची लौटाता है।
  • उदाहरण के लिए, queryObjects(Function) का उपयोग करके heap में मौजूद सभी functions की सूची पाई जा सकती है।

• watch variables के उपयोग में कठिनाई

  • watch variables को काम कराने में दिक्कत का सामना।
  • माना गया कि केवल global variables को ही watch किया जा सकता है, लेकिन यह उम्मीद के मुताबिक काम नहीं किया, इसलिए values को log में भरना पड़ा।
  • यह राय कि console को variables और settings दिखाने व परखने के लिए Data.gui-स्टाइल UI जोड़ना चाहिए, और संबंधित CodePen लिंक दिया गया।