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

Respuestas:

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


fuente
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