it-swarm-es.com

¿Qué es el Google Chrome equivalente a Firebug?

Estoy buscando una herramienta que pueda:

  • inspeccionar elementos HTML
  • administrar/depurar JavaScript
  • rendimiento del perfil
  • modificar elementos en tiempo real
29
Evan Plaice

Está incorporado. Página [papel] -> Desarrollador -> Herramientas de desarrollador (en Chrome v5 y menos). Es probable que sea diferente en v6 ya que el botón de página parece estar desapareciendo en esa versión.

32
Mark Hatton

Haga clic derecho -> Inspeccionar elemento

17
HoLyVieR
13
Emmett

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 para desarrolladores que son más o menos equivalentes a Firebug para Firefox (aunque por cierto Firefox incluso tiene a 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 + I en Windows o Cmd + Shift + I en una Mac

  • F12 en Windows

  • Haga clic derecho en cualquier lugar de una página y seleccione Inspeccionar elemento

5
user9877

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 metal desnudo, Wireshark va más allá de HTTP al análisis completo del tráfico de red, pero prepárese para sentirse abrumado al principio.

3
JasonBirch

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 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 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 incendios del temporizador, las devoluciones de llamada XMLHttpRequest, la pintura y más.

1
mvark