web-dev-qa-db-fra.com

Débogueur de type Firebug pour Google Chrome

Y a-t-il quelque chose comme Firebug que vous pouvez utiliser dans Google Chrome?

Caractéristiques essentielles que j'aimerais:

  • Inspecter la source HTML (sélectionner des éléments, les supprimer, etc.)
  • vérifier les valeurs CSS (la solution intégrée est bizarre, en quelque sorte)
278
Sebastian Hoitz

Un outil semblable à Firebug est déjà intégré à Chrome. Faites un clic droit n'importe où sur une page et choisissez "Inspecter l'élément" dans le menu. Chrome dispose d'un outil graphique de débogage (comme dans Firebug), vous permettant de déboguer JavaScript. Il effectue également une inspection CSS et peut même modifier le rendu CSS à la volée.

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

243
Dmitry Torba

Firebug Lite permet d'inspecter les éléments HTML, le style CSS calculé et bien plus encore. Puisqu'il s'agit de JavaScript pur, il fonctionne dans de nombreux navigateurs. Incluez simplement le script dans votre source ou ajoutez le bookmarklet à la barre de favoris pour l'inclure sur n'importe quelle page en un seul clic.

http://getfirebug.com/lite.html

37
gregers

Ajoutez simplement des points de discussion en utilisant quelqu'un tous les jours avec Firebug/ Inspecteur Chrome :

  1. Au moment de la rédaction, il n'y a que l'inspecteur DOM Google et non, il ne possède pas toutes les fonctionnalités de Firebug.

  2. Inspector est une version "allégée" de Firebug: l'interface n'est pas aussi bonne OMI, l'inspection d'élément dans les deux versions récentes est maintenant maladroite, mais Firebug est encore meilleur; Je me trouve à essayer de trouver l'amour pour Chrome (puisqu'il s'agit d'une expérience de navigateur plus rapide et de meilleure qualité), mais pour le travail de développement, il est toujours aussi nul pour moi.

  3. La prévisualisation/modification en temps réel de DOM/CSS est encore meilleure dans Firebug; CSS calculé et vue de modèle de boîte sont mieux dans Firebug;

  4. En quelque sorte, il est simplement plus facile de lire/utiliser Firebug, peut-être en raison 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 performant, bien que ce soit une chose subjective, je l'avoue.

  5. L'onglet Cookies/Net m'est extrêmement utile dans Firebug. Peut-être que Chrome Inspector a maintenant cette information? La dernière fois que j’ai vérifié, cela n’est pas arrivé, car Chrome se met à jour en arrière-plan sans votre intervention (votre consentement est obtenu par défaut, comme tous les bons suzerains).

  6. Dernier point: le jour où Google Chrome obtient un Firebug complet est le jour où Firefox meurt pour les développeurs, car Firefox disposait de 3 ans pour rendre le moteur de présentation de Firefox Gecko aussi rapide que - WebKit et ils ne l'ont pas fait. Désolé de le dire si franchement, mais c'est la vérité.

Vous voyez, maintenant tout le monde veut s'éloigner de Flash au lieu de jQuery, motivé par l'accessibilité et l'interactivité mobiles (iPhone, iPad, Android) et JavaScript est "tout à coup" une grosse affaire (c'est du sarcasme), alors ce navire a navigué, Firefox. Et cela me rend triste, en tant que fanperson de Mozilla. Chrome est tout simplement un meilleur navigateur jusqu'à ce que Firefox mette à niveau son moteur JavaScript.

15
negutron

F12

J'adore les shortkeys

14
Angel.King.47

Essayez ceci, il s’appelle Firebug Lite et fonctionne apparemment avec la version bêta de Chrome.

Vous pouvez également le trouver à l'adresse suivante: https://chrome.google.com/extensions/

12
Teekin

Vous pouvez définir ce bookmarklet dans votre "barre de favoris" pour que Firebug lite soit toujours disponible dans les navigateurs Chrome/Chromium (indiquez-le ici comme 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);
9
Manuel

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

Cette extension est utilisée pour intégrer jQuery à la page de votre choix. Il permet d’utiliser jQuery dans la console Shell (vous pouvez appeler Chrome console par Ctrl + Shift + j".).

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

4
Andrey
4
kenorb

L’extension officielle Firebug Chrome ou vous pouvez la télécharger et l’emballer vous-même.

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

4
joshatjben

Eh bien, il est possible d'activer Greasemonkey les scripts pour Google Chrome, alors peut-être existe-t-il un moyen d'installer Firebug en utilisant cette méthode? Firebug Lite fonctionnerait aussi, mais ce n’est pas la même chose que d’utiliser la version complète :(

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

3
Will

F12 (uniquement sous Linux et Windows)

OU

CtrlI

(I si vous êtes sur Mac)

3
siannone

Oubliez tout ce dont vous avez tous besoin, cet inspecteur indépendant du navigateur, dom updater

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

juste un signet et aller à n'importe quelle page Web et cliquez sur ce signet ..

il s'agit en fait du projet Mozilla Goggles, incroyable incroyable incroyable ...

3
Vishal Sharma

Cela ne répond pas à votre question, mais au cas où vous l'auriez manqué, le développeur Web de Chris Pederick est maintenant disponible pour Chrome: https://chrome.google.com/extensions/detail/ bfbameneiokkgbdmiekhjnmfkcnldhhm .

3
Sam Dutton

S'il vous plaît essayer Firebug Lite pour Google Chrome

2
Rais Hussain

Si vous utilisez Chromium sur Ubuntu en utilisant le ppa nocturne, alors vous devriez avoir le chromium-browser-inspector

1
Rory