DevTools Showdown Edge का F12 बनाम फ़ायरफ़ॉक्स बनाम क्रोम

माइक्रोसॉफ्ट एज के डेवलपर टूल, विंडोज 10 के नए डिफ़ॉल्ट ब्राउज़र को अपने पूर्ववर्ती, इंटरनेट एक्सप्लोरर 11 के F12 देव टूल्स की तुलना में एक आधुनिक डिज़ाइन और कुछ नई सुविधाएँ मिलीं।.

यह सवाल है कि क्या माइक्रोसॉफ्ट एज के देव उपकरण अपने लोकप्रिय प्रतिस्पर्धियों को मापते हैं - अन्य आधुनिक ब्राउज़रों जैसे कि मोज़िला फ़ायरफ़ॉक्स और गूगल क्रोम में देव उपकरण - स्वाभाविक रूप से कई डेवलपर्स के मन में उठते हैं.

इस पोस्ट में हम इस प्रश्न का उत्तर देने का प्रयास करते हैं, और यह पता लगाते हैं कि क्या एज का F12 देव उपकरण वास्तव में उपयोग करने लायक है। हम इसकी विशेषताओं की तुलना फ़ायरफ़ॉक्स के डेवलपर टूल और Google Chrome के DevTools से करेंगे.

देव उपकरण खोलें

F12 दबाने से सभी 3 मामलों में डेवलपर टूल खुल जाते हैं: फ़ायरफ़ॉक्स में डेवलपर टूल, क्रोम में DevTools और Microsoft एज में F12 Dev टूल्स। यह कीबोर्ड शॉर्टकट है जहां एज के एफ 12 देव टूल्स का आधिकारिक नाम से आता है.

जब आप एज के देव उपकरण खोलते हैं, तो आप इसकी सबसे प्रसिद्ध कमियों में से एक पर अनुभव कर सकते हैं: वर्तमान में यह है मौजूदा विंडो में टूल को पिन करना असंभव है. जब आप स्क्रीन पर नीचे की ओर देव उपकरण विंडो को पिन करके फ़ायरफ़ॉक्स डेवलपर टूल और क्रोम DevTools पर स्क्रीन पर क्या हो रहा है, का अनुसरण कर सकते हैं, तो आप (वर्तमान में) एज के साथ ऐसा नहीं कर सकते.

Microsoft के डेवलपर्स का दावा है कि वे भविष्य के अपडेट में इस समस्या को ठीक कर देंगे.

DOM का निरीक्षण करें

डोम एक्सप्लोरर उपकरण (शॉर्टकट: CTRL + 1) माइक्रोसॉफ्ट एज के F12 देव टूल्स का पहला टैब है। इसका लेआउट और समग्र डिजाइन काफी समान है तत्त्व Chrome का टैब और इंस्पेक्टर फ़ायरफ़ॉक्स में टैब, हालाँकि क्षमता दृष्टि भिन्न होती है.

एज में आप प्रदान किए गए HTML दस्तावेज़, संबंधित CSS शैलियों और प्रत्येक तत्व पर पंजीकृत ईवेंट हैंडलर पर एक नज़र डाल सकते हैं। आप सीएसएस बॉक्स मॉडल के बारे में गणना मूल्यों के साथ छोटे ग्राफिक को भी देख सकते हैं, जो पहले से ही दो प्रतिस्पर्धी ब्राउज़रों से जाना जाता है.

आप ऐसा कर सकते हैं सीएसएस नियमों के साथ प्रयोग करें करंट हटाकर और नए जोड़कर, और आप अपना देख सकते हैं संक्षेप में परिवर्तन नामक एक अलग उपटैब पर “परिवर्तन” (यह बाईं ओर स्थित है)। यह उत्तरार्द्ध एक विशेषता है जो फ़ायरफ़ॉक्स डेवलपर और न ही क्रोम DevTools में निर्मित नहीं है। यह उपयोगकर्ता को एक त्वरित पुनरावृत्ति दे सकता है, इसलिए यह वास्तव में उपयोगी विकल्प है.

फ़ायरफ़ॉक्स डेवलपर टूल में कुछ विशेषताएं हैं जो न तो एज, न ही Google क्रोम वर्तमान में प्रदान करते हैं, लेकिन एक डिजाइनर के जीवन में काफी मदद कर सकते हैं: फ़ॉन्ट और एनीमेशन विश्लेषक उपकरण.

एज में ए शांत रंग बीनने वाला हालांकि यह कुछ हद तक उपयोगकर्ता को इसकी भरपाई कर सकता है.

जावास्क्रिप्ट के साथ बातचीत

कंसोल Microsoft Edge में टैब (शॉर्टकट: CTRL + 2) आपको फ़ायरफ़ॉक्स और क्रोम देव टूल्स की तरह ही अपनी साइट के जावास्क्रिप्ट के साथ बातचीत करने की अनुमति देता है। तीनों आपको वास्तविक समय में जावास्क्रिप्ट त्रुटियों का पालन करने की अनुमति देते हैं और आप अपने स्वयं के इनपुट दर्ज करके उनका विश्लेषण भी कर सकते हैं.

एज के एफ 12 देव टूल्स का कंसोल टूल अच्छा है स्वतः पूर्ण सुविधा यह आपको आदेशों के साथ मदद करता है, हालाँकि ऐसा लगता है कम जानकार फ़ायरफ़ॉक्स और क्रोम देव टूल्स में से एक की तुलना में.

धार त्रुटियों, चेतावनियों और संदेशों को अलग करता है जो एक बड़ी मदद है, हालांकि ऐसा नहीं है कि अन्य दो टूलकिट नहीं है.

फ़ायरफ़ॉक्स का कंसोल तीन देव उपकरणों में से सबसे अधिक पेशेवर लगता है, क्योंकि यह भी है अलग से अन्य प्रकार की समस्याएं दिखाता है: नेटवर्क, सीएसएस, सुरक्षा त्रुटियां और लॉगिंग संदेश, और आप के माध्यम से इन के साथ बातचीत करने की अनुमति देता है कंसोल इंटरफ़ेस, जावास्क्रिप्ट त्रुटियों के साथ ही नहीं.

समझें कि आपका कोड क्या कर रहा है

डीबगर उपकरण (शॉर्टकट: CTRL + 3) आपको यह समझने में मदद करता है कि संभावित बग ढूंढते समय आपके कोड में क्या हो रहा है। आप घड़ियों और ब्रेकप्वाइंट सेट कर सकते हैं, और कॉल स्टैक्स देख सकते हैं.

वॉचेस फलक वैरिएबल मान प्रदर्शित करता है, कॉलस्टैक मोड फ़ंक्शन कॉल की श्रृंखला दिखाता है जो वर्तमान स्थिति के लिए नेतृत्व करता है, और ब्रेकप्वाइंट मोड आपके द्वारा सेट किए गए ब्रेकप्वाइंट की एक सूची दिखाता है.

एज के एफ 12 देव टूल्स आपको बताते हैं अपना कोड रोकें निष्पादन के बीच में, और लाइन से लाइन के माध्यम से कदम। आपके पास विकल्प भी है संकलित या छोटा जावास्क्रिप्ट फ़ाइल की पठनीयता में सुधार, और आप कर सकते है डिबग विभिन्न संसाधनों (जावास्क्रिप्ट, एक्सटेंशन, आदि) एक-एक करके.

फ़ायरफ़ॉक्स और क्रोम DevTools ये सभी कार्यशीलता प्रदान करते हैं, इसलिए एज एक असाधारण डिबगिंग अनुभव प्रदान नहीं करता है, लेकिन यह उपयोगकर्ता को एक ठोस और विश्वसनीय उपकरण प्रदान करता है जो अपने प्रतिद्वंद्वियों के बराबर है।.

ब्राउज़र-सर्वर संचार पर एक नज़र डालें

नेटवर्क टूल (शॉर्टकट: CTRL + 4) इंटरनेट एक्सप्लोरर 11 के बाद से Microsoft एज के लिए पूरी तरह से नया रूप दिया गया है। इस आसान टूल की मदद से आप कर सकते हैं सर्वर और ब्राउज़र के बीच संचार का पालन करें, और व्यक्तिगत अनुरोधों का निरीक्षण करें.

आप ऐसा कर सकते हैं सामग्री प्रकार द्वारा परिणामों को फ़िल्टर करें जैसे कि स्टाइलशीट, चित्र, मीडिया, फोंट, XHR, और कई अन्य। आप भी कर सकते हैं AJAX को डिबग करें नेटवर्क टूल की मदद से.

एज और फ़ायरफ़ॉक्स का नेटवर्क टैब काफी समान क्षमताओं और उपयोगकर्ता इंटरफ़ेस प्रदान करता है। दोनों में एक उपयोगकर्ता के अनुकूल साइडबार फलक है जो आपको चयनित संसाधन HTTP हेडर, HTTP बॉडी, पैरामीटर्स, संबंधित कुकीज़ और टाइमिंग आइटम-दर-आइटम पर एक नज़र डालने की अनुमति देता है.

Chrome DevTools 'नेटवर्क टैब में ऐसा कोई फलक नहीं है, लेकिन यदि आप एक-एक करके अनुरोधों पर क्लिक करते हैं तो आप उसी जानकारी को देख सकते हैं। हालांकि यह कम सहज समाधान है.

ट्रैक धीमा पृष्ठ

प्रदर्शन टैब (शॉर्टकट: CTRL + 5) आपको धीमे वेब पेज के पीछे के कारणों को समझने में मदद करता है। प्रदर्शन टूल के साथ Microsoft ने पिछले संयोजन के साथ एक बड़ी छलांग ली यूआई जवाबदेही और प्रोफाइलर आपके सभी स्क्रिप्टिंग के अंतिम-से-अंत दृश्य बनाने के लिए उपकरण, और प्रदर्शन की कल्पना.

यह आसान उपकरण आपको रिपोर्ट प्रदान करता है विभिन्न प्रकार के CPU उपयोग, आपको अपनी साइट के फ़्रेम पेंट में अंतर्दृष्टि देता है, और यह संभव भी है समयरेखा पर लेबल सेट करके अलग-अलग उपयोगकर्ता परिदृश्यों को अलग करें.

परीक्षण प्रक्रिया के दौरान हमने पाया कि एज में प्रदर्शन उपकरण ने हमें प्रदान किया गति के मुद्दों के बारे में अधिक जानकारी फ़ायरफ़ॉक्स डेवलपर या क्रोम DevTools की तुलना में। एज में प्रदर्शन टैब का उपयोगकर्ता इंटरफ़ेस काफी अच्छी तरह से डिज़ाइन किया गया है, जो हमें कई दृश्य संकेतों के साथ मदद करता है, और यह अपेक्षाकृत आसान उपयोग है। यदि आप इसका उपयोग करने के तरीके के बारे में अधिक जानना चाहते हैं, तो विस्तृत डॉक्स पढ़ें.

स्मृति समस्याओं का निदान करें

याद उपकरण (शॉर्टकट: CTRL + 6) यह संभव बनाता है स्मृति लीक खोजें यह भी आपके वेब पेज को धीमा कर सकता है, इसके अलावा कर सकता है स्थिरता को प्रभावित करते हैं आपकी साइट के.

एक अच्छे ग्राफ़ की मदद से आप आसानी से समझ सकते हैं कि आपकी मेमोरी का उपयोग कहां बढ़ रहा है, और आप विशिष्ट बिंदुओं पर स्नैपशॉट बना सकते हैं जो मेमोरी उपयोग का विश्लेषण करना संभव बनाते हैं। आप भी कर सकते हैं विभिन्न बिंदुओं पर किए गए दो स्नैपशॉट की तुलना करें पृष्ठ जीवनचक्र उनके बीच के अंतर को समझने के लिए.

प्रोफ़ाइल टैब के तहत क्रोम देवटॉल्स में एक अच्छा मेमोरी प्रोफाइलर भी है, जबकि फ़ायरफ़ॉक्स डेवलपर डिफ़ॉल्ट रूप से यह सुविधा प्रदान नहीं करता है, लेकिन यदि आप चाहें तो आप इस तरह से ऐडऑन डाउनलोड और इंस्टॉल कर सकते हैं। क्रोम देवटूल का मेमोरी प्रोफाइलर काफी उन्नत है और एज की तुलना में अधिक सुविधाएँ प्रदान करता है, उदाहरण के लिए यह आपको अनुमति देता है समय के साथ जावास्क्रिप्ट ऑब्जेक्ट आवंटन रिकॉर्ड करें जो आपको मेमोरी लीक को अलग करने में मदद कर सकता है.

अलग स्क्रीन आकार पर अपनी साइट का परीक्षण करें

अनुकरण उपकरण (शॉर्टकट: CTRL + 7) आपको विभिन्न परिस्थितियों में अपनी साइट का परीक्षण करने में सक्षम बनाता है। आप दो ब्राउज़र प्रोफाइल, डेस्कटॉप और विंडोज 10 मोबाइल, और इंटरनेट एक्सप्लोरर के सभी डेस्कटॉप और मोबाइल संस्करणों सहित IE6 में कई अलग-अलग उपयोगकर्ता एजेंटों से चुन सकते हैं, एज के कई प्रतियोगियों, क्रोम, फ़ायरफ़ॉक्स, सफारी आदि।.

यह दिलचस्प है कि आपके पास एक लेने का विकल्प है अपने पृष्ठ को बिंग बॉट के रूप में देखें. आप भी कर सकते हैं GPS का अनुकरण करें, और सेट करें विभिन्न संकल्प और झुकाव.

फ़ायरफ़ॉक्स डेवलपर टूल्स में डिवाइस इम्यूलेशन टूल नहीं है, लेकिन Chrome DevTools में एक ऐसा परिष्कृत एमुलेटर है, जिसे एज शायद ही टक्कर दे सकता है.

उदाहरण के लिए क्रोम की एमुलेशन स्क्रीन में ए है सटीक ग्रिड जहां उत्सर्जित दृश्य डाला जाता है, और आप न केवल ब्राउज़र प्रोफाइल और उपयोगकर्ता एजेंटों से चुन सकते हैं, बल्कि कई उपकरणों जैसे कि से भी विभिन्न संस्करण iPhone या सैमसंग गैलेक्सी और कई अन्य। क्रोम DevTools 'एमुलेटर भी एक काम है ज़ूम विकल्प और आप 3 जी, 4 जी, डीएसएल, वाईफाई, आदि जैसे विभिन्न नेटवर्क पर अपनी साइट का परीक्षण कर सकते हैं.

सारांश

कुल मिलाकर, Microsoft Edge का F12 Dev टूल्स आश्चर्यजनक रूप से अच्छा लगता है। यह अन्य आधुनिक ब्राउज़रों के लोकप्रिय वेब विकास टूलकिट के समान सुविधाएँ प्रदान करता है। दो क्षेत्र हैं जहां एज का F12 देव उपकरण काफी मजबूत है: द प्रयोक्ता इंटरफ़ेस यह वास्तव में है सहज, उपयोगकर्ता के अनुकूल, और अच्छी तरह से डिजाइन किया गया, और यह प्रदर्शन नैदानिक ​​उपकरण.

इन दो सुविधाओं के लिए यह स्विच करने या कम से कम परीक्षण एज पर विचार करने के लिए लायक हो सकता है। सबसे बड़ी कमी स्क्रीन के नीचे करने के लिए देव उपकरण पिन करने की संभावना की कमी है, लेकिन चलो आशा करते हैं कि Microsoft इस मुद्दे को जल्दी से ठीक कर देगा.