Depurador similar a Firebug para Google Chrome

278

¿Hay algo como Firebug que puedas usar en Google Chrome?

Características esenciales que me gustaría:

  • Inspeccionar la fuente HTML (seleccionar elementos, eliminarlos, etc.)
  • verifique los valores CSS (la solución integrada es extraña, de alguna manera)
Sebastian Hoitz
fuente
9
Al ver que Chrome ahora admite extensiones, ¿podemos volver a visitar esto ya que muchas de las respuestas existentes ahora son técnicamente incorrectas? Deberíamos actualizar esta respuesta en lugar de comenzar una nueva.
Nathan Koop
3
@Nathan Koop: Podría estar equivocado, pero no creo que el sistema de extensión de Chrome sea lo suficientemente potente como para permitir algo como Firebug.
Sasha Chedygov
1
consulte este enlace para obtener el firebug en el navegador: getfirebug.com/releases/lite/chrome
Techie

Respuestas:

243

Ya hay una herramienta similar a Firebug integrada en Chrome. Simplemente haga clic derecho en cualquier lugar de una página y elija "Inspeccionar elemento" en el menú. Chrome tiene una herramienta gráfica para la depuración (como en Firebug), por lo que puede depurar JavaScript. También realiza bien la inspección de CSS e incluso puede cambiar la representación de CSS sobre la marcha.

Para obtener más información, consulte https://developers.google.com/chrome-developer-tools/

Dmitry Torba
fuente
19
++ Esto es lo suficientemente bueno para solucionar problemas específicos de Chrome. Si quiero una introspección más profunda, puedo hacerlo con Firebug. Ahora con el nuevo modo de desarrollador de IE8, todos los principales navegadores tienen modos de desarrollo integrados. Buenos tiempos.
armas de fuego
1
Ah, me llevó un poco encontrarlo, pero la funcionalidad de edición html de firebug también está allí, en el mismo lugar en el que puede editar el CSS, la barra de herramientas del desarrollador, haga doble clic en un elemento, escriba y presione Intro, y allí vas, html editado.
Kzqai
44
Chrome Developer Tools (ctrl + shift + j) admite la depuración de Javascript como Firebug. Haga clic en la pestaña Scripts y luego en el segundo icono en la parte inferior (> =) que tiene una información sobre herramientas de "Mostrar consola". Desde allí puede ejecutar comandos Javascript como la consola Firebug.
Pierre-Antoine LaFayette
1
Recuerde que en algunos sistemas basados ​​en Linux no se instala automáticamente, por lo que debe instalarlo manualmente: sudo apt-get install chromium-browser-inspector
Manuel
1
El actual dev build 4.0.xxxx tiene un conjunto de herramientas para desarrolladores. Sabía sobre la inspección de elementos antes, pero sin el panel "Red" no era lo suficientemente bueno. Pero ahora hay un panel de "recursos" que parece estar funcionando bastante bien y tiene los mismos filtros que firebug (scripts, xhr, imágenes, etc.). He estado usando la compilación Dev durante una semana y parece bastante estable. Finalmente, configuré mi navegador predeterminado en Chrome, ¡ahora también es mi navegador de desarrollo! :)
Mark J Miller
37

Firebug Lite es compatible para inspeccionar elementos HTML, estilo CSS calculado y mucho más. Como es JavaScript puro, funciona en muchos navegadores diferentes. Simplemente incluya el script en su fuente, o agregue el bookmarklet a su barra de marcadores para incluirlo en cualquier página con un solo clic.

http://getfirebug.com/lite.html

gregers
fuente
Gran enlace! No sabía sobre la versión de IE
Patrick Desjardins
15

Solo agrego algunos puntos de conversación como alguien que usa Firebug / Chrome Inspector todos los días:

  1. Al momento de escribir, solo hay un inspector DOM de Google y no, no tiene todas las características de Firebug

  2. Inspector es una versión 'lite' de Firebug: la interfaz no es tan buena IMO, la inspección de elementos en ambas versiones recientes ahora es torpe, pero Firebug es aún mejor; Me encuentro tratando de encontrar el amor por Chrome (ya que es una experiencia de navegador mejor y más rápida), pero para el trabajo de desarrollo, todavía me apesta.

  3. La vista previa / modificación en vivo de DOM / CSS sigue siendo mucho mejor en Firebug; CSS calculado y la vista del modelo de caja son mejores en Firebug;

  4. ¿De alguna manera es más fácil leer / usar Firebug, tal vez debido a la facilidad de navegar, manipular / modificar el documento en varias áreas clave? Quién sabe. Estoy acostumbrado a la interfaz y creo que Chrome Inspector no es tan bueno, aunque esto es algo subjetivo, lo admito.

  5. Las pestañas Cookies / Red son extremadamente útiles para mí en Firebug. Tal vez Chrome Inspector tiene esto ahora? La última vez que lo comprobé no lo hizo, porque Chrome se actualiza en segundo plano sin su intervención (obtiene su consentimiento por defecto como todos los buenos señores).

  6. Último punto: el día en que Google Chrome obtiene un Firebug con todas las funciones es el día en que Firefox básicamente muere por los desarrolladores porque Firefox tuvo 3 años para hacer que el motor de diseño de Firefox Gecko fuera tan rápido como WebKit y no lo hicieron. Lamento decirlo sin rodeos, pero es la verdad.

Verá, ahora todos quieren alejarse de Flash en lugar de jQuery motivado por la accesibilidad móvil y la interactividad (iPhone, iPad, Android) y JavaScript es 'de repente' un gran problema (eso es sarcasmo), por lo que ese barco ha navegado, Firefox. Y eso me pone triste, como fanático de Mozilla. Chrome es simplemente un mejor navegador hasta que Firefox actualice su motor de JavaScript.

negutron
fuente
Firefox va cuesta abajo. A partir de ahora (2013), las herramientas de Chrome son mucho más potentes que Firebug ... y Firefox está centrando todos sus esfuerzos en Firefox OS, que ni siquiera está cerca de Android Frodo ... ni siquiera hicieron mucho esfuerzo para hacer js y renderizar Más rápido.
Phyo Arkar Lwin
14

F12

Me encantan las shortkeys

Angel.King.47
fuente
66
one guy put ctrl shift j :)
Vishal Sharma
9

Puede configurar este bookmarklet en su "Barra de marcadores" para que Firebug lite esté siempre disponible en el navegador Chrome / Chromium (póngalo como la URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Manuel
fuente
4

jQuerify es la extensión perfecta para incrustar jQuery en Chrome Console y es tan simple como te puedas imaginar. Esta extensión también indica si jQuery ya se ha incrustado en una página.

Esta extensión se utiliza para incrustar jQuery en cualquier página que desee. Permite usar jQuery en el shell de la consola (puede invocar la consola de Chrome con Ctrl+ Shift+ j".).

Para incrustar jQuery en la pestaña seleccionada, haga clic en el botón de extensión.

Andrey
fuente
4

La extensión oficial de Firebug Chrome o puede descargar y empaquetar la extensión usted mismo.

https://getfirebug.com/releases/lite/chrome/

joshatjben
fuente
2
Solo por claridad: este es un enlace a una extensión firebug lite, no una extensión firebug.
NeuroScr
El enlace proporcionado anteriormente estaba roto. Actualice esta respuesta con un nuevo enlace.
Rob Hruska
3

Bueno, es posible habilitar los scripts de Greasemonkey para Google Chrome, ¿tal vez haya una forma de instalar Firebug con este método? Firebug Lite también funcionaría, pero no es la misma sensación que usar el completo :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

Peter Mortensen
fuente
3

Olvídese de todo lo que necesita este inspector independiente del navegador, actualizador de dom

https://goggles.webmaker.org/en-US

simplemente marque y vaya a cualquier página web y haga clic en ese marcador.

esto es en realidad el proyecto Mozilla Goggles, increíble, increíble, increíble ...

Vishal Sharma
fuente
Lo están cerrando.
Steve Moretz
3

F12 (solo en Linux y Windows)

O

Ctrl I

( Isi estás en Mac)

siannone
fuente
1

Si está usando Chromium en Ubuntu usando el ppa nocturno, entonces debería tener el chromium-browser-inspector

Rory
fuente