Figure sur les problèmes de site web avec des outils de développement de chrome ou firebug

Video: Популярные видео – Firebug и Google Chrome

Si vous avez suivi mon jQuery Tutoriels jusqu`à présent, vous avez peut-être déjà rencontrer quelques problèmes de code et ne sait pas comment les corriger. Face à un bit non fonctionnel de code, il est très difficile de déterminer réellement la ligne incriminée code - et c`est là des outils de débogage et développeurs entrent en jeu.Faire Interactive Web: Une introduction à jQueryFaire Interactive Web: Une introduction à jQueryjQuery est une bibliothèque de scripts côté client que presque tous les sites Web modernes utilisent - il fait des sites Web interactifs. Ce n`est pas la seule bibliothèque javascript, mais il est le plus développé, plus soutenu, et le plus largement utilisé ....Lire la suite

Donc, avant de poursuivre avec un code de jQuery plus complexe, je pensais que nous allions examiner les outils disponibles dans le navigateur le plus populaire au monde - Chrome. Ces outils ne sont pas seulement pour javascript bien - ils peuvent également vous aider à déboguer des requêtes AJAX, les ressources de votre site a besoin de charger, d`examiner la structure DOM, et tout un tas d`autres choses.

No Love Pour Firefox?

Bien que je vais plus précisément de se référer aux outils de développement Chrome aujourd`hui de préférence personnelle, et le fait qu`ils sont construits dans le navigateur, la même fonctionnalité est disponible dans un plug-in pour Firefox appelé Pyromane - l`interface est presque identique, donc ce guide devrait s`appliquer.Comment faire pour installer Firebug sur IE, Safari, Chrome & OpéraComment faire pour installer Firebug sur IE, Safari, Chrome & OpéraLire la suite

Lancement Les outils de débogage

Cela ne pouvait pas être plus facile. Dans Chrome, il suffit de frapper CTRL-SHIFT-I (CMD-ALT-I sur Mac) ou faites un clic droit n`importe où et sélectionnez Inspecter l`élément. Vous devriez voir quelque chose de semblable à ce qui suit:

Il y a une légère différence à ces deux méthodes de lancement de la console de débogage. La touche de raccourci simplement l`ouvrir dans une vue par défaut, alors que Inspecter l`élément se concentrera l`arbre DOM sur l`élément spécifique que vous avez cliqué sur. Ce qui nous amène sur le premier bit impressionnant de fonctionnalités que nous recevons de ces outils.

Éléments & CSS

le Éléments onglet est divisé en deux sections- à gauche est l`arbre DOM complet. Ceci est similaire au code source de la page, mais est nettement plus utile.

Pour commencer, il a été analysable dans une structure d`arbre, de sorte que les éléments peuvent réduire et développer, vous permettant d`examiner les éléments de l`enfant, les parents et les frères et sœurs plus évidemment que la simple lecture du code source. En second lieu, elle reflète les changements dynamiques dans la page résultant de javascript. Par exemple, si votre jQuery était censé être l`ajout d`une classe à certains éléments sur pageLoad, vous verriez que reflété dans l`arborescence DOM, mais pas la source de la page.

Vous pouvez également modifier le DOM là, en double-cliquant dessus. Oui, vous pouvez l`utiliser pour jouer et sites d`édition pour faire des captures d`écran stupides, il est donc idéal pour l`expérimentation simple.

Ici, moi de jouer avec la page d`accueil de nouvelles de la BBC ...

Sur le côté droit vous pouvez voir les règles CSS appliquées à l`élément en cours, y compris qui ont été supplantée par des règles d`ordre supérieur (ceux-ci ont une ligne à travers eux):

Vous pouvez régler ces derniers, ou tout simplement décocher une règle particulière pour voir ce qui se passerait.

Les styles « déroulant calculés » vous montrera un résumé de toutes les règles CSS en cours d`application. Le numéro de ligne et un lien de fichier à l`extrême droite va vous sauter directement dans le fichier des ressources, il a été chargé à partir, bien que dans certains cas, il peut être un fichier réduit (donc tout est sur une ligne).

Gardez à l`esprit que aucune des modifications que vous apportez ici sera sauvé, de sorte que la prochaine fois que vous actualisez la page, il sera de retour à la normale. Si vous jouez avec le CSS, assurez-vous de noter exactement ce que vous avez changé lorsque vous obtenez le résultat souhaité.

Console erreur

Le deuxième onglet le plus important dans la mesure où mon utilisation quotidienne de ces outils fantastiques aller, est la console d`erreur et le débogage, le dernier onglet dans la liste. Pour commencer, les erreurs javascript vont être montré ici. Lorsque vous débutez avec jQuery, vous trouverez peut-être quelques cas de « $ Est indéfini » ou « JQuery est indéfini » - une erreur commune qui signifie que vous avez oublié d`un lien vers jQuery dans l`en-tête. Si vous voyez une erreur que vous ne pouvez pas déchiffrer, il suffit de copier dans une boîte de recherche Google et vous aurez plus que probablement trouver beaucoup d`autres personnes qui ont eu le même problème.

L`erreur sera également pointer vers la ligne exacte de code dans lequel l`erreur première occurred- cliquer dessus pour sauter directement à cette ligne et section de code. Si cela est dans l`un de vos propres scripts, il peut souvent repérer vous directement au délinquant - si l`erreur est plus vague cependant, il peut pointer vers le code source jQuery qui est complètement non lisible.

Qu`il suffise de dire, la console est la première chose que vous devriez vérifier quand quelque chose ne fonctionne pas bien, car il est plus que probable imprimé là une erreur.

Video: Tutorial su come usare Firebug Lite per Chrome

L`autre utilisation de la console est à la sortie de vos propres instructions de débogage personnalisée. Vous pouvez envoyer un peu de texte, comme vous laisser savoir le script a atteint un certain point:

console.log ("obtenu à ce bit dans le code correct, essayer maintenant ...") -

Vous pouvez également des objets entiers de sortie et des variables aussi simples que:

console.log (maVar) -

Essayez maintenant en utilisant une base jQuery pour sélectionner certains éléments, puis la sortie pour voir à quoi ils ressemblent. Vous pouvez l`utiliser pour vérifier ce que vos sélecteurs ont trouvé, par exemple.

Réseau

Le dernier outil dans le jeu d`outils de développeur, je voulais vous montrer aujourd`hui est la Réseau languette. Pour cet onglet pour fonction, vous devez être concentré sur et rafraîchir la page - il va alors saisir toutes les demandes que la page fait, pour la publicité, javascript, CSS, images - tout - et vous donner une ventilation des informations A propos de cette interaction, y compris:

• nom de fichier.
• type de demande (GET ou POST).
• code de réponse le serveur envoyé (200 OK, 304 Non modifié, etc.).
• taille du fichier.
• timing.

En cliquant sur un fichier individuel apportera quelques informations encore plus détaillées sur l`interaction entre votre navigateur et le serveur. Pour moi, ce qui est particulièrement utile lors du débogage des requêtes AJAX - vous pouvez voir exactement quel genre de données ont été envoyées à la demande, et la sortie complète de la réponse donnée par le script côté serveur de réception.

Résumé

J`espère que j`ai les développeurs en herbe armé avec des outils supplémentaires. Si vous avez trouvé cet article utile, je serais vraiment reconnaissant une part, parce que cela me fait sentir tout chaud et floue à l`intérieur, et me dit que vous me voulez écrire plus comme ça. Je salue également les commentaires et commentaires - en particulier, Quels autres outils utilisez-vous en tant que développeur web? Avez-vous un arsenal de plugins de Firefox à votre disposition?