Chrome DevTools में Performance panel को पहली बार खोलें तो ऐसा लगता है जैसे किसी ने आपकी स्क्रीन पर रंगीन क्रेयॉन का पूरा डिब्बा उड़ेल दिया हो। दर्जनों रंग-बिरंगी बार्स, आधा दर्जन ट्रैक्स, और नीचे तीन टैब जो सब एक जैसी ही चीज़ दिखाते लगते हैं लेकिन थोड़ा अलग ढंग से। कोई आश्चर्य नहीं कि ज़्यादातर डेवलपर्स एक trace रिकॉर्ड करते हैं, घबरा जाते हैं, और वापस console.log डिबगिंग पर लौट जाते हैं। मैं भी सालों तक यही करता रहा - जब तक मैंने वाकई बैठकर यह नहीं समझा कि हर हिस्सा क्या मतलब रखता है, और अब जब भी कुछ “धीमा महसूस होता है” तो यही पहला टूल होता है जिसकी ओर मैं हाथ बढ़ाता हूँ।
आपका वेब ऐप शायद ऐसे काम कर रहा है जिन्हें आपने कभी वास्तव में डीबग नहीं किया। यूज़र के कुछ भी क्लिक करने से पहले pages prerender हो रहे हैं, form submissions ऑफलाइन रहते हुए चुपचाप queue में जा रहे हैं, push notifications एक सोए हुए service worker पर आ रही हैं, sessions cryptographically hardware keys से bound हैं — यह सब Chrome के background service APIs के ज़रिए होता है, पूरी तरह अदृश्य रूप से। Chrome DevTools का Background Services पैनल वह जगह है जहाँ आप अंततः यह सब देख पाते हैं।
DevTools खोलें, Application पर क्लिक करें, और बाईं ओर की साइडबार देखें। Cookies, Local Storage, Session Storage, IndexedDB, Cache Storage, Shared Storage, Background Services… यह काफी कुछ है। मैंने सीनियर डेवलपर्स को भी हर चीज़ के लिए localStorage का इस्तेमाल करते देखा है — ऑथ टोकन, शॉपिंग कार्ट, यहाँ तक कि मेगाबाइट्स में API रिस्पॉन्स — सिर्फ इसलिए क्योंकि यह वही है जिसे वे जानते हैं। यह हमेशा गलत नहीं होता, लेकिन यह शायद ही कभी सबसे अच्छा विकल्प होता है। आइए असल में देखें कि इनमें से हर मैकेनिज्म क्या करता है, DevTools में आपको यह कहाँ मिलेगा, और — सबसे ज़रूरी — आपको इसे बाकी छह विकल्पों के बजाय कब चुनना चाहिए जो ठीक बगल में बैठे हैं।