मैं एक नौसिखिया वेब डेवलपर हूं, और मैंने कई बार डिबगिंग के लिए फायरबग की सिफारिश की है। हालाँकि, अब तक, मैं सिर्फ क्रोम के अंतर्निहित डेवलपर टूल का उपयोग कर रहा हूं। यह सब कुछ करने के लिए लगता है जो फायरबग करता है, और एक बोनस के रूप में क्लीनर और अधिक व्यवस्थित है।
जैसा कि मैं अपने डिबगिंग में और अधिक उन्नत हो गया हूं, क्या ऐसी विशेषताएं हैं जो फ़ायरबग है कि मैं क्रोम के DevTools के साथ याद करूंगा? यदि ऐसा है, तो वो क्या हैं?
जवाबों:
मैंने शुरू से ही फायरबग का इस्तेमाल किया था और यह आग के आविष्कार की तरह एक गॉडसेंड था। लेकिन तब क्रोम अपने डिबगर के साथ बाहर आया और मैंने इसकी कोशिश की। मैं फायरबग का उपयोग करता रहा, लेकिन चोम के देव औजारों पर नजर रखता था और आखिरकार JSON टूल्स v12 में जोड़े जाने के बाद स्विच नहीं करने का कारण नहीं बन सकता था।
क्रोम के DevTools किक बट के कारण है:
अद्यतन: 2 साल बाद मुझे फ़ायरफ़ॉक्स टीम को भारी भरकम इनरॉड बनाने के लिए बधाई देना है। कहा कि, क्रोम टीम और डिबगर मासिक आधार पर बड़ी छलांग लगाते हैं, जिससे उद्योग आगे बढ़ता है। मैं उपरोक्त सूची को अपडेट करूंगा, लेकिन स्पष्ट रूप से यह पूरे पृष्ठ को भर देगा।
क्रोम डेवलपर टूल्स ने फायरबग की विशेषताओं को संभाला, इसलिए सभी मुख्य विशेषताएं और परिचितता वहां हैं (जैसे कि $0, और consoleऑब्जेक्ट)।
कुछ छोटे अंतर हैं, जैसे कि DevTools में CSS पैनल नहीं है (हालांकि CSS स्टाइलशीट को तत्व पैनल में हेरफेर किया जा सकता है )।
क्रोम टूल में अतिरिक्त रूप से टाइमलाइन , प्रोफाइल और स्टोरेज पैनल हैं। समय पैनल लोड हो रहा है, सीएसएस प्रतिपादन, और जावास्क्रिप्ट पार्स लॉग करता है। प्रोफाइल पैनल प्रोफाइल संसाधन उपयोग और भंडारण पैनल शो और सत्र भंडारण स्थानीय भंडारण साइट के डेटाबेस में परिवर्तन, और कुकी अनुमति देता है।
अंत में, दोनों साधनों के अपने छोटे संस्करण हैं, जो विभिन्न क्रियाओं को एक छोटे से आसान या कठिन बनाते हैं। मेरी सलाह फ़ायरफ़ॉक्स के लिए फायरबग, और वेबकिट ब्राउज़रों के लिए DevTools का उपयोग करना है, क्योंकि केवल फ़ायरबग लाइट क्रोम पर काम करता है, और इसमें कई सुविधाओं का अभाव होता है जो सामान्य फ़ायरबग (और DevTools क्रोम में निर्मित होते हैं)।
मैं फायरबग का उपयोग करके बहुत अधिक आरामदायक महसूस करता हूं। मैं इस समय बारीकियों के बारे में नहीं सोच सकता, लेकिन कभी-कभी मैं सफारी या क्रोम में कुछ डिबग करने की कोशिश करता हूं और ऐसा लगता है कि मैं ऐसा पीआईटीए कर रहा हूं जो फ़ायरफ़ॉक्स को लॉन्च करता है और जो कुछ भी जल्दी होता है।
डोम टैब एक के लिए एक प्लस है। यह क्रोम के समतुल्य की तुलना में अधिक सुलभ और सुव्यवस्थित है। मैं जिस तरह डोम और अन्य जेएस वस्तुओं को फायरबग में कंसोल में लॉग इन करता हूं, वह भी पसंद करता है।
Pixel Perfect की तरह Firebug प्लग-इन बहुत उपयोगी है। मुझे नहीं पता कि क्रोम के लिए ऐसा कोई उपकरण मौजूद है या नहीं।
कुल मिलाकर, इससे कोई फर्क नहीं पड़ता क्योंकि आपको दोनों ब्राउज़रों में परीक्षण करना है, वैसे भी। और IE, इसलिए इसकी तुलना IE के Dev टूल्स से की जा सकती है (जिनमें सुधार हुआ है, लेकिन FF या Webkit की तुलना में अभी भी अच्छे नहीं हैं)।
मुझे नहीं लगता कि फायरबग में विशेष रूप से मौजूद कुछ है लेकिन क्रोम में ऐसा नहीं है कि आप गायब होंगे।
EDIT : यह सच हुआ करता था, लेकिन क्रोम देव टूल्स ने इसे लागू किया।
फायरबग एक पृष्ठ पर भरी हुई सभी लिपियों में खोज कर सकता है। क्रोम देव टूल्स वर्तमान में चयनित स्क्रिप्ट, AFAIK में ही खोज सकते हैं।
जहां तक मैं बता सकता हूं, फायरबग केवल एक है जो एचटीएमएल-कोड और टेक्स्ट लाइव को एडिट कर सकता है जैसा कि आप इसे टाइप करते हैं। बहुत उपयोगी है, यदि आप उदाहरण के लिए यह देखने की कोशिश कर रहे हैं कि पाठ एक कंटेनर में कैसे फिट होगा और एक बार में एक वर्ण जोड़ देगा।
Chrome में जब आप HTML को संपादित करते हैं, तो आपको "संपादन मोड" से बाहर निकलने के लिए TAB या ENTER को दबाना होगा, और अपने पृष्ठ के परिवर्तनों को देखना होगा।
Firebug में आप तुरंत HTML-code भी दर्ज कर सकते हैं। क्रोम में, आपको राइट-क्लिक करना होगा और "HTML संपादित करें" चुनें। अन्यथा, यह <b> बोल्ड </ b> की तरह दिखाई देगा।
मैं वास्तव में क्रोम में बदलाव करना चाहता हूं, क्योंकि यह तेजी से चलता है, लेकिन मेरे लिए लाइव संपादन बहुत महत्वपूर्ण है।
माउस चयन फायरबग महान है, लेकिन मैं इसे क्रोम डेवलपर टूल्स में नहीं ढूंढ सकता।
यह मुझे परेशान करता है क्योंकि मुझे फायरबग में इसके लिए एक गर्म कुंजी नहीं मिल सकती है, जबकि क्रोम में इसका पूरी तरह से अभाव है।
मैं एक noob डेवलपर हूं, इसलिए माउस का उपयोग अभी भी विकसित होने के दौरान सबसे अधिक किया जाता है।
जिस समय यह प्रश्न पूछा गया था कि फायरबग एक जानवर था, लेकिन अब वेब डेवलपर के लिए Chrome डेवलपर टूल (DevTools) काम कर रहे हैं। हालाँकि मैं फायरबग के बारे में नहीं कह रहा हूँ क्योंकि मैंने फ़ायरबग के साथ फ़ायरफ़ॉक्स का उपयोग करके वेब विकास सीख लिया है।
यह वेब विकास के लिए एक महान उपकरण था और इसने DevTools और Firefox के DevTools की सभी प्रमुख विशेषताओं को पेश किया। हालाँकि, मैंने क्रोम DevTools पर स्विच किया, हालांकि वे फायरबग की सभी विशेषताओं को कवर नहीं करते हैं, क्योंकि वे लाइट-वेटेड हैं और फ़ायरबग की तुलना में बहुत तेज़ हैं, लोकलस्टोरेज तक पहुंचना आसानी से परिभाषित है और मेरे विचार से वहां स्रोतों का आयोजन किया जाता है।
यहाँ मैं यह सूचीबद्ध करने जा रहा हूँ कि कैसे फायरबग में विशेषताएं अद्वितीय हैं,
खोज :
फायरबग में खोज विकल्प को अच्छी तरह से परिभाषित किया गया है, क्योंकि इसकी आसानी से पहुंच है और हम केस-संवेदी और नियमित अभिव्यक्ति के साथ कीवर्ड खोज सकते हैं ।
डोम:
डीओएम संरचना को फायरबग में आसानी से विभिन्न फ़िल्टरिंग विकल्पों के साथ पहुँचा जा सकता है जैसे शो यूज़र-डिफ़ाइंड प्रॉपर्टीज़ , शो यूज़र-डिफ़ाइंड फ़ंक्शंस इत्यादि।
कुकीज़:
फायरबग हमें अपनी खुद की कुकीज़ बनाने देता है और कुकीज़ निर्यात करने का प्रावधान देता है ।
नेटवर्क / नेट:
फायरबग में एक नेट पैनल है, जिसे देवटूल नेटवर्क कहते हैं । दोनों संसाधनों और उनकी स्थिति को लोड करने के लिए किए गए सभी अनुरोधों का विश्लेषण करने के लिए उपयोगी हैं। फायरबग में, हम संसाधनों के रिमोट आईपी को आसानी से समझ सकते हैं ।
सूत्रों का कहना है:
भले ही स्रोत संपादित करें DevTools में उपलब्ध हैं, मुझे लगता है कि Firebug स्रोत संपादन का उपयोग करते समय बेहतर है , क्योंकि यदि आप DevTools के भीतर एक CSS फ़ाइल संपादित करना चाहते हैं, तो आपको स्रोत पैनल पर जाना होगा , फिर फ़ाइल खोजने के लिए Ctrl+ दबाएं O। तभी आप फाइल को एडिट कर सकते हैं। फायरबग में आप आसानी से हर मेनू टैब के तहत स्रोत संपादित पा सकते हैं ।
Dojo के लिए समर्थन:
एक बार जब मैं एक डोजो डेवलपर था फायरबग को आसानी से डोजो फायरबग एक्सटेंशन का उपयोग करके डोजो के विकास का समर्थन करने के लिए बढ़ाया गया था ।
वस्तुतः देखा गया फायरबग 2.0 में कई छोटी विशेषताएं हैं, जो क्रोम DevTools नहीं है। उनमें से कुछ यहाँ सूचीबद्ध हैं:
सामान्य
एक "सुविधा" जो प्रयोज्य से परे जाती है वह है फायरबग खुला स्रोत । इसलिए हर कोई इस पर भाग ले सकता है।
कहा जा रहा है कि, Chrome DevTools (साथ ही Firefox DevTools) में Firebug के मुकाबले कई अधिक सुविधाएँ और अन्य छोटे और बड़े फायदे हैं क्योंकि Firebug के पीछे की टीम अन्य DevTools की टीमों की तुलना में बहुत छोटी है।
इसके अलावा, Firebug 3+ अंतर्निहित फ़ायरफ़ॉक्स DevTools में एकीकृत है , जिसका अर्थ है कि वे संस्करण फ़ायरफ़ॉक्स DevTools की सभी विशेषताओं को प्राप्त करते हैं और अतिरिक्त सुविधाएँ जोड़ सकते हैं।
मुझे लगता है कि विकास उपकरण समान हैं लेकिन मुझे क्रोम को कुछ भी कैश नहीं करने के लिए मजबूर करना पड़ा है। यहां तक कि क्रोम "अक्षम कैश" सेटिंग की स्थापना 100% काम नहीं की; मुझे यकीन नहीं है कि क्यों।
मेरे पास फ़ायरफ़ॉक्स / फायरबग के साथ यह समस्या नहीं थी, इसलिए मैं अभी भी इसका उपयोग कर रहा हूं।
मेरे कुछ सेंट जोड़ने ...
क्रोम इंस्पेक्टर सीएसएस गुणों को वर्णानुक्रम में सॉर्ट नहीं कर सकता था जहां फायरबग एक आकर्षण की तरह ऐसा कर सकता था। यह मदद करता है जब आप कुछ सीएसएस तत्व का निरीक्षण करते हैं और इसे हथियाने की आवश्यकता होती है तो फायरबग इस पर काम आता है।
सीएसएस कोडिंग के अच्छे अभ्यास के अनुसार, अपने सीएसएस गुणों को अपने कोड में वर्णानुक्रम से क्रमबद्ध करने के लिए हमेशा बेहतर होता है।
जब आप बहुत सी स्क्रिप्ट से जुड़े प्रोजेक्ट पर काम कर रहे होते हैं। स्क्रिप्ट टैग के तहत फायरबग में आपके पास दिए गए सुझाव बॉक्स में एक js फाइल खोजने का विकल्प होता है। जहां क्रोम के साथ आपके जेएस फाइल को खोजने के लिए लंगड़ा ट्री व्यू होगा, जो आपकी जेएस फाइल के नाम स्थान को देखने और पेड़ को देखने के लिए कठिन है।
यह विकल्प किसी को भी प्रभावित नहीं कर सकता है जो अपने प्रोजेक्ट में कम जेएस फाइलों के साथ शामिल है। यह सुविधा मेरे द्वारा उपयोग की जाने वाली फायरबग के साथ धमाका है जब मेरी स्क्रिप्ट 1000 से अधिक जेएस फाइलें हैं।
लगभग आज स्विच बना, लेकिन मैंने देखा कि मैं क्रोम में संशोधित सीएसएस पर राइट क्लिक नहीं कर सकता हूं और फ़ायरवॉल में नियम या शैली की घोषणाओं की नकल कर सकता हूं। भगवान मुझे लगता है कि फ़ायरफ़ॉक्स अचानक चूसना शुरू नहीं किया था या मुझे यह समस्या नहीं होगी।
मुझे क्रोम देव टूल बहुत पसंद है, लेकिन कुछ समय बाद मैंने फायरबग से इन शक्तिशाली फीचर को याद किया।
"संपादित करें और भेजें" अनुरोध सुविधा
फ़ायरफ़ॉक्स डेवलपर टूल (फायरप्ग में रीप्ले एक्सएचआर या कुछ) में "एडिट एंड रेसेंड" फ़ीचर के साथ, आप अनुरोध हेडर, अनुरोध बॉडी, http विधि और यहां तक कि यूआरएल सहित अनुरोध में परिवर्तन के साथ XHR अनुरोध को फिर से दोहरा सकते हैं। Google Chrome का रिप्ले XHR केवल अनुरोध को फिर से देखता है, और अनुरोध में किसी भी संशोधन की अनुमति नहीं देता है।
जब मुझे इस सुविधा की आवश्यकता होती है तो मैं Firefox Devtools का उपयोग करता हूं।