Jakie funkcje ma Firebug, których nie mają narzędzia programistyczne Chrome? [Zamknięte]

87

Jestem początkującym programistą stron internetowych i kilka razy polecono mi program Firebug do debugowania. Do tej pory jednak korzystałem tylko z wbudowanych narzędzi programistycznych Chrome. Wydaje się, że robi wszystko, co robi Firebug, i jest czystszy i bardziej zorganizowany jako bonus.

Kiedy jestem bardziej zaawansowany w debugowaniu, czy są funkcje Firebuga, których przegapię w Chrome DevTools? Jeśli tak, to jakie?

Powiązane: Debugger podobny do Firebuga dla Google Chrome

Mateusz
źródło
8
Jestem też stosunkowo nowy w tworzeniu stron internetowych, ale dość szybko zrezygnowałem z Firebug i Firefox tylko dlatego, że Chrome wydawał się o wiele lepszy zarówno jako przeglądarka, jak i zestaw narzędzi programistycznych. Bardziej doświadczeni programiści mogą mieć różne poglądy. W każdym razie koniecznie obejrzyj tegoroczny wykład Google I / O 2010 na temat narzędzi programistycznych Chrome: youtube.com/watch?v=TH7sJbyXHuk
brainjam
Jak na ironię, ci, którzy programują w Google Closure, będą potrzebować Firefoksa do uruchomienia Closure Inspector.
hiperslug

Odpowiedzi:

137

Używałem Firebuga od samego początku i był to dar niebios podobny do wynalezienia ognia. Ale potem pojawił się Chrome ze swoim debugerem i wypróbowałem go. Nadal korzystałem z Firebuga, ale obserwowałem narzędzia deweloperskie Chome i ostatecznie nie mogłem już wymyślić powodu, dla którego nie powinienem przełączać się po dodaniu narzędzi JSON w wersji 12.

Chrome DevTools jest niesamowity, ponieważ ma:

  • Wbudowany analizator osi czasu, profilera i sterty
  • Wbudowane narzędzie Audyt
  • Może uzyskiwać dostęp i edytować pamięć lokalną / sesyjną, pliki cookie, bazy danych SqlLite, WebSQL, AppCache itp.
  • Sniffowanie sieci WebSockets
  • Debugger JS ma kilka dodatkowych funkcji (np. Punkty przerwania WebWorker)
  • Debugger JS pozwala edytować JS w locie i uruchamiać go (JSFiddle bez skrzypiec)
  • Każde okno ma okno devtools, jeśli chcesz; Firebug to singleton
  • Firebug zakłóca działanie strony, spowalniając jej ładowanie i wprowadzając CSS jako funkcję inspektora

AKTUALIZACJA: 2 lata później muszę pogratulować zespołowi Firefoksa za dokonanie ogromnych inwazji. To powiedziawszy, zespół Chrome i debugger dokonują co miesiąc ogromnych postępów, będąc liderem w branży. Zaktualizowałbym powyższą listę, ale szczerze mówiąc, zapełniłaby całą stronę.

Joseph Lust
źródło
5
+1 Na ostatnią część. Kiedyś byłem fanem Firebuga, dopóki nie dokonałem przełącznika.
Robin Carlo Catacutan
4
Pytanie
dotyczyło
1
Po przeczytaniu twojej odpowiedzi zaczęły mi łzawić usta.
Karl
1
Zamierzałem zamieścić komentarz, aby zapytać, jaka część tej listy jest nadal aktualna w 2014 roku. Dobrze zobaczyć listę. Nadal chciałbym sprawdzić, czy jest coś, co jest w Firefoksie, ale nie w Chrome.
Nilesh
czy chrome ma alternatywę dla trybu responsywnego układu (ctrl + shift + m) w przeglądarce Firefox? ponieważ to narzędzie jest niesamowite
Ruben
29

Nie napotkałem funkcji Firebug, której jeszcze nie zauważyłem po przejściu na Chrome.

ceejayoz
źródło
2
+1 za zwięzłą i konkretną odpowiedź.
datasn.io
11

Narzędzia dla programistów Chrome przejęły funkcje Firebuga, więc są tam wszystkie główne funkcje i znajomość (takie jak $0i consoleobiekt).

Istnieje kilka drobnych różnic, na przykład DevTools nie mają panelu CSS (chociaż arkuszami stylów CSS można manipulować w panelu Elementy ).

Narzędzia Chrome mają dodatkowo panele Oś czasu , Profile i Pamięć . Timeline panel loguje załadunek, renderowania CSS i analizowania JavaScript. Profil profile panelowe wykorzystanie zasobów i bagażu panel pokazuje i pozwala na zmiany w bazie danych witryny, lokalne przechowywanie, przechowywanie sesji i ciasteczek.

Wreszcie, oba narzędzia mają swoje własne drobne odchylenia, które sprawiają, że różne działania są nieco łatwiejsze lub trudniejsze. Moja rada jest taka, aby używać Firebug dla Firefoksa i DevTools dla przeglądarek Webkit, ponieważ tylko Firebug Lite działa w Chrome i brakuje mu wielu funkcji, które ma zwykły Firebug (a DevTools są wbudowane w Chrome).

tcooc
źródło
10

Czuję się dużo bardziej komfortowo używając Firebuga. W tej chwili nie mogę wymyślić konkretów, ale czasami próbuję debugować coś w Safari lub Chrome i wygląda na to, że taki PITA, że uruchamiam Firefoksa i szybko robię wszystko.

Zakładka DOM to na plus. Jest bardziej dostępny i lepiej rozplanowany niż odpowiednik Chrome. Wolę również sposób, w jaki DOM i inne obiekty JS są logowane do konsoli w Firebug.

Wtyczki Firebug, takie jak Pixel Perfect, są również bardzo przydatne. Nie wiem, czy takie narzędzie istnieje dla Chrome.

Ogólnie nie ma to znaczenia, ponieważ i tak musisz przetestować w obu przeglądarkach. I IE, więc równie dobrze można go porównać do narzędzi deweloperskich IE (które poprawiły się, ale nadal nie są dobre w porównaniu z FF lub Webkit).

Nie sądzę, aby było coś zaawansowanego, szczególnie w Firebug, ale nie w Chrome, czego będziesz brakować.

JAL
źródło
6

EDYCJA : Kiedyś tak było, ale zaimplementowały to Chrome Dev Tools.

Firebug może wyszukiwać we wszystkich skryptach załadowanych na stronie. Narzędzia Chrome Dev Tools mogą wyszukiwać tylko w aktualnie wybranym skrypcie AFAIK.

Slavo
źródło
Używam firebuga tylko do tej funkcji i Cmd Shift C, aby wybrać element w dowolnym momencie.
mbdev
3
Kiedy napisałem odpowiedź, narzędzia deweloperskie Chrome nie miały tej funkcji. Wdrożyli to od tego czasu. Zobacz tę odpowiedź na jedno z pytań, które zadałem tutaj: stackoverflow.com/a/7970237/1801
Slavo
Slavo go przybił. możesz przeszukiwać wszystkie skrypty (i wszystkie inne zasoby) naraz w Chrome Dev Tools. Po prostu otwórz zakładkę Zasoby i użyj pola wyszukiwania w prawym górnym rogu
Paul
Pole wyszukiwania zniknęło w CDT. Użyj Ctrl + F, aby wyszukać w bieżącym skrypcie i Ctrl + Shift + F, aby wyszukać we wszystkich skryptach
Achil,
4

O ile wiem, Firebug jest jedynym, który może edytować kod HTML i tekst na żywo podczas wpisywania. Bardzo przydatne, jeśli na przykład próbujesz sprawdzić, jak tekst zmieści się w kontenerze i dodawać po jednym znaku na raz.

W przeglądarce Chrome, kiedy edytujesz HTML, musisz nacisnąć TAB lub ENTER, aby wyjść z „trybu edycji” i zobaczyć zmiany na swojej stronie.

W Firebug możesz też od razu wpisać kod HTML. W przeglądarce Chrome musisz kliknąć prawym przyciskiem myszy i wybrać „Edytuj HTML”. W przeciwnym razie będzie oznaczony jako <b> pogrubiony </b>.

Naprawdę chcę przejść na Chrome, ponieważ wydaje się, że działa szybciej, ale edycja na żywo jest dla mnie zbyt ważna.

Niclas
źródło
Myślę, że teraz możesz to zrobić również w Chrome.
Piyush Soni
Chciałbym, żebyś miał rację, ale tak nie jest. Używam najnowszej wersji Chrome 21.0.1180.89. Jakiej wersji używasz? Beta / Canary?
Niclas,
3

Wybór myszy, który ma firebug, jest świetny, ale nie mogę go znaleźć w Narzędziach dla programistów Chrome.

Martwi mnie to, ponieważ nie mogę znaleźć dla niego klawisza skrótu w firebug, podczas gdy chromowi całkowicie go brakuje.

Jestem programistą noob, więc mysz jest nadal używana przez większość czasu podczas programowania.

chudy chłopiec
źródło
3

W czasie, gdy zadano to pytanie, Firebug był bestią, ale teraz narzędzia programistyczne Chrome (DevTools) są przydatne dla twórców stron internetowych. Chociaż nie narzekam na Firebug, ponieważ nauczyłem się tworzenia stron internetowych przy użyciu Firefoksa z Firebug.

To było świetne narzędzie do tworzenia stron internetowych i wprowadziło wszystkie główne funkcje DevTools i DevTools Firefoksa. Jednak przełączyłem się na Chrome DevTools, chociaż nie obejmują one wszystkich funkcji Firebuga, ponieważ są lekkie i znacznie szybsze niż Firebug, dostęp do localStorage jest łatwo zdefiniowany, a źródła są moim zdaniem zorganizowane.

Tutaj wymienię, w jaki sposób funkcje są wyjątkowe w Firebug,

  • Szukaj :

    Opcja wyszukiwania jest dobrze zdefiniowana w Firebug, ponieważ jest łatwo dostępna i możemy wyszukiwać słowa kluczowe z uwzględnieniem wielkości liter i wyrażeń regularnych .

  • DOM:

    Struktura DOM jest łatwo dostępna w Firebug z różnymi opcjami filtrowania, takimi jak Pokaż właściwości zdefiniowane przez użytkownika , Pokaż funkcje zdefiniowane przez użytkownika i tak dalej.

  • Ciasteczka:

    Firebug pozwala nam tworzyć własne pliki cookie i umożliwia eksportowanie plików cookie .

  • Sieć / sieć:

    Firebug posiada netto panel ubezpieczeniowy z DevTools nazywają go Network . Oba są przydatne do analizowania wszystkich żądań załadowania zasobów i ich stanu. W Firebug możemy łatwo uchwycić zdalny adres IP zasobów .

  • Źródła:

    Mimo że Source Edit jest dostępny w DevTools, czuję, że Firebug jest lepszy podczas korzystania z Source Edit , ponieważ jeśli chcesz edytować plik CSS w DevTools, musisz przejść do panelu Źródła , a następnie nacisnąć Ctrl+, Oaby znaleźć plik. Dopiero wtedy możesz edytować plik. W Firebug możesz łatwo znaleźć Edycję źródła pod każdą zakładką menu.

  • Wsparcie dla dojo:

    Kiedyś byłem programistą dojo, Firebug był łatwo rozszerzany, aby wspierać rozwój dojo za pomocą rozszerzenia Dojo Firebug .

Vijin Paulraj
źródło
2

Obiektywnie widziany Firebug 2.0 ma wiele małych funkcji, których Chrome DevTools nie posiada. Niektóre z nich są wymienione tutaj:

Panel konsoli

  • Wyświetla żądania XMLHttpRequests, w tym wszystkie informacje o żądaniu
  • Wyświetla zmiany w plikach cookie
  • Więcej funkcji API wiersza poleceń
  • Oddzielny edytor poleceń

Panel HTML

Panel CSS

Panel DOM

  • Wyświetla wszystkie właściwości DOM w jednym miejscu
  • Wyświetla zamknięcia
  • Pozwala filtrować wyświetlanie według właściwości, funkcji itp.

Panel siatkowy

  • Pozwala zatrzymać się na XmlHTTPRequests
  • Pokazuje informacje o pamięci podręcznej na żądanie

CiasteczkaPanel

  • Twórz i edytuj pliki cookie
  • Kontrola uprawnień do plików cookie
  • Pokazuje surowy i sformatowany rozmiar plików cookie
  • Pozwala zatrzymać wykonywanie skryptu przy zmianie pliku cookie
  • Eksportuj pliki cookie w standardowym formacie

Generał

  • Otwórz HTML, CSS i JavaScript w zewnętrznym edytorze
  • Pozwala dostosować skróty

„Cechą” wykraczającą poza użyteczność jest to, że Firebug jest oprogramowaniem typu open source . Aby każdy mógł w tym uczestniczyć.

To powiedziawszy, Chrome DevTools (a także Firefox DevTools) mają o wiele więcej funkcji i inne mniejsze i większe zalety w porównaniu z Firebug, ponieważ zespół stojący za Firebug jest bardzo mały w porównaniu do zespołów stojących za innymi DevTools.

Ponadto Firebug 3+ integruje się z wbudowanym programem Firefox DevTools , co oznacza, że ​​te wersje dziedziczą wszystkie funkcje Firefox DevTools i mogą dodawać dodatkowe funkcje.

Sebastian Zartner
źródło
1

Firebug ma możliwość dołączenia innej wtyczki, takiej jak Firecookie . Co do reszty są dość podobne, moim zdaniem chodzi o smak.

HoLyVieR
źródło
Narzędzia programistyczne Chrome można również rozszerzyć za pomocą chrome.devtoolsinterfejsu API .
Rob W,
1

dodaj również, że może xopy XPATH dodać selektor CSS dla elementu HTML.

TO jest czasami bardzo przydatne! :))) hahaha

Andr
źródło
1

Myślę, że narzędzia programistyczne są podobne, ale miałem problem z zmuszeniem Chrome, aby niczego nie buforował. Nawet ustawienie „Wyłącz pamięć podręczną” w Chrome nie działało w 100% przypadków; Nie wiem dlaczego.

Nie miałem tego problemu z Firefox / Firebug, więc nadal go używam.

rzymski
źródło
1

Dodaję kilka centów ...

  1. Chrome Inspector nie mógł sortować właściwości CSS alfabetycznie, podczas gdy Firebug mógłby to zrobić jak urok. Pomaga, gdy sprawdzisz jakiś element css i musisz go pobrać Firebug jest w tym przydatny.

    Zgodnie z dobrą praktyką kodowania CSS, zawsze lepiej jest posortować właściwości CSS w kodzie alfabetycznie.

  2. Kiedy pracujesz nad projektem, w którym jest dużo skryptów. W firebug pod tagiem script masz możliwość wyszukania pliku js w podanym polu sugestii. Podobnie jak w przypadku chrome, będziesz miał kiepski widok drzewa, aby zlokalizować plik JS, co jest żmudne, aby zobaczyć przestrzeń nazw pliku js i przejść przez drzewo.

    Ta opcja może nie wpłynąć na nikogo, kto zajmuje się małymi plikami JS w swoim projekcie. Ta funkcja jest strzałem w dziesiątkę w przypadku firebuga, którego używam, gdy moje skrypty mają więcej niż 1000 plików JS.

Ravi
źródło
0

Prawie dokonałem zmiany dzisiaj, ale zauważyłem, że nie mogę kliknąć prawym przyciskiem myszy zmodyfikowanego CSS w Chrome i skopiować deklaracji reguły lub stylu, tak jak mogę w programie firebug. BÓG Żałuję, że Firefox nie zaczął nagle ssać, bo inaczej nie miałbym tego problemu.

Banowanie
źródło
Właśnie zauważyłem, że w Chrome nie można używać klawiszy strzałek i przewijać różnych opcji atrybutu.
Banowanie
0

Za pomocą debugera chrome mogę debugować jsni mojego projektu GWT, w którym FireBug po prostu pokazuje anonimową funkcję i tak naprawdę w ogóle nie rozpoznaję funkcji rzeczywistej.

Asimov
źródło
0

Uwielbiam narzędzie dla programistów Chrome, ale czasami brakowało mi tej potężnej funkcji z Firebug.

  • Warunkowy punkt przerwania : wstrzymaj tylko w określonych warunkach.
  • Rejestrowanie wywołań funkcji : zaznacz funkcję i zobacz wszystko, co chcesz wiedzieć w konsoli.
  • Przerwij przy zmianie właściwości : Zaznacz obiekty, a debugger zatrzyma się, jeśli właściwość zostanie zmieniona.
Ritesh Chandora
źródło
0

Funkcja żądania „Edytuj i wyślij ponownie”

Dzięki funkcji „Edytuj i wyślij ponownie” w narzędziach Firefox Developer (Replay XHR lub coś w Firebug), możesz ponownie odtworzyć żądanie XHR ze zmianami w żądaniu, w tym nagłówkami żądania, treścią żądania, metodą http, a nawet adresem URL. Replay XHR przeglądarki Google Chrome po prostu odtwarza żądanie i nie pozwala na żadne modyfikacje żądania.

Używam Firefox Devtools, kiedy potrzebuję tej funkcji.

Gaurang Patel
źródło