Google Chrome के लिए फायरबग-जैसे डिबगर

278

क्या फायरबग जैसी कोई चीज है जिसे आप Google Chrome के भीतर उपयोग कर सकते हैं?

आवश्यक सुविधाएँ जो मैं चाहूंगा:

HTML स्रोत का निरीक्षण करें (तत्वों का चयन करें, उन्हें हटाएं, आदि)
CSS मानों की जाँच करें (अंतर्निहित समाधान अजीब है, किसी तरह)

9

यह देखते हुए कि क्रोम अब एक्सटेंशन का समर्थन करता है, क्या हम इसे फिर से देख सकते हैं क्योंकि मौजूदा कई उत्तर तकनीकी रूप से गलत हैं। हमें एक नया शुरू करने के बजाय इस उत्तर को अपडेट करना चाहिए।

— नाथन कोप

3

@ नथन कोप: मैं गलत हो सकता हूं, लेकिन मुझे नहीं लगता कि फायरबग जैसी किसी चीज़ की अनुमति देने के लिए क्रोम एक्सटेंशन सिस्टम काफी शक्तिशाली है।

— साशा चोडगोव

1

: इस लिंक की जाँच ब्राउज़र पर फ़ायरबग पाने के लिए getfirebug.com/releases/lite/chrome

— तकनीकी विशेषज्ञ

243

क्रोम में पहले से निर्मित एक फायरबग जैसा उपकरण है। बस एक पृष्ठ पर कहीं भी राइट क्लिक करें और मेनू से "निरीक्षण तत्व" चुनें। Chrome में डीबगिंग (जैसे Firebug) के लिए एक ग्राफ़िकल टूल है, जिससे आप JavaScript को डीबग कर सकते हैं। यह सीएसएस निरीक्षण भी अच्छी तरह से करता है और यहां तक कि मक्खी पर सीएसएस प्रतिपादन भी बदल सकता है।

अधिक जानकारी के लिए, https://developers.google.com/chrome-developer-tools/ देखें

— दिमित्री तोरबा
स्रोत

19

++ यह क्रोम-विशिष्ट समस्याओं के निवारण के लिए पर्याप्त है। अगर मुझे गहन आत्मनिरीक्षण चाहिए, तो मैं इसे फायरबग के साथ कर सकता हूं। अब IE8 के नए डेवलपर मोड के साथ, सभी प्रमुख ब्राउज़रों में अंतर्निहित देव मोड हैं। अच्छा समय।

— बंदूकों

1

आह, मुझे इसे खोजने के लिए थोड़ा सा लगा, लेकिन फ़ायरबग का html संपादन कार्यक्षमता वहाँ भी है, उसी जगह पर आप सीएसएस को संपादित कर सकते हैं, डेवलपर टूलबार, एक तत्व पर डबल क्लिक करें, और हिट दर्ज करें, और वहां तुम जाओ, html संपादित किया।

— क्ज़िकई

4

Chrome डेवलपर टूल (ctrl + shift + j) फायरबग की तरह जावास्क्रिप्ट डिबगिंग का समर्थन करता है। स्क्रिप्स टैब पर फिर दूसरे आइकन पर नीचे (> =) पर क्लिक करें, जिसमें "शो कंसोल" का टूलटिप है। वहाँ से आप फायरबग कंसोल की तरह जावास्क्रिप्ट कमांड निष्पादित कर सकते हैं।

— पियरे-एंटोनी लाफैटे

1

कुछ लिनक्स-आधारित प्रणाली पर याद रखें जो स्वचालित रूप से इंस्टॉल नहीं होती है, इसलिए आपको इसे मैन्युअल रूप से इंस्टॉल करने की आवश्यकता है: sudo apt-get install क्रोमियम-ब्राउज़र-इंस्पेक्टर

— मैनुअल

1

वर्तमान देव बिल्ड 4.0.xxxx में डेवलपर टूल का एक सेट है। मैं पहले तत्वों के सामान के बारे में जानता था, लेकिन "नेट" पैनल के बिना यह पर्याप्त अच्छा नहीं था। लेकिन अब एक "संसाधन" पैनल है जो लगता है कि बहुत अच्छा काम कर रहा है और इसमें फायरबग (स्क्रिप्ट, xhr, चित्र, आदि) के समान सभी फिल्टर हैं। मैं एक सप्ताह के लिए देव निर्माण का उपयोग कर रहा हूं और यह बहुत स्थिर लगता है। मैंने अंत में अपने डिफ़ॉल्ट ब्राउज़र को क्रोम पर सेट किया है - अब यह मेरा देव ब्राउज़र भी है! :)

— मार्क जे मिलर

37

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

http://getfirebug.com/lite.html

— gregers
स्रोत

बढ़िया लिंक! IE संस्करण के बारे में पता नहीं था

— पैट्रिक Desjardins

15

बस कुछ बात करने वाले बिंदुओं को जोड़ना, जो हर दिन फायरबग / क्रोम इंस्पेक्टर का उपयोग करता है:

लेखन के समय, केवल Google DOM इंस्पेक्टर है और नहीं, इसमें Firebug की सभी सुविधाएँ नहीं हैं
इंस्पेक्टर फायरबग का एक 'लाइट' संस्करण है: इंटरफ़ेस उतना अच्छा IMO नहीं है, हाल के दोनों संस्करणों में तत्व निरीक्षण अब क्लूनी है, लेकिन फायरबग अभी भी बेहतर है; मैं खुद को क्रोम के लिए प्यार खोजने की कोशिश कर रहा हूं (क्योंकि यह एक बेहतर, तेज ब्राउज़र अनुभव है), लेकिन विकास कार्य के लिए, यह अभी भी मेरे लिए बेकार है।
DOM / CSS का लाइव पूर्वावलोकन / संशोधन अभी भी फायरबग में बेहतर है; फायरबग में गणना सीएसएस और बॉक्स मॉडल दृश्य बेहतर हैं;
किसी तरह कई प्रमुख क्षेत्रों में दस्तावेज़ को नेविगेट करने, हेरफेर करने / संशोधित करने में आसानी के कारण शायद फायरबग को पढ़ना / उपयोग करना आसान है। कौन जाने। मैं इंटरफ़ेस के लिए उपयोग किया जाता हूं और मुझे लगता है कि क्रोम इंस्पेक्टर उतना अच्छा नहीं है, हालांकि यह एक व्यक्तिपरक चीज है जिसे मैं स्वीकार करता हूं।
फायरबग में कुकीज़ / नेट टैब मेरे लिए बेहद उपयोगी हैं। शायद क्रोम इंस्पेक्टर के पास अब यह है? पिछली बार मैंने इसे चेक किया था, क्योंकि क्रोम आपके हस्तक्षेप के बिना पृष्ठभूमि में खुद को अपडेट करता है (सभी अच्छे ओवरलोडर्स की तरह डिफ़ॉल्ट रूप से आपकी सहमति प्राप्त करता है)।
अंतिम बिंदु: दिन है कि गूगल क्रोम हो जाता है एक पूरी तरह से विशेष रुप से प्रदर्शित Firebug दिन फ़ायरफ़ॉक्स मूल रूप से डेवलपर्स के लिए मर जाता है क्योंकि फ़ायरफ़ॉक्स फ़ायरफ़ॉक्स के लेआउट इंजन बनाने के लिए 3 साल के लिए किया था है छिपकली जितनी जल्दी वेबकिट और उन्होंने ऐसा नहीं किया। खेद है कि इसे इतनी सफाई से रखा जाए लेकिन यह सच्चाई है।

आप देखते हैं, अब हर कोई मोबाइल एक्सेसिबिलिटी और इंटरएक्टिविटी (iPhone, iPad, Android) से प्रेरित jQuery के बदले में फ्लैश से दूर जाना चाहता है और जावास्क्रिप्ट 'अचानक' एक बड़ी बात है (यह कटाक्ष है), ताकि जहाज जहाज से चला गया है, फ़ायरफ़ॉक्स। और यह मुझे दुखी करता है, एक मोज़िला प्रशंसक के रूप में। फ़ायरफ़ॉक्स अपने जावास्क्रिप्ट इंजन को अपग्रेड करने तक क्रोम केवल एक बेहतर ब्राउज़र है।

— negutron
स्रोत

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

— फियो अर्कार Lwin

14

F12

मुझे शॉर्ट्स बहुत पसंद हैं

— Angel.King.47
स्रोत

6

एक आदमी ने ctrl shift j :) डाला

— Vishal Sharma

12

इसे आज़माएं, इसे फ़ायरबग लाइट कहा जाता है और जाहिरा तौर पर क्रोम के बीटा संस्करण के साथ काम करता है।

आप इसे यहां भी पा सकते हैं: https://chrome.google.com/extensions/

— Teekin
स्रोत

यह Chrome के लिए एक आधिकारिक एक्सटेंशन है

— वेबनेट

9

आप इस बुकमार्कलेट को अपने "बुकमार्क्स बार" में सेट कर सकते हैं ताकि फ़ायरबग लाइट हमेशा क्रोम / क्रोमियम ब्राउज़र में उपलब्ध हो (इसे URL के रूप में डालें):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

— मैनुएल
स्रोत

4

या उपयोगकर्ता स्क्रिप्ट आज़माएं: http://dev.chromium.org/developers/design-documents/user-scripts

— kenorb
स्रोत

4

jQuerify क्रोम कंसोल में jQuery एम्बेड करने के लिए सही विस्तार है और जितना आप कल्पना कर सकते हैं उतना सरल है। यह एक्सटेंशन यह भी इंगित करता है कि क्या jQuery पहले से ही एक पेज में एम्बेड किया गया है।

इस एक्सटेंशन का उपयोग jQuery को आपके इच्छित पेज पर एम्बेड करने के लिए किया जाता है। यह कंसोल शेल में jQuery का उपयोग करने की अनुमति देता है (आप क्रोम कंसोल को Ctrl+ द्वारा इनवॉइस कर सकते हैंShift + j" ।)।

चयनित टैब में jQuery एम्बेड करने के लिए एक्सटेंशन बटन पर क्लिक करें।

— एंड्री
स्रोत

4

आधिकारिक फायरबग क्रोम एक्सटेंशन या आप स्वयं एक्सटेंशन डाउनलोड और पैकेज कर सकते हैं।

https://getfirebug.com/releases/lite/chrome/

— joshatjben
स्रोत

2

सिर्फ स्पष्टता के लिए: यह फायरबग लाइट एक्सटेंशन है, फायरबग एक्सटेंशन नहीं है।

— न्यूरोस्कार

पहले दिया गया लिंक टूट गया था। कृपया इस उत्तर को एक नई कड़ी के साथ अपडेट करें।

— रॉब ह्रस्का

3

खैर, Google Chrome के लिए Greasemonkey स्क्रिप्ट को सक्षम करना संभव है, इसलिए शायद इस विधि का उपयोग करके फायरबग को स्थापित करने का एक तरीका है? फायरबग लाइट भी काम करेगा, लेकिन यह पूरी तरह से चित्रित एक का उपयोग करने जैसा नहीं है :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

— पीटर मोर्टेंसन
स्रोत

3

यह आपके प्रश्न का उत्तर नहीं देता है, लेकिन यदि आपने इसे याद किया है, तो क्रिस पेडरिक वेब डेवलपर अब क्रोम के लिए उपलब्ध है: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnnhhhm ।

— सैम डटन
स्रोत

3

सब कुछ भूल जाओ तुम सब इस ब्राउज़र स्वतंत्र निरीक्षक, डोम updater की जरूरत है

https://goggles.webmaker.org/en-US

बस बुकमार्क करें और किसी भी वेबपेज पर जाएं और उस बुकमार्क पर क्लिक करें।

यह वास्तव में मोज़िला परियोजना गॉगल्स है, अद्भुत अद्भुत अद्भुत ...

— विशाल शर्मा
स्रोत

वे इसे बंद कर रहे हैं।

— स्टेव मोरेट

3

F12 (केवल लिनक्स और विंडोज पर)

या

Ctrl ⇧ I

( ⌥ ⌘ Iयदि आप मैक पर हैं)

— siannone
स्रोत

2

कृपया Google Chrome के लिए Firebug Lite आज़माएं

— रईस हुसैन
स्रोत

1

यदि आप रात के समय पीपा का उपयोग करके उबंटू पर क्रोमियम का उपयोग कर रहे हैं, तो आपके पास होना चाहिए chromium-browser-inspector

— रोरी
स्रोत