ब्राउज़र Developer Tools के राज़

<p>1. Console में सिर्फ़ 'log()' से कहीं ज़्यादा फीचर्स होते हैं<br /> - Filtering options<br /> - {} : variable value/name को साथ में प्रिंट करना<br /> - warn/info/error() : log level<br /> - assert(): सिर्फ़ किसी खास condition पर आउटपुट देना<br /> - trace(): किसने call किया<br /> - group(): messages को group करके expand/collapse करना<br /> - table(): जानकारी को table में दिखाना<br /> - $() = document.querySelector(), $$() = document.querySelectorAll()<br /> &nbsp;&nbsp;$$('a').map(a =&gt; {<br /> &nbsp;&nbsp;&nbsp;return {url: a.href, text: a.innerText}<br /> &nbsp;&nbsp;})<br /> <br /> 2. source code access के बिना logs छोड़ना<br /> - Live Expressions : real time में बदलते variable values देखना<br /> - logpoints : breakpoint का एक खास रूप, जो उस line के execute होने पर log प्रिंट करता है। तकनीकी रूप से यह web page में कहीं भी console.log जोड़ने जैसा है<br /> <br /> 3. ब्राउज़र के बाहर logs छोड़ना<br /> - VS Code Debugger<br /> <br /> 4. किसी भी site में code injection करना (Chromium browsers: Edge, Chrome, Brave..)<br /> - Snippets : मौजूदा website पर script चलाना<br /> - Overrides : remote script की copy सेव करके उसे modify करना, फिर page load होने पर override करना<br /> <br /> 5. और भी ज़्यादा जगहों पर Inspect &amp; Debug करना संभव (Chromium browsers)<br /> - Electron family सब support करती है : GitHub Desktop, VS Code, यहाँ तक कि browser के Developer Tools को भी Developer Tools से debug किया जा सकता है<br /> - MS Edge Tools for VS Code<br /> <br /> 6. कुछ गड़बड़ से राज़<br /> - लोग Developer Tools का सिर्फ़ एक हिस्सा ही इस्तेमाल करते हैं। शायद इसलिए कि explanatory docs कम हैं, इसलिए बहुत समय लगाकर docs बनाए गए, लेकिन लगता है कि वह भी समाधान नहीं है<br /> - Developer Tools लगातार ज़्यादा complex होते जा रहे हैं और ढेरों फीचर्स से overwhelming लगते हैं। क्या इसे बेहतर बनाने का कोई तरीका नहीं है?<br /> &nbsp;→ Edge Focus Mode लाने की कोशिश कर रहा है। हर फीचर दिखाने के बजाय, use case के हिसाब से सिर्फ़ ज़रूरी tools दिखाना<br /> &nbsp;→ Informational Overlays पर भी काम चल रहा है। यानी Developer Tools के अंदर ही सीधे दिखाई देने वाली help देना<br /> - code लिखने और बने हुए output को debug करने के बीच अब भी disconnect है<br /> &nbsp;→ Browser Developer Tools में किए गए बदलाव code में कैसे reflect हों?<br /> &nbsp;→ एक तरीका है Developer Tools को VSCode से replace करना, ताकि tool इस्तेमाल करते समय hard drive की files सीधे बदलें<br /> &nbsp;→ दूसरा तरीका यह है कि VSCode extension के हिस्से के रूप में ऐसा विकल्प दिया जाए, जिससे Developer Tools से बदलाव करने पर disk की files भी बदली जा सकें<br /> <br /> 7. आप Developer Tools के audience भी हैं और client भी<br /> &nbsp;→ Report a Bug / Request a Feature जैसी चीज़ों के ज़रिए feedback दें </p>

[galadbran]

<p>थोड़ा अलग नज़रिए से देखें तो एक बात यह भी है कि यूज़र और डेवलपर, दोनों के पास एक ही टूल होते हैं। इसलिए लगता है कि web app को शॉर्टकट अपनाने वाले दुर्भावनापूर्ण यूज़र्स से निपटने पर काफी ध्यान देना चाहिए।</p>

[laeyoung]

<p><code>console.log()</code> से संबंधित लेख<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

<p>अच्छे फीचर मौजूद हों तब भी, दस्तावेज़ में अच्छे उदाहरण हैं या नहीं, यही अक्सर बड़ा फैसला तय करता है।</p>