sites internet dans les différents navigateurs Debugging

Question

Je rencontrais ma première incursion dans la conception de site Web et j'apprends beaucoup. Je vois maintenant pourquoi les développeurs web ne sont pas un grand fan de développement pour Internet Explorer. Rien ne semble fonctionner comme je l'espère. Cependant, comme le site Web doit fonctionner avec plusieurs navigateurs, je passe du temps à le regarder dans Firefox, Chrome et IE. Quelque chose qui ne m'apparaît pas évident, cependant, c'est comment savoir où se situent les problèmes sur le site.

Par exemple, la mise en page d'un de mes pages force un pied de page au bas de la page. Il semble très bien dans Chrome et Firefox, mais il y a quelque chose de cassé dans IE qui fait que le pied de page s'aligne sur la droite (et fait apparaître un défilement horizontal). J'ai joué avec le code, mais rien ne répond vraiment à ce que je veux dans IE (même si c'est le cas dans d'autres navigateurs).

Existe-t-il des outils qui peuvent aider à "déboguer" les problèmes sur un site Web, donc la résolution est plus qu'une simple approche d'essai et d'erreur? Merci.

Answer 1

Il existe des frameworks comme GWT, ext-js, YUI qui cachent beaucoup de bugs de votre navigateur. Mais aujourd'hui (vers la fin de l'année 2009), il n'existe toujours pas de moyen efficace de réduire les problèmes de navigateur et de les résoudre.

PS: Je collectionne des outils qui aident pendant le débogage ici: Which tools do you use to debug HTML/JS in your browser?

Answer 2

Un de mes favoris qui fonctionne dans tous les navigateurs est X-Ray. Vous collez simplement le lien sur cette page dans un signet et il charge du JavaScript externe en haut de la page que vous testez. Il révèle un tas de paramètres sur l'objet DOM sur lequel vous cliquez, ainsi que sa hiérarchie dans le modèle. En ce qui concerne votre problème de bas de page spécifique, je voudrais regarder un manque potentiel de compensation des flotteurs et divs qui sont plus larges que leurs conteneurs parents quelque part sur la ligne.

Answer 3

Une bibliothèque JavaScript inter-navigateurs, comme jQuery et ses composants d'interface utilisateur, peut être très utile pour éviter les idiosyncrasies entre les navigateurs. Microsoft fournit IE Developer Toolbar, ce n'est pas aussi facile à utiliser que Firebug, mais peut toujours être très utile. Un débogueur Just-In-Time tel que MS Script Debugger ou Visual Studio permet également de gagner du temps.

Answer 4

J'aime Firebug pour Firefox et IE8 a Developer Tools dans le menu Outils et IE Developer Toolbar pour les anciennes versions. Chrome a des outils similaires à partir du menu de la page. Tout cela vous permet de voir les éléments de la page tels qu'ils sont rendus dans leurs navigateurs spécifiques, ce que je trouve généralement très utile pour le débogage des problèmes spécifiques au navigateur.

Answer 5

Je suppose que vous avez vérifié que votre code est valide, avec

• validateur HTML, par exemple: W3C Markup Validation Service
• vérificateur CSS, par exemple: W3C CSS Validation Service

Et, Bien sûr, vous devriez avoir bon doctype dans votre fichier html. Sans doctype, certains navigateurs vont en mode quirks pour émuler les bugs dans les anciens navigateurs.