Google Chrome फायरबग के बराबर क्या है?


29

मैं एक उपकरण की तलाश कर रहा हूँ जो कर सकता है:

  • HTML तत्वों का निरीक्षण करें
  • जावास्क्रिप्ट का प्रबंधन / डीबग करें
  • प्रोफ़ाइल प्रदर्शन
  • वास्तविक समय में तत्वों को संशोधित करें

जवाबों:


32

यह पेज [पेपर] -> डेवलपर -> डेवलपर टूल (Chrome v5 और अंडर में) में बनाया गया है। यह v6 में भिन्न होने की संभावना है क्योंकि पृष्ठ बटन उस संस्करण में गायब हो रहा है।


3
Google के टूल में कुछ कमियां हैं - ajax के अनुरोधों को देखना उतना आसान नहीं है, कोई भी ऐसा मल्टीलाइन मोड नहीं है जो सुविधाजनक हो, आप HTML को किसी विंडो में संपादित नहीं कर सकते, यह HTML ट्री में होवर पर पैडिंग / मार्जिन नहीं दिखाता है, आप बस वास्तविक DOM (केवल HTML ट्री) पर नेविगेट नहीं कर सकते हैं और अंतिम लेकिन कम से कम, मैं सीएसएस एडिटिंग फीचर्स को सिर्फ क्लंकियर पाता हूं - एक चीज के लिए Google में कोई स्वत: पूर्ण नहीं है। यह अभी भी बहुत उपयोगी है, लेकिन फायरबग सिर्फ बेहतर है।
cgp

2
या आलसी :) के लिए पाली-ctrl-मैं
टिम पोस्ट

1
@ मर्क नोट, मैं 5.0.375.99 का उपयोग कर रहा हूं। मुझे यकीन नहीं है कि यह अभी या भविष्य में एक फर्क पड़ता है।
इवान प्लाइस

1
V6 में यह रिंच है -> टूल्स -> डेवलपर टूल्स
एनोब्रेव

17

राइट-क्लिक करें -> तत्व का निरीक्षण करें



5

मूल प्रश्न पूछे हुए 4 साल हो चुके हैं। क्रोम (स्थिर) अब संस्करण 38 पर है। लंबे समय से इसमें डेवलपर टूल्स का एक पूरा सेट शामिल किया गया है जो फ़ायरफ़ॉक्स के लिए फ़ायरबग के लगभग बराबर हैं (हालांकि संयोग से फ़ायरफ़ॉक्स में एक अंतर्निहित इंस्पेक्टर भी है)।

Chrome के डेवलपर टूल में कुछ चीजें आपको करने की अनुमति देती हैं:

  • DOM का निरीक्षण करें
  • CSS का निरीक्षण करें
  • एक जावास्क्रिप्ट कंसोल पर पहुँचें
  • डीबग जावास्क्रिप्ट
  • नेटवर्क अनुरोध, समय और प्रतिक्रियाएं देखें
  • प्रतिपादन, जावास्क्रिप्ट और सीएसएस प्रदर्शन देखें
  • स्थानीय भंडारण और कुकीज़ का निरीक्षण करें

देव टूल्स को विभिन्न तरीकों से एक्सेस किया जा सकता है।

  • क्रोम मेनू -> उपकरण -> डेवलपर उपकरण

  • Ctrl+ Shift+ Iविंडोज में या Cmd+ एक मैक पर Shift+I

  • F12 विंडोज पर

  • एक पृष्ठ पर कहीं भी राइट-क्लिक करें और निरीक्षण तत्व का चयन करें


3

इन-ब्राउज़र टूल अपनी नौकरी में महान हैं और आमतौर पर आपकी सबसे अच्छी पहली पसंद हैं, लेकिन कभी-कभी वे HTTP अनुरोध / प्रतिक्रिया पेलोड पर पर्याप्त तकनीकी विवरण प्रदान नहीं करते हैं, या बहुत पृष्ठ-विशिष्ट हैं।

इन मामलों में, आप पा सकते हैं कि एक समर्पित HTTP निरीक्षण उपकरण जैसे कि फिडलर या लिनक्स विकल्प में से एक अधिक जानकारी प्रदान करेगा।

यदि आपको वास्तव में नंगे-धातु प्राप्त करने की आवश्यकता है, तो Wireshark पूर्ण नेटवर्क ट्रैफ़िक विश्लेषण के लिए HTTP से आगे निकल जाता है, लेकिन पहले से ही अभिभूत होने के लिए तैयार रहें।


मैं यह नहीं कह सकता कि मैं फिडलर से परिचित हूं, लेकिन विंडशार्क निश्चित रूप से अत्यधिक नंगे-धातु हैं। अगर आपको निचले स्तर के प्रोटोकॉल विवरण देखने की आवश्यकता है, तो Wireshark वास्तव में केवल उपयोगी है।
इवान प्लाइस

फिडलर प्रयोज्यता के लिए फायरबग / क्रोम डेवलपर टूल्स के करीब है। उन स्थानों में से एक जो मुझे सबसे अधिक उपयोगी लगी, वह है जब मेरी वेबसाइट पर केएमएल फाइलें प्रकाशित करना; आप Google डेस्कटॉप जैसे विंडोज़ डेस्कटॉप अनुप्रयोगों से अनुरोधों और प्रतिक्रियाओं को देख सकते हैं, न कि केवल वेब ब्राउज़र। मैंने कुछ समय के लिए विंडशार्क का उपयोग किया है, लेकिन सहमत हूं कि यह आम तौर पर दिन-प्रतिदिन के वेबमास्टर सामान के लिए उपयोगी नहीं है।
जेसनबिरच

1

आप Google के ओपन सोर्स स्पीड ट्रेसर - http://code.google.com/webtoolkit/speedtracer/ को भी आज़मा सकते हैं

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

स्पीड ट्रेसर का उपयोग करके आप अपने आवेदन में समय कहाँ बिताया जा रहा है, इसकी बेहतर तस्वीर प्राप्त करने में सक्षम हैं। इसमें जावास्क्रिप्ट पार्सिंग और निष्पादन, लेआउट, CSS शैली पुनर्गणना और चयनकर्ता मिलान, DOM ईवेंट हैंडलिंग, नेटवर्क संसाधन लोडिंग, टाइमर फायर, XMLHttpRequest कॉलबैक, पेंटिंग, और बहुत सारी समस्याएं शामिल हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.