Le « firebug » de chrome

Bonjour,
je viens de découvrir l'équivalent de Firebug pour chrome qui a l'air très bien foutu avec même quelques fonctionnalités que ne semble pas avoir Firebug. Est-ce que certain d'entre vous l'utilisent régulièrement ? Est-il comparable à Firebug du point de vue des fonctionnalités?
Modifié par Hermann (22 Sep 2011 - 09:58)

Je l'utilise aussi sur chrome et je n'ai pas vu de différences notables. Les mêmes raccourcis, les mêmes possibilités
Par contre, je viens de voir que "l'addon" CSS usage n'existe pas pour chrome

Il y a aussi des outils d'analyse au niveau performance.

Bonjour,

On parle bien de Web Inspector, qui fait partie du projet WebKit et qui est intégré d'office à Safari et Chrome?

Je le connais assez mal. Il est moins intéressant que Firebug côté CSS je trouve, mais mieux fichu pour inspecter les ressources appelées depuis la page. Côté JavaScript, je ne saurais pas dire lequel l'emporte. Web Inspector permet d'inspecter les cookies de la page/du domaine, ce qui demandera une extension en plus avec Firebug (Firecookie en l'occurrence).

Globalement ces outils se valent (je rajouterais les versions récentes d'Opera Dragonfly). À voir si dans IE9 les outils pour développeur sont de qualité équivalente.

Pour info, Mozilla bosse aussi sur des outils pour développeur intégrés au navigateur. J'utilise déjà la Web Console qui est pratique pour avoir une console JavaScript simple et pour avoir un accès rapide aux requêtes et réponses HTTP. Il y a aussi Scratchpad et un outil d'inspection encore très expérimental (dans Firefox 8, il n'inspecte que le HTML et propose une interface encore très roots). Je sais pas encore trop où ça va et quelle est l'utilité par rapport à Firebug, mais on verra bien comment ça évolue.

Moi je parlais de Firebug lite.
L'avantage côté chrome, c'est l'inspection avec nom de l'élément direct dans la fenêtre (sur Firefox, c'est juste dans la console), ainsi que la dimension de l'élément. C'est tout bête, mais c'est un plus

Bonsoir, merci pour ces infos

Euh... ouais moi aussi
Mais sur Firefox, ça me montre les cadres bleus, alors que sur Chrome, ça me met le cadre bleu ET son nom et ses dimensions. Par exemple : "div#content [540 * 1690]". Plus précis en clair.

Sans pseudo fix a écrit :

Mais sur Firefox, ça me montre les cadres bleus, alors que sur Chrome, ça me met le cadre bleu ET son nom et ses dimensions. Par exemple : "div#content [540 * 1690]". Plus précis en clair.

Bah avec Firebug tu peux voir:
- La place de l'élément dans le DOM.
- Les styles s'appliquant à l'élément, directement ou par héritage, avec bien sûr les sélecteurs.
- Les dimensions de l'élément, et ses marges/bordures/padding (onglet "Layout" du paneau "HTML").
Les deux premières fonctionnalités sont présentes dans Web Inspector (et Opera Dragonfly, et les IE Developer Tools). La troisième est absente de Web Inspector, qui propose juste l'information sur les dimensions (content-box ou border-box, faut voir...) en surimpression à l'inspection, effectivement.

Donc l'information dans Firebug est plus précise et plus claire (pour ce qui concerne les dimensions), mais moins directement visible que dans Web Inspector.

Une image vaut mieux qu'un long discours

ça c'est avec firebug chrome. Pour le reste c'est pareil sur Firefox.
(Mon screen pour firefox n'a pas voulu être uploadé, donc je vous montre juste l'aperçu pour Chrome)

Sans pseudo fix a écrit :
ça c'est avec firebug chrome.

Web Inspector. Pas Firebug.

Pour mémoire, dans les outils pour développeur il y a:
- Quelques outils natifs sur Firefox (peu, en développement).
- Web Inspector en natif dans Chrome et Safari (à activer dans les préférences pour Safari).
- Les Developer Tools en natif dans Internet Explorer (depuis la version 8).
- Dragonfly en natif dans Opera.
- L'extension Firebug pour Firefox (extension qui a inspiré la plupart des outils ci-dessus).
- Firebug Lite, un bookmarklet JavaScript qui tourne sur tous les navigateurs (et qui offre une partie des fonctionnalités de l'extension Firebug).

Plus d'autres extensions pour divers navigateurs, bien sûr.

Pour l'aperçu des dimensions, dans Firebug (extension pour Firefox, pas regardé si c'est dispo dans Firebug Lite) ça ressemble à ça:

http://dl.dropbox.com/u/145744/screens/firebug-layout.png

fvsch a écrit :

Web Inspector. Pas Firebug.

Eh eh... bien vu, c'est Web Inspector qui fait ça. Ça explique notre petite incompréhension

Precise stp

EDIT: exact, donc je corrige "Précise s'il te plaît".
Modifié par jmlapam (29 Sep 2011 - 14:30)