Czym jest Google Chrome jako odpowiednik Firebug?

29

Szukam narzędzia, które może:

sprawdzaj elementy HTML
zarządzaj / debuguj JavaScript
wydajność profilu
modyfikuj elementy w czasie rzeczywistym

— Evan Plaice
źródło

32

Jest wbudowany. Strona [papier] -> Deweloper -> Narzędzia programistyczne (w Chrome w wersji 5 i starszej). Prawdopodobnie będzie inaczej w wersji 6, ponieważ przycisk Strona wydaje się znikać w tej wersji.

— Mark Hatton
źródło

3

Narzędzie Google ma pewne wady - przeglądanie żądań ajax nie jest tak łatwe, nie ma wygodnego trybu wieloliniowego, nie możesz edytować HTML w oknie, nie wyświetla dopełnienia / marginesów po najechaniu myszką w drzewie HTML, po prostu nie możesz poruszać się po rzeczywistym DOM (tylko drzewo HTML) i wreszcie, uważam, że funkcje edycji CSS są po prostu bardziej skomplikowane - w Google nie ma autouzupełniania. Nadal jest bardzo użyteczny, ale Firebug jest po prostu lepszy.

— cgp

2

Lub shift-ctrl-I dla leniwych :)

— Tim Post

1

@ Uwaga Uwaga, używam 5.0.375.99. Nie jestem jednak pewien, czy to robi różnicę teraz czy w przyszłości.

— Evan Plaice,

1

W wersji 6 jest to Klucz -> Narzędzia -> Narzędzia dla programistów

— enobrev

17

Kliknij prawym przyciskiem myszy -> Sprawdź element

— HoLyVieR
źródło

13

Firebug Lite dla Google Chrome .

— Emmett
źródło

FireBug Lite to świetne narzędzie, które działa również w przeglądarkach IE, Opera, Safari i Firefox: getfirebug.com/firebuglite

— Nat

5

Minęły 4 lata od momentu zadania pierwotnego pytania. Chrome (stabilny) jest teraz w wersji 38. Od dłuższego czasu zawiera pełny zestaw narzędzi programistycznych, które są mniej więcej równoważne Firebugowi dla Firefoksa (chociaż nawiasem mówiąc, Firefox ma również wbudowanego inspektora ).

Kilka narzędzi Chrome dla programistów umożliwia:

Sprawdź DOM
Sprawdź CSS
Uzyskaj dostęp do konsoli JavaScript
Debuguj JavaScript
Wyświetl żądania sieciowe, czasy i odpowiedzi
Zobacz wydajność renderowania, JavaScript i CSS
Sprawdź lokalne przechowywanie i pliki cookie

Dostęp do narzędzi programistycznych można uzyskać na wiele sposobów.

Menu Chrome -> Narzędzia -> Narzędzia dla programistów
Ctrl+ Shift+ Iw systemie Windows lub Cmd+ Shift+ Ina komputerze Mac
F12 w systemie Windows
Kliknij prawym przyciskiem myszy dowolne miejsce na stronie i wybierz polecenie Sprawdź element

3

Narzędzia w przeglądarce są świetne w swojej pracy i są zwykle najlepszym wyborem, ale czasami nie zapewniają wystarczających szczegółów technicznych dotyczących żądań / odpowiedzi HTTP lub są zbyt specyficzne dla strony.

W takich przypadkach może się okazać, że dedykowane narzędzie do inspekcji HTTP, takie jak Fiddler lub jedna z alternatyw dla systemu Linux , zapewni lepszy wgląd.

Jeśli naprawdę potrzebujesz dostać się od zera , Wireshark wychodzi poza HTTP do pełnej analizy ruchu sieciowego, ale bądź przygotowany na to, że na początku zostaniesz przytłoczony.

— JasonBirch
źródło

Nie mogę powiedzieć, że znam skrzypek, ale Wireshark jest zdecydowanie zbyt nagi. Wireshark jest naprawdę przydatny tylko wtedy, gdy potrzebujesz zobaczyć szczegóły protokołów niższego poziomu.

— Evan Plaice,

Fiddler jest bliższy narzędziom deweloperskim Firebug / chrome pod kątem użyteczności. Jednym z miejsc, które uznałem za najbardziej przydatne, jest publikowanie plików KML na mojej stronie internetowej; możesz zobaczyć żądania i odpowiedzi z aplikacji komputerowych Windows, takich jak Google Earth, a nie tylko z przeglądarek internetowych. Używałem Wiresharka kilka razy, ale zgadzam się, że ogólnie nie jest przydatny w codziennych sprawach dla webmasterów.

— JasonBirch

1

Możesz także wypróbować Google Speed Tracer typu open source - http://code.google.com/webtoolkit/speedtracer/

Speed Tracer to narzędzie, które pomaga zidentyfikować i naprawić problemy z wydajnością w aplikacjach internetowych. Wizualizuje metryki pobierane z punktów oprzyrządowania niskiego poziomu w przeglądarce i analizuje je podczas działania aplikacji. Speed Tracer jest dostępny jako rozszerzenie Chrome i działa na wszystkich platformach, na których rozszerzenia są obecnie obsługiwane (Windows i Linux).

Korzystając z Speed Tracer, możesz uzyskać lepszy obraz tego, gdzie spędzasz czas w swojej aplikacji. Obejmuje to problemy spowodowane analizowaniem i wykonywaniem JavaScript, układem, ponownym obliczaniem stylu CSS i dopasowywaniem selektora, obsługą zdarzeń DOM, ładowaniem zasobów sieciowych, odpalaniem timera, wywołaniami zwrotnymi XMLHttpRequest, malowaniem i innymi.

— mvark
źródło