HTML mise en page mise au point

Question

J'ai précédemment demandé quels outils il y avait pour understanding HTML layout. J'aimerais pouvoir voir des informations de niveau inférieur que ces outils rendent disponibles. Par exemple, j'aimerais pouvoir savoir pourquoi un élément a été placé sur une nouvelle ligne. S'il n'y a pas d'outils pour le faire, alors je pensais que le débogage des informations d'un moteur de rendu open source pourrait être utile. Est-ce qu'un moteur de rendu HTML open source fournit une sortie de débogage utile à cette fin?

Answer 1

Je recommanderais firebug pour cela, ou les "outils de développement" intégrés dans Chrome et IE. Ils ont tous un survol qui vous permet de survoler ou de cliquer sur les éléments pour révéler toutes leurs propriétés (même celles par défaut définies par le moteur de rendu). Pour votre exemple (nouvelle ligne), vous pouvez regarder l'élément en question est un élément de bloc, ce qui le forcerait sur une nouvelle ligne, ou si elle est plus large que son élément parent (ce qui causerait également des problèmes.)

Espérons que cela aide!

Answer 2

Firefox: Firebug (addon)
Chrome: Faites un clic droit -> inspecter élément (intégré)
Opera: Faites un clic droit -> inspecter élément (intégré)
Safari: [debug avec Chrome comme les deux sont basés sur Webkit et réagissent de la même]
Internet Exploder: F12 (construit dans les outils de dev)

Pour une solution multi-navigateur: Firebug Lite

Je préfère déboguer dans Firebug chaque fois que possible, puis utiliser les outils les uns des autres navigateurs sur une base au besoin.