2008-11-21 9 views
278

Existe-t-il quelque chose comme Firebug que vous pouvez utiliser dans Google Chrome?Débogueur de type Firebug pour Google Chrome

Caractéristiques essentielles Je voudrais:

  • Inspect HTML (sélectionner des éléments, les supprimer, etc.)
  • vérifier les valeurs CSS (la solution intégrée est bizarre, en quelque sorte)
+9

Voyant comme si Chrome maintenant prend en charge les extensions, pouvons-nous revoir cela, car la plupart des réponses existantes sont maintenant techniquement incorrectes. Nous devrions mettre à jour cette réponse au lieu d'en commencer une nouvelle. –

+3

@Nathan Koop: Je peux me tromper, mais je ne pense pas que le système d'extension Chrome soit assez puissant pour permettre quelque chose comme Firebug. –

+1

cochez ce lien pour obtenir le firebug sur le navigateur: https://getfirebug.com/releases/lite/chrome/ – Techie

Répondre

242

Il existe déjà un outil similaire à Firebug dans Chrome. Faites un clic droit n'importe où sur une page et choisissez "Inspecter l'élément" dans le menu. Chrome a un outil graphique pour le débogage (comme dans Firebug), donc vous pouvez déboguer JavaScript. Il fait aussi bien l'inspection CSS et peut même changer le rendu CSS à la volée.

Pour plus d'informations, consultez https://developers.google.com/chrome-developer-tools/

+18

++ Ceci est assez bon pour le dépannage des problèmes spécifiques à Chrome. Si je veux une introspection plus profonde, je peux le faire avec Firebug. Maintenant, avec le nouveau mode développeur IE8, tous les principaux navigateurs ont des modes de développement intégrés. Bon temps. – guns

+1

Ah, m'a pris un peu pour le trouver, mais la fonctionnalité d'édition html de firebug est là aussi, au même endroit où vous pouvez éditer le CSS, la barre d'outils développeur, double-cliquez sur un élément, tapez et appuyez sur Entrée, et là vous allez, html édité. – Kzqai

+4

Les outils de développement Chrome (ctrl + shift + j) prennent en charge le débogage Javascript comme Firebug. Cliquez sur l'onglet Scripts puis sur la deuxième icône en bas (> =) avec une info-bulle de "Afficher la console". De là, vous pouvez exécuter des commandes Javascript comme la console Firebug. –

37

Firebug Lite prend en charge d'inspecter les éléments HTML, CSS style calculé, et beaucoup plus. Comme il s'agit de JavaScript pur, il fonctionne dans de nombreux navigateurs différents. Ajoutez simplement le script dans votre source ou ajoutez le marque-page à votre barre de favoris pour l'inclure sur n'importe quelle page en un seul clic.

http://getfirebug.com/lite.html

+0

Great link!Ne savait pas à propos de la version IE –

3

Eh bien, il est possible d'activer Greasemonkey scripts pour Google Chrome alors peut-être il y a un moyen d'installer sorte de Firebug en utilisant cette méthode? Firebug Lite fonctionne également, mais il est tout simplement pas le même sentiment que l'utilisation de toutes les fonctionnalités du :(un

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

9

Vous pouvez définir cette bookmarklet dans votre « barre de signets » afin d'avoir Firebug Lite toujours disponible dans le navigateur Chrome/Chrome (mettre ce que l'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

L'extension officielle Firebug Chrome ou vous pouvez télécharger et empaqueter l'extension vous-même.

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

+2

Juste pour plus de clarté: c'est un lien vers une extension firebug lite pas une extension firebug. – NeuroScr

+0

Le lien précédemment fourni a été rompu. Veuillez mettre à jour cette réponse avec un nouveau lien. –

4

jQuerify est l'extension parfaite pour intégrer jQuery dans la console Chrome et est aussi simple que vous pouvez l'imaginer. Cette extension indique également si jQuery a déjà été intégré dans une page.

Cette extension est utilisée pour intégrer jQuery dans n'importe quelle page que vous voulez. Il permet d'utiliser jQuery dans le shell de la console (Vous pouvez appeler la console Chrome par Ctrl + Shift + j ".).

Pour intégrer jQuery dans l'onglet sélectionné, cliquez sur le bouton d'extension.

1

Si vous utilisez Chrome sur Ubuntu en utilisant les ppa tous les soirs, alors vous devriez avoir le chromium-browser-inspector

15

Tout en ajoutant quelques points de discussion que quelqu'un qui utilise tous les jours Firebug/Chrome Inspector:

  1. au moment de l'écriture, il n'y a qu'un inspecteur Google DOM et non il n'a pas toutes les fonctionnalités de Firebug

  2. Inspector est une version «allégée» de Firebug: L'interface n'est pas aussi bonne que l'OMI, l'inspection des éléments dans les deux versions récentes est maintenant maladroite, mais Firebug est encore meilleur; Je me retrouve à essayer de trouver l'amour pour Chrome (puisque c'est une meilleure expérience de navigation, plus rapide), mais pour le travail de développement, ça me fait toujours mal.

  3. La prévisualisation/modification en direct de DOM/CSS est encore bien meilleure dans Firebug; le CSS calculé et la vue de modèle de boîte sont meilleurs dans Firebug;

  4. D'une manière ou d'une autre, il est peut-être plus facile de lire/utiliser Firebug peut-être à cause de la facilité de navigation, de manipulation/modification du document dans plusieurs domaines clés? Qui sait. Je suis habitué à l'interface et je pense que Chrome Inspector n'est pas aussi bon bien que ce soit une chose subjective que j'admets. L'onglet Cookies/Net est extrêmement utile dans Firebug. Peut-être que Chrome Inspector a maintenant? La dernière fois que je l'ai vérifié, non, parce que Chrome se met à jour en arrière-plan sans votre intervention (obtient votre consentement par défaut comme tous les bons suzerains).

  5. Dernier point: Le jour que Google Chrome obtient un meurt Firebug entièrement en vedette est le jour de Firefox essentiellement pour les développeurs car Firefox avait 3 ans pour faire le moteur de mise en page de Firefox Gecko aussi vite que WebKit et ils ne. Désolé de le dire si crûment mais c'est la vérité.

Vous voyez, maintenant tout le monde veut se éloigner de flash en lieu et place de jQuery motivés par l'accessibilité mobile et l'interactivité (iPhone, iPad, Android) et JavaScript est « soudainement » une grosse affaire (c'est le sarcasme), alors ce navire a navigué, Firefox. Et cela me rend triste, en tant que fan de Mozilla. Chrome est simplement un meilleur navigateur jusqu'à ce que Firefox mette à jour son moteur JavaScript.

+0

Firefox descend. A partir de maintenant (2013) devtools chrome sont beaucoup plus puissants que firebug ... et firefox concentre tous leurs efforts sur Firefox OS qui n'est même pas proche de frodo android .. ils n'ont même pas mis beaucoup d'efforts pour faire js et rendu plus rapide. –

14

F12

I love shortkeys

+5

un gars mis ctrl shift j :) –

3

F12 (uniquement sur Linux et Windows)

OU

CtrlJe

(Je si vous êtes sur Mac)

2

Oubliez tout ce que vous tous les besoins de ce navigateur inspecteur indépendant, updater dom

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

juste marque-page et accédez à une page Web, puis cliquez sur ce favori.

c'est en fait Mozilla project Goggles, étonnant incroyable étonnant ...

Questions connexes