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
development performance google-chrome profiling Evan Plaice
źródło

Odpowiedzi:

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
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


źródło
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