¿Cuál es el equivalente de Google Chrome para Firebug?

29

Estoy buscando una herramienta que pueda:

inspeccionar elementos HTML
administrar / depurar JavaScript
rendimiento del perfil
modificar elementos en tiempo real

— Evan Plaice
fuente

32

Está integrado en la página [papel] -> Desarrollador -> Herramientas para desarrolladores (en Chrome v5 y versiones anteriores). Es probable que sea diferente en v6 ya que el botón de página parece estar desapareciendo en esa versión.

— Mark Hatton
fuente

3

La herramienta de Google tiene algunos inconvenientes: ver las solicitudes ajax no es tan fácil, no hay un modo multilínea que sea conveniente, no puede editar HTML en una ventana, no muestra el relleno / márgenes al pasar el mouse sobre el árbol HTML, simplemente no puede navegar por el DOM real (solo el árbol HTML) y, por último, pero no menos importante, encuentro que las funciones de edición de CSS son más clúster: no hay autocompletado en Google por una cosa. Todavía es muy útil, pero Firebug es simplemente mejor.

— cgp

2

O shift-ctrl-I para los perezosos :)

— Tim Post

1

@ Mark Note, estoy usando 5.0.375.99. Sin embargo, no estoy seguro de si hace la diferencia ahora o en el futuro.

— Evan Plaice

1

En v6 es Wrench -> Tools -> Developer Tools

— enobrev

17

Haga clic derecho -> Inspeccionar elemento

— HoLyVieR
fuente

13

Firebug Lite para Google Chrome .

— Emmett
fuente

FireBug Lite es una gran herramienta y también funciona en IE, Opera, Safari y Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

Han pasado 4 años desde que se hizo la pregunta original. Chrome (estable) se encuentra ahora en la versión 38. Durante mucho tiempo ha incluido un conjunto completo de herramientas de desarrollo que son más o menos equivalentes a Firebug para Firefox (aunque por cierto Firefox incluso tiene un inspector incorporado también).

Algunas cosas que las Herramientas para desarrolladores de Chrome le permiten hacer:

Inspeccionar el DOM
Inspeccionar CSS
Acceda a una consola de JavaScript
Depurar JavaScript
Ver solicitudes de red, tiempos y respuestas
Ver rendimiento de representación, JavaScript y CSS
Inspeccione el almacenamiento local y las cookies.

Se puede acceder a las herramientas de desarrollo de varias maneras.

Menú de Chrome -> Herramientas -> Herramientas para desarrolladores
Ctrl+ Shift+ Ien Windows o Cmd+ Shift+ Ien una Mac
F12 en Windows
Haga clic derecho en cualquier lugar de una página y seleccione Inspeccionar elemento

3

Las herramientas en el navegador son excelentes en su trabajo y generalmente son su mejor primera opción, pero a veces no proporcionan suficientes detalles técnicos sobre las cargas de solicitud / respuesta de HTTP, o son demasiado específicas de la página.

En estos casos, puede encontrar que una herramienta de inspección HTTP dedicada como Fiddler o una de las alternativas de Linux proporcionará más información.

Si realmente necesita obtener el bare metal, Wireshark va más allá de HTTP al análisis completo del tráfico de red, pero prepárese para sentirse abrumado al principio.

— JasonBirch
fuente

No puedo decir que estoy familiarizado con el violinista, pero Wireshark definitivamente es excesivamente desnudo. Wireshark es realmente útil solo si necesita ver los detalles de los protocolos de nivel inferior.

— Evan Plaice

Fiddler está más cerca de las herramientas de desarrollador Firebug / Chrome para la usabilidad. Uno de los lugares que he encontrado más útil es cuando publico archivos KML en mi sitio web; puede ver las solicitudes y respuestas de las aplicaciones de escritorio de Windows como Google Earth, no solo los navegadores web. He usado Wireshark un par de veces, pero estoy de acuerdo en que generalmente no es útil para el día a día de los webmasters.

— JasonBirch

1

También puede probar el Speed Tracer de código abierto de Google: http://code.google.com/webtoolkit/speedtracer/

Speed Tracer es una herramienta para ayudarlo a identificar y solucionar problemas de rendimiento en sus aplicaciones web. Visualiza métricas tomadas de puntos de instrumentación de bajo nivel dentro del navegador y las analiza a medida que se ejecuta la aplicación. Speed Tracer está disponible como una extensión de Chrome y funciona en todas las plataformas donde actualmente se admiten extensiones (Windows y Linux).

Usando Speed Tracer puede obtener una mejor idea de dónde se pasa el tiempo en su aplicación. Esto incluye los problemas causados por el análisis y la ejecución de JavaScript, el diseño, el recálculo del estilo CSS y la coincidencia del selector, el manejo de eventos DOM, la carga de recursos de la red, los disparos del temporizador, las devoluciones de llamada XMLHttpRequest, la pintura y más.

— mvark
fuente