Debuger podobny do Firebug dla Google Chrome


278

Czy jest coś takiego jak Firebug, którego można używać w przeglądarce Google Chrome?

Najważniejsze cechy, które chciałbym:

  • Sprawdź źródło HTML (wybierz elementy, usuń je itp.)
  • sprawdź wartości CSS (jakoś wbudowane rozwiązanie jest dziwne)

9
Widząc, że Chrome obsługuje teraz rozszerzenia, możemy to powtórzyć, ponieważ wiele istniejących odpowiedzi jest teraz technicznie niepoprawnych. Powinniśmy zaktualizować tę odpowiedź zamiast rozpocząć nową.
Nathan Koop

3
@Nathan Koop: Mogę się mylić, ale nie sądzę, że system rozszerzeń Chrome jest na tyle potężny, że pozwala na coś takiego jak Firebug.
Sasha Chedygov

1
sprawdź ten link, aby pobrać firebug w przeglądarce: getfirebug.com/releases/lite/chrome
Techie

Odpowiedzi:


243

W Chrome jest już narzędzie podobne do Firebuga. Kliknij prawym przyciskiem myszy dowolne miejsce na stronie i wybierz z menu opcję „Sprawdź element”. Chrome ma graficzne narzędzie do debugowania (jak w Firebug), dzięki czemu możesz debugować JavaScript. Sprawdza również dobrze CSS, a nawet może zmieniać renderowanie CSS w locie.

Aby uzyskać więcej informacji, zobacz https://developers.google.com/chrome-developer-tools/


19
++ Jest to wystarczające rozwiązanie problemów związanych z Chrome. Jeśli chcę głębszej introspekcji, mogę to zrobić za pomocą Firebug. Teraz w nowym trybie programistycznym IE8 wszystkie główne przeglądarki mają wbudowane tryby programistyczne. Dobre czasy.
pistolety

1
Ach, zajęło mi to trochę, aby go znaleźć, ale funkcjonalność edycji HTML w Firebug jest również dostępna, w tym samym miejscu, w którym możesz edytować css, pasek narzędzi programisty, dwukrotnie kliknąć element, typ i nacisnąć enter, i tam idziesz, edytowany HTML.
Kzqai

4
Narzędzia programistyczne Chrome (ctrl + shift + j) obsługują debugowanie Javascript, takie jak Firebug. Kliknij kartę Skrypty, a następnie drugą ikonę u dołu (> =), która zawiera etykietkę „Pokaż konsolę”. Stamtąd możesz wykonywać polecenia JavaScript, takie jak konsola Firebug.
Pierre-Antoine LaFayette

1
Pamiętaj, że w niektórych systemach opartych na systemie Linux nie instaluje się automatycznie, więc musisz zainstalować go ręcznie: sudo apt-get install chromium-browser-inspector
Manuel

1
Obecna wersja deweloperska 4.0.xxxx ma zestaw narzędzi programistycznych. Wcześniej wiedziałem o elementach sprawdzających elementy, ale bez panelu „Net” nie było to wystarczająco dobre. Ale jest teraz panel „zasobów”, który wydaje się działać całkiem dobrze i ma wszystkie te same filtry co firebug (skrypty, xhr, obrazy itp.). Używam wersji Dev przez tydzień i wydaje się dość stabilna. Właśnie w końcu ustawiłem domyślną przeglądarkę na chrome - teraz jest to również moja przeglądarka deweloperska! :)
Mark J Miller,

37

Firebug Lite obsługuje sprawdzanie elementów HTML, obliczonego stylu CSS i wiele więcej. Ponieważ jest to czysty JavaScript, działa w wielu różnych przeglądarkach. Po prostu dołącz skrypt do źródła lub dodaj bookmarklet do paska zakładek, aby umieścić go na dowolnej stronie jednym kliknięciem.

http://getfirebug.com/lite.html


Świetny link! Nie wiedziałem o wersji IE
Patrick Desjardins

15

Po prostu dodając kilka punktów do rozmowy jako ktoś, kto korzysta z Firebug / Chrome Inspector na co dzień:

  1. W chwili pisania tego tekstu jest tylko inspektor DOM Google i nie, nie ma wszystkich funkcji Firebug

  2. Inspector to „lite” wersja Firebug: Interfejs nie jest tak dobry IMO, kontrola elementów w obu ostatnich wersjach jest teraz niezgrabna, ale Firebug jest jeszcze lepszy; Próbuję znaleźć miłość do Chrome (ponieważ jest to lepsza, szybsza przeglądarka), ale do prac programistycznych wciąż jest dla mnie do kitu.

  3. Podgląd na żywo / modyfikacja DOM / CSS jest wciąż znacznie lepszy w Firebug; obliczony CSS i widok modelu pudełka są lepsze w Firebug;

  4. Jakoś łatwiej jest czytać / używać Firebuga, może ze względu na łatwość nawigacji, manipulacji / modyfikacji dokumentu w kilku kluczowych obszarach? Kto wie. Jestem przyzwyczajony do interfejsu i myślę, że Chrome Inspector nie jest tak dobry, chociaż przyznaję, że jest to subiektywna rzecz.

  5. Karta Pliki cookie / sieć są dla mnie bardzo przydatne w Firebug. Może Chrome Inspector ma to teraz? Ostatnim razem sprawdziłem, że nie, ponieważ Chrome aktualizuje się w tle bez Twojej interwencji (domyślnie dostaje twoją zgodę, jak wszyscy dobrzy panowie).

  6. Ostatni punkt: dzień, w którym Google Chrome otrzyma w pełni funkcjonalny Firebug, to dzień, w którym Firefox zasadniczo umiera dla programistów, ponieważ Firefox miał 3 lata na uczynienie silnika układu Firefoksa Gecko tak szybkim jak WebKit, a nie zrobili tego. Przepraszam, że tak otwarcie to wyrażam, ale to prawda.

Widzicie, teraz każdy chce odejść od Flasha zamiast jQuery motywowanego mobilnością i interaktywnością (iPhone, iPad, Android), a JavaScript to „nagle” wielka sprawa (to sarkazm), więc statek wypłynął, Firefox. I to mnie smuci, jako fan Mozilli. Chrome jest po prostu lepszą przeglądarką, dopóki Firefox nie zaktualizuje silnika JavaScript.


Firefox idzie w dół. Na dzień dzisiejszy (2013) devtools chrome są znacznie potężniejsze niż firebug ... a firefox koncentruje swoje wysiłki na Firefox OS, który nie jest nawet zbliżony do Androida frodo .. nawet nie włożyli wiele wysiłku w tworzenie js i renderowania szybciej.
Phyo Arkar Lwin



9

Możesz ustawić tę bookmarklet na swoim „pasku zakładek”, aby Firebug Lite zawsze był dostępny w przeglądarce Chrome / Chromium (wstaw jako adres 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

jQuerify to idealne rozszerzenie do osadzenia jQuery w konsoli Chrome i jest tak proste, jak możesz sobie wyobrazić. To rozszerzenie wskazuje również, czy jQuery zostało już osadzone na stronie.

To rozszerzenie służy do osadzenia jQuery na dowolnej stronie. Pozwala na użycie jQuery w powłoce konsoli (konsolę Chrome można wywołać za pomocą Ctrl+ Shift+j ”.).

Aby osadzić jQuery w wybranej zakładce, kliknij przycisk rozszerzenia.



3

Możliwe jest włączenie skryptów Greasemonkey dla Google Chrome, więc może istnieje sposób na zainstalowanie Firebug za pomocą tej metody? Firebug Lite również by działał, ale to nie jest to samo uczucie, co w przypadku korzystania z pełnej wersji :(

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



3

Zapomnij o wszystkim, czego potrzebujesz, ten niezależny od przeglądarki inspektor, dom Updater

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

po prostu dodaj zakładkę i przejdź do dowolnej strony internetowej i kliknij tę zakładkę ..

to właściwie Gogle projektu Mozilli, niesamowite niesamowite niesamowite ...


Zamykają to.
steve moretz

3

F12 (tylko w systemie Linux i Windows)

LUB

Ctrl I

( Ijeśli korzystasz z komputera Mac)



1

Jeśli używasz Chromium na Ubuntu przy użyciu nocnego ppa, powinieneś mieć chromium-browser-inspector

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.