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?
Odpowiedzi:
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:
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ę.
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).
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ć.
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.
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.
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.
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 .
Obiektywnie widziany Firebug 2.0 ma wiele małych funkcji, których Chrome DevTools nie posiada. Niektóre z nich są wymienione tutaj:
Generał
„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.
Firebug ma możliwość dołączenia innej wtyczki, takiej jak Firecookie . Co do reszty są dość podobne, moim zdaniem chodzi o smak.
chrome.devtoolsinterfejsu API .
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.
Dodaję kilka centów ...
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.
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.
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.
Uwielbiam narzędzie dla programistów Chrome, ale czasami brakowało mi tej potężnej funkcji z Firebug.
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.