2008-11-21 29 views
278

¿Hay algo como Firebug que puedes usar dentro de Google Chrome?Depurador tipo Firebug para Google Chrome

Las características esenciales quisiera:

  • Inspeccionar fuente HTML (seleccionar elementos, eliminarlos, etc.)
  • valores de verificación CSS (la solución integrada es raro, de alguna manera)
+9

Como si ahora Chrome admite extensiones, podemos volver a visitarlo ya que muchas de las respuestas existentes ahora son técnicamente incorrectas. Deberíamos actualizar esta respuesta en lugar de comenzar una nueva. –

+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. –

+1

revise este enlace para obtener el firebug en el navegador: https://getfirebug.com/releases/lite/chrome/ – Techie

Respuesta

242

Ya hay una herramienta 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 puedes depurar JavaScript. También hace una buena inspección de CSS e incluso puede cambiar la representación de CSS sobre la marcha.

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

+18

++ Esto es lo suficientemente bueno para resolver 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. – guns

+1

Ah, me llevó un poco encontrarlo, pero la funcionalidad de edición html de firebug también está allí, en el mismo lugar donde puedes editar el css, la barra de herramientas del desarrollador, hacer doble clic en un elemento, escribir y presionar enter, y ahí tienes, html editado. – Kzqai

+4

Las herramientas para desarrolladores de Chrome (ctrl + shift + j) admiten 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 de Javascript como la consola Firebug. –

37

Firebug Lite es compatible para inspeccionar los elementos HTML, CSS estilo computarizada, y mucho más. Como es puro JavaScript, 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

+0

¡Excelente enlace!No sabía acerca de la versión de IE –

3

Bueno, es posible habilitar Greasemonkey guiones para Google Chrome así que tal vez hay una manera de instalar una especie de Firebug utilizando este método? Firebug Lite también quiere trabajar, pero no es sólo la misma sensación que con el completo uno :(

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

9

puede establecer este bookmarklet en su "barra de marcadores" con el fin de tener Firebug Lite siempre disponible en el navegador Chrome/Chromium (poner esto como la dirección 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); 
4

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

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

+2

Solo para mayor claridad: este es un enlace a una extensión firebug lite no una extensión firebug. – NeuroScr

+0

El enlace proporcionado anteriormente se rompió. Por favor, actualice esta respuesta con un nuevo enlace. –

4

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

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

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

1

Si utiliza cromo en Ubuntu usando el PPA nocturnas, entonces usted debe tener la chromium-browser-inspector

15

Simplemente añadiendo algunos temas de conversación como alguien que utiliza Firebug/Chrome Inspector todos los días:

  1. En el momento de escribir esto, sólo hay DOM inspector 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 poco clara, 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 apena.

  3. La previsualización en vivo/modificación de DOM/CSS todavía es mucho mejor en Firebug; el CSS calculado y la vista del modelo de caja son mejores en Firebug;

  4. De alguna manera es más fácil de leer/usar Firebug quizás 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. La pestaña Cookies/Net me es extremadamente útil en Firebug. ¿Tal vez Chrome Inspector tiene esto ahora? La última vez que lo revisé no fue así, 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 que Google Chrome consigue un Firebug con todas las funciones es el día Firefox básicamente muere a los desarrolladores de Firefox porque tenía 3 años para hacer motor de renderizado de Firefox Gecko tan rápido como WebKit y no lo hicieron. Perdón por decirlo sin rodeos, pero es la verdad.

Ves, ahora todo el mundo quiere alejarse de flash en lugar de jQuery motivado por la accesibilidad e interactividad móvil (iPhone, iPad, Android) y JavaScript es 'pronto' un gran problema (que es sarcasmo), por lo ese barco ha navegado, Firefox. Y eso me pone triste, como fanfarrón de Mozilla. Chrome es simplemente un mejor navegador hasta que Firefox actualice su motor de JavaScript.

+0

Firefox va cuesta abajo. A partir de ahora (2013) Chrome devtools es mucho más poderoso que Firebug ... y Firefox está centrando sus esfuerzos en Firefox OS, que ni siquiera está cerca del frodo de Android ... ni siquiera se esforzaron mucho para hacer js y renderizar Más rápido. –

14

F12

Me encanta ShortKeys

+5

one guy put ctrl shift j :) –

3

F12 (sólo en Linux y Windows)

O

CtrlI

(I si estás en Mac)

2

Olvida todo lo que todas las necesidades de este navegador inspector independiente, actualizador dom

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

solo marcador e ir a cualquier página web y hacer clic en ese marcador ...

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

Cuestiones relacionadas