maison › Multimédia › Débogage des erreurs de page Web. Erreurs de script dans Internet Explorer. Causes et solutions. Profilage des requêtes SQL Déboguer une page Web

Débogage des erreurs de page Web. Erreurs de script dans Internet Explorer. Causes et solutions. Profilage des requêtes SQL Déboguer une page Web

En surfant sur Internet navigateur Internet L'Explorateur peut vous envoyer des messages indiquant que la page contient des erreurs et peut ne pas s'afficher correctement. Examinons plusieurs façons de résoudre ce problème.

Instructions

S'il n'y a pas de difficultés visibles dans le fonctionnement du navigateur autre qu'une erreur qui apparaît périodiquement, vous pouvez essayer de désactiver le débogage du script afin que le message n'apparaisse plus (si l'erreur apparaît sur plusieurs sites à la fois, passez au suivant étape). Dans le menu Outils, ouvrez Options Internet, sélectionnez l'onglet Avancé et cochez la case « Désactiver le débogage du script ». Si vous souhaitez désactiver la notification pour toutes les erreurs, décochez la case "Afficher la notification pour chaque erreur de script".

Essayez d'ouvrir le site à l'origine de l'erreur lorsque vous le consultez à partir d'un autre compte ou d'un autre ordinateur pour voir si le problème est local. Si l'erreur apparaît, elle est probablement due à un code de page Web incorrect. Dans ce cas, vous pouvez désactiver le débogage du script en suivant les instructions de l'étape précédente. Si le problème disparaît lorsque vous naviguez sur le site à l'aide d'un autre ordinateur ou d'un autre compte, passez à l'étape suivante.

Peut-être le navigateur Internet Explorer au moment de la visualisation des pages, il ne bloque pas les scripts actifs, Java et ActiveX, qui déterminent l'affichage des informations sur la page. Pour résoudre le problème, vous devez réinitialiser les paramètres de sécurité de votre navigateur. Pour cela, dans le menu « Outils », sélectionnez « Options Internet » et allez dans l'onglet « Sécurité ». Cliquez sur le bouton "Par défaut", puis sur "OK". Si après avoir réexécuté la page sur laquelle l'erreur s'est produite, le problème persiste, essayez la méthode suivante.

Comme vous le savez, le navigateur stocke les fichiers temporaires et les copies de pages dans un dossier séparé pour un accès ultérieur. Si la taille du dossier devient trop grande, certaines pages risquent de ne pas s'afficher correctement. Le problème peut être résolu en vidant périodiquement le dossier contenant les fichiers temporaires. Pour ce faire, ouvrez la boîte de dialogue Options Internet dans le menu Outils. Sous l’onglet Général, dans le groupe Historique, cliquez sur le bouton Supprimer. Cochez les cases Fichiers Internet temporaires, Cookies, Journal et Données de formulaire Web et cliquez sur OK.

Il y en a bien sûr d'autres, je les mentionnerai certainement.

Firebug pour Firefox

Je ne sais pas avec certitude si c'est le cas Pyromane l'ancêtre des autres outils de développement, mais c'est certainement le plus populaire, le plus pratique et le plus fonctionnel aujourd'hui.

Firebug est un module complémentaire pour Firefox, ce qui signifie que vous devez le télécharger depuis le site Web des modules complémentaires de Firefox et l'installer.

Pour déclencher un firebug, appuyez simplement sur F12.

Caractéristiques de ce module complémentaire :

Inspecter et éditer du HTML à changement dynamique ;
Édition CSS à la volée ;
Débogage JavaScript, ligne de commande exécuter des scripts ;
Surveillance des requêtes réseau - vous pouvez voir la taille et les temps de téléchargement des fichiers et des scripts, les en-têtes de requête ;
Analyseur DOM.

Nous pouvons parler longtemps de ces possibilités en détail, mais je pense que tous nos lecteurs les connaissent, et sinon - des informations détaillées est sur la page d'accueil de Firebug ou la même chose dans la traduction d'Ilya Kantor.

En plus du firebug lui-même, vous le trouverez peut-être utile lotion utileà lui - FireCookie, avec lequel (surprise :-) vous pouvez consulter et modifier les cookies.

Barre d'outils du développeur WEB pour Firefox

Un autre ajout utile à Ognelis. Cela ressemble à ceci :

Regardons point par point.

Désactiver

Permet de désactiver JavaScript et de désactiver l'utilisation du cache, ce qui est très utile lors du développement (permet d'être sûr que la page chargée avec dernières mises à jour), annuler les couleurs utilisées sur la page et les remplacer par des couleurs standards, interdire l'envoi de l'en-tête référent (la page à partir de laquelle le référencement a été effectué).

Biscuits

Une option utile pour travailler avec les cookies : vous pouvez les visualiser, les supprimer, les refuser et les ajouter.

CSS

Ce menu stocke la fonctionnalité la plus intéressante de la barre d'outils du développeur : l'édition CSS à la volée. De plus, il est possible d'afficher les CSS, de les désactiver, etc. Selon moi, la présence de touches de raccourci est ici très utile (CTRL+SHIFT+C permet par exemple d'accéder directement à la visualisation des styles de page)

Formes

Tout pour travailler avec des formulaires : afficher les mots de passe, afficher des informations sur les formulaires, convertir les méthodes de formulaire (GET » POST et vice versa) et bien plus encore. Une fonction utile est « Remplir les champs du formulaire » pour remplir automatiquement les champs du formulaire (par exemple, lors du test d'un site, lorsque la fonction de mémorisation des mots de passe est désactivée. Sinon, je ne vois rien d'utile dans cet élément.

Images

Il existe une fonctionnalité utile pour désactiver les images – pour voir à quoi ressemble votre site sans images. Vous pouvez encercler les images, afficher leurs tailles et afficher les attributs alt.

Information

Il y a beaucoup d'options dans ce menu. La fonction d'affichage des attributs class et id sur la page peut être utile. De plus, l'élément « Afficher les informations sur les couleurs » est intéressant : il permet d'obtenir rapidement des informations sur les couleurs utilisées sur la page. "Afficher la taille du document" - afficher la taille de la page. "Afficher les en-têtes de réponse" - afficher les en-têtes de page.

Divers

La fonction la plus fréquemment utilisée consiste à vider le cache. De plus, les fonctions disponibles ici sont « Règle de page » - une règle, « Loupe de page » - une loupe et « Guides de lignes » - plusieurs lignes qui peuvent être utiles pour découper un modèle.

Contour

Mise en évidence de différents éléments de la page - tableaux, titres, liens, cadres, blocs. Redimensionner vous permet de redimensionner la fenêtre du navigateur pour l'adapter à toutes les extensions d'écran standard. Les fonctionnalités des outils pour la validation des pages sont stockées ici. À la fois local et externe. Pratique et accès rapideà la validation du HTML, CSS, etc. Pour valider le HTML, vous pouvez utiliser le raccourci clavier CTRL+SHIFT+H.

Voir la source

Voir code source. Possibilité de visualisation dans une application externe, visualisation du code généré.

J'aime le plus celui dans le coin droit. Il s'agit d'un indicateur d'erreur HTML, CSS et JavaScript rapide. S’il n’y a aucun problème, l’icône est verte et s’il y a des problèmes, l’icône est rouge.

Barre d'outils du développeur Internet Explorer

À partir de la version 8.0, le débogage des erreurs est déjà intégré à ce navigateur. On peut facilement l'appeler Touche F12. C’est vrai qu’il est aussi médiocre qu’un programme des années 90.

Mais il existe un outil beaucoup plus cool pour ce navigateur, la soi-disant barre d'outils de développement Internet Explorer, qui peut être téléchargée à partir du lien.

En apparence, cette barre d'outils ressemble bien sûr à Firebug, mais, hélas, elle n'y est pas encore parvenue. Bien que, d'un autre côté, il possède certaines capacités que Firebug n'a pas. J'appellerais la barre d'outils de développement Internet Explorer une sorte d'hybride de Firebug et Développeur WEB FireFox Barre d'outils.

Comme dans Firebug, il est possible d'inspecter un élément d'un simple clic. Mais si nous pouvons voir immédiatement le remplissage et les marges, ici, une telle opportunité n'existe pas.

De plus, la barre d'outils du développeur Internet Explorer ne met pas à jour dynamiquement l'arborescence des éléments comme le fait Firebug. Autrement dit, si nous modifions quelque chose sur la page en utilisant js, nous ne verrons rien en utilisant cette barre d'outils.

Ce que vous pouvez apprécier, c'est changer le CSS à la volée (un moyen simple de trouver quoi pirater :), la possibilité de désactiver le CSS et les images, la possibilité de vider rapidement le cache et de jouer avec les cookies, un accès rapide à la validation.

Le meilleur : il y a un sélecteur de couleurs intégré, qui vous permet d'obtenir n'importe quelle couleur de la page à l'aide d'une pipette. (il existe un plugin ColorZilla distinct pour ff).

Déboguer DebugBar pour Internet Explorer

DebugBar pour Internet Explorer peut être téléchargé à partir du lien indiqué.

Une extension intéressante en soi. Installé comme panneau supplémentaire au navigateur :

Pour une raison quelconque, il existe un moteur de recherche intégré, une pipette, la possibilité de modifier la taille de la fenêtre et, encore une fois, pour une raison quelconque, la possibilité d'envoyer une page à un ami pour du savon. Même si cela peut être utile. Mais je n'ai pas réussi à profiter de cette opportunité.

De plus, il y a un inspecteur :

Les développeurs n'étaient pas satisfaits de la méthode d'inspection par clic ou par pointage : ils ont proposé quelque chose de plus intéressant. Dans DebugBar, vous devez faire glisser le réticule sur l'élément souhaité pour le voir dans l'arborescence. Il n'est pas possible de modifier le CSS. Mais il existe un validateur et une console js intégrée.

Et si vous fouillez dans les paramètres, vous trouverez ceci :

A la fois drôle et triste.

On sait que la barre d'outils du développeur sera intégrée au huitième explorateur. Ce sera similaire à celui décrit dans le troisième paragraphe, mais nous espérons qu'il sera meilleur.

Déboguer DragonFly pour Opera

DragonFly est intégré à Opera à partir de la version 9.5, il n'est donc pas nécessaire de l'installer. Pour activer Dragonfly, allez dans Outils → Avancé → Outils de développement. Et si en anglais, alors Outils → Avancé → Outils de développement.

Je vous préviens tout de suite que DragonFly est au stade Alpha2, cela explique bon nombre de ses bugs.

Liste des fonctionnalités :

Inspecteur DOM ;
Inspectez par clic (encore une fois, nous ne verrons pas d'indentation comme dans FireFox) ;
Édition ;
Accès rapide à la console d'erreurs.

DF est quelque chose comme une page séparée dans un cadre. Si vous l'ouvrez, il sera ouvert pour tous les onglets (contrairement à Firebug). Par conséquent, avant d'inspecter un élément, nous devons sélectionner dans la liste la page que nous souhaitons visualiser.

Malheureusement, ici, comme dans la barre d'outils Dav d'Internet Explorer, les éléments créés dynamiquement ne sont pas affichés. Et en général, lorsque l'on inspecte la page, aucun JavaScript n'est lancé : les liens et les boutons ne sont pas cliqués. Espérons que nous verrons toutes ces fonctionnalités lorsque DragonFly se rapprochera de sa sortie.

Déboguer l’inspecteur WEB dans Safari

Je dirai tout de suite qu'il s'agit du navigateur Safari J'ai raté l'information, je ne suis donc pas responsable de l'adéquation du matériel, comme on dit.

Afin d'activer l'élément « Développement » dans le menu Safari, vous devez activer l'élément correspondant dans les paramètres (l'onglet « Avancé ») :

Dans le menu « Développement », les fonctions suivantes sont à notre disposition :

Regardons de plus près l'inspecteur WEB :

Par défaut, l'inspecteur s'ouvre en mode d'affichage HTML. Mais il peut être basculé en mode d'affichage DOM. A cet effet, il y a un interrupteur sur la plaque supérieure. Lorsque vous survolez un élément dans l'inspecteur, il sera mis en surbrillance sur la page elle-même. Vous ne pouvez pas voir le remplissage, modifier le balisage ou le CSS à la volée, ni voir les modifications dynamiques dans DOMe à la volée comme vous le pouvez dans FireBug. Mais il faut admettre que c'est très mignon.

Si vous souhaitez travailler avec l'inspecteur dans une fenêtre de navigateur, vous pouvez cliquer sur le bouton dans le coin inférieur gauche.

Même dans Safari, une fonction telle que « Network Timeline » est disponible (le bouton « Network » dans l'inspecteur) :

Vous pouvez clairement voir quand et combien de temps il faut pour télécharger des fichiers. Vous pouvez également afficher les en-têtes de requête, mais malheureusement, vous ne pouvez pas afficher le contenu lui-même.

Débogage pour les développeurs dans Google Chrome

Lame est né sous une forme avancée, et il dispose immédiatement, bien que tordu pour l'instant, mais toujours d'outils pour les développeurs.

Inspecteur DOM ;
débogueur javascript ;
Console JavaScript.

Afin d'inspecter n'importe quel élément, vous devez faire un clic droit dessus et menu contextuel sélectionnez « Afficher le code de l'élément » :

La fonctionnalité est la même que dans Safari : les éléments sont mis en surbrillance lorsqu'ils sont survolés, mais l'édition CSS et HTML n'est pas disponible et les modifications dans le DOM ne sont pas suivies. Mais le bouton dans le coin inférieur gauche, qui doit attacher l'inspecteur à la fenêtre du navigateur, ne fonctionne pas.

Dans l'onglet « Ressources », nous pouvons voir ce qui suit :

Légèrement différent de l'échelle en safari. Les éléments translucides dans ce diagramme montrent les tailles relatives des fichiers et les couleurs indiquent le temps de chargement. D’une manière ou d’une autre, il est évident que cette partie de Chrome est loin d’être terminée.

Dans cet article, j'ai examiné les extensions et les éléments intégrés de navigateur les plus connus.

Il y en a d'autres, par exemple :

Internet Explorer WEB Development Helper - un bon assistant pour les développeurs ASP.NET (Internet Explorer) ;
Barre d'outils du développeur WEB - barre d'outils pour Internet Explorer et FireFox. Il existe plusieurs fonctionnalités utiles ;
Barre d'outils d'accessibilité WEB - barre d'outils pour Internet Explorer. Rien d'interessant.

S'il y a des modules complémentaires que je n'ai pas mentionnés, mais qui devraient l'être, ou s'il y a des fonctions pour les extensions mentionnées que j'ai manquées, veuillez écrire.

Profitez-en pour votre santé !

Écrire du HTML, c'est bien, mais comment savoir où se trouve l'erreur lorsque quelque chose ne fonctionne pas ? Cet article décrit plusieurs outils qui peuvent vous aider à rechercher et à corriger les erreurs HTML.

Le débogage n'est pas effrayant

Lorsque vous écrivez du code, tout se passe généralement bien jusqu'à ce que vous commettiez une erreur. Donc, votre code ne fonctionne pas ou ne fonctionne pas comme prévu. Si vous essayez de compiler un programme Rust défectueux, le compilateur affichera une erreur :

Dans ce cas, le message d'erreur est relativement simple à comprendre : "chaîne de guillemets doubles non terminée". Si vous regardez attentivement println!(Hello, world!"), vous remarquerez qu'il manque double citation. Bien entendu, les messages d’erreur peuvent devenir beaucoup plus difficiles à comprendre à mesure que votre code se développe, et même les cas les plus simples peuvent sembler intimidants à ceux qui ne connaissent rien à Rust.

Mais n'ayez pas peur de déboguer ! Pour écrire et déboguer confortablement n’importe quel code, vous devez comprendre le langage et ses outils.

HTML et débogage

HTML n'est pas aussi difficile à comprendre que Rust. Le code HTML n'est compilé sous aucune autre forme avant que le navigateur ne l'analyse et affiche le résultat (il est interprété et non compilé). Syntaxe Éléments HTML beaucoup plus clair que les « vrais langages de programmation » tels que Rust, JavaScript ou Python. La façon dont les navigateurs lisent le HTML est plus tolérant que les langages de programmation qui interprètent leur code de manière plus stricte. C'est à la fois mauvais et bon.

Code tolérant

Alors, que signifie tolérant ? De manière générale, lorsque vous gâchez votre code, vous rencontrerez deux types d'erreurs :

Erreurs de syntaxe: Ce sont des fautes d’orthographe, comme c’était le cas ci-dessus dans l’exemple Rust. Ceux-ci sont généralement faciles à résoudre, à condition que vous soyez familier avec la syntaxe du langage et la signification des messages d'erreur.
Erreurs logiques: Ce sont des erreurs qui apparaissent lorsque la syntaxe est correcte, mais que le code ne remplit pas son objectif, c'est-à-dire que le programme ne s'exécute pas correctement. Celles-ci sont plus difficiles à corriger que celles de syntaxe car il n'y a aucun message indiquant où vous avez commis une erreur.

HTML ne souffre pas d'erreurs de syntaxe car le navigateur lit le code avec tolérance, dans le sens où les pages peuvent être restituées même si des erreurs de syntaxe sont présentes. Les navigateurs ont des règles intégrées pour interpréter les balises mal orthographiées, et vous pouvez exécuter quelque chose même si vous vouliez dire autre chose. Cela peut être un vrai problème !

Sur une note: HTML est lisible car lors de l'apparition du Web, il a été décidé de permettre aux gens de publier du contenu même si le code était incorrect, car cela est bien plus important que de s'assurer que la syntaxe est absolument correcte. Le Web ne serait pas aussi populaire aujourd’hui s’il était strict envers les nouveaux arrivants.

Apprentissage actif : présentation du code tolérant

Il est temps d'explorer la nature du code tolérant en HTML.

Validation HTML

L’exemple ci-dessus montre clairement qu’il vaut la peine de vérifier la validité du HTML. Dans l’exemple simple ci-dessus, vous pouvez simplement parcourir l’intégralité du code et trouver les erreurs, mais qu’en est-il des pages énormes et complexes ?

Il est préférable de vérifier la page dans un service de validation de balisage. Il a été créé et maintenu par le W3C, une organisation qui s'occupe des spécifications HTML, CSS et autres technologies Web. Le service vérifiera votre code HTML et générera un rapport sur les erreurs qu'il contient.

Le HTML peut être vérifié à l'adresse en téléchargeant le fichier ou simplement en le copiant sur la page.

Apprentissage actif : Valider un document HTML

Ouvrez le service de validation de balisage dans votre navigateur.
Passez en mode Valider par saisie directe.
Copiez l'intégralité du code du document (pas seulement le corps) et collez-le dans l'espace de saisie.
Presse Vérifier.

Vous verrez une liste d’erreurs et d’autres informations.

Travailler avec des messages d'erreur

La signification des messages est généralement immédiatement claire, mais il faut parfois travailler dur pour comprendre ce qui se passe. Nous allons maintenant passer en revue toutes les erreurs et comprendre ce qu'elles signifient. Veuillez noter que les messages indiquent la ligne et la colonne de code pour faciliter la recherche des erreurs.

"La balise de fin était implicite, mais il y avait des éléments ouverts" (2 instances) : il n'y a pas de balise de fermeture explicite, bien que le navigateur puisse deviner où elle devrait être. Le message pointe vers la ligne après celle où la balise fermante était attendue, mais vous trouverez le bon endroit.
« Élément non fermé fort » : c'est très simple erreur- élément) indique que son contenu est d'une grande importance, sérieux ou urgence. Les navigateurs affichent généralement du contenu en gras."> n'est pas fermé et le message pointe directement vers la balise d'ouverture.
"La balise de fin forte viole les règles d'imbrication" : L'élément n'est pas imbriqué de manière incorrecte - il n'y a pas de balise de fin correspondante à ce niveau.
"Fin du fichier atteinte à l'intérieur d'une valeur d'attribut. Balise ignorée" : message mystérieux. Le fait est que quelque part (très probablement, à la fin du document), une propriété d'élément a été mal écrite et la fin du fichier s'est retrouvée à l'intérieur de cette propriété. Le lien n'est pas visible dans le navigateur - le problème se situe probablement à proximité.
"Fin du fichier vu et il y avait des éléments ouverts" : Le fichier est terminé, mais certains éléments ne sont pas fermés. Le message indique la fin du fichier, dans ce cas l'élément n'est pas fermé exemple : lien vers la page d'accueil de Mozilla ↩

↩ ↩

Très souvent, les utilisateurs peuvent observer une situation dans laquelle un message d'erreur de script apparaît dans le navigateur (IE). Si la situation est isolée, il n'y a pas lieu de s'inquiéter, mais lorsque de telles erreurs deviennent régulières, il convient de réfléchir à la nature du problème.

Une erreur de script dans Internet Explorer est généralement causée par le navigateur qui ne traite pas correctement le code de la page HTML, la présence de fichiers Internet temporaires, les paramètres du compte et bien d'autres raisons, qui Nous parlerons dans ce matériau. Les méthodes permettant de résoudre ce problème seront également discutées.

Avant de commencer avec les méthodes courantes de diagnostic des problèmes d'Internet Explorer qui provoquent des erreurs de script, vous devez vous assurer que l'erreur ne se produit pas uniquement sur un site spécifique, mais sur plusieurs pages Web à la fois. Vous devez également vérifier la page Web sur laquelle ce problème s'est produit sous un autre compte, sur un autre navigateur et sur un autre ordinateur. Cela vous permettra d'affiner la recherche de la cause de l'erreur et d'exclure ou de confirmer l'hypothèse selon laquelle les messages apparaissent en raison de la présence de certains fichiers ou paramètres sur le PC.

Blocage des scripts actifs d'Internet Explorer, ActiveX et Java

Les scripts actifs, les contrôles ActiveX et Java affectent la manière dont les informations sont générées et affichées sur le site et peuvent être la véritable cause du problème décrit précédemment s'ils sont bloqués sur le PC de l'utilisateur. Pour vous assurer que des erreurs de script se produisent pour cette raison, il vous suffit de réinitialiser les paramètres de sécurité de votre navigateur. Pour ce faire, suivez les recommandations suivantes.

Ouvrez Internet Explorer 11
Service

Dans la fenêtre, allez dans l'onglet Sécurité
Ensuite, cliquez sur le bouton Défaut, puis le bouton D'ACCORD

Fichiers temporaires d'Internet Explorer

Chaque fois que vous ouvrez une page Web, le navigateur Internet Explorer enregistre une copie locale de cette page Web sur votre PC dans des fichiers dits temporaires. Lorsqu'il y a trop de fichiers de ce type et que la taille du dossier les contenant atteint plusieurs gigaoctets, des problèmes d'affichage de la page Web peuvent survenir, à savoir qu'un message d'erreur de script peut apparaître. Nettoyer régulièrement votre dossier de fichiers temporaires peut aider à résoudre ce problème.
Pour supprimer des fichiers Internet temporaires, procédez comme suit.

Ouvrez Internet Explorer 11
Service
Dans la fenêtre, allez dans l'onglet Sont communs
Au chapitre Historique du navigateur cliquez sur le bouton Supprimer…

Dans la fenêtre Supprimer l'historique des avis cochez les cases à côté des éléments Fichiers Internet et sites Web temporaires, Biscuits et les données du site Web, Revue
Cliquez sur le bouton Supprimer

Fonctionnement d'un logiciel antivirus

Des erreurs de script sont possibles lors de l'opération programme antivirus lorsqu'il bloque les scripts actifs, les contrôles ActiveX et Java sur une page ou les dossiers temporaires du navigateur. Dans ce cas, vous devez vous référer à la documentation du produit antivirus installé et désactiver l'analyse des dossiers pour enregistrer les fichiers Internet temporaires, ainsi que le blocage des objets interactifs.

Traitement incorrect du code de la page HTML

Il apparaît généralement sur un site spécifique et indique que le code de la page n'est pas complètement adapté pour fonctionner avec Internet Explorer. Dans ce cas, il est préférable de désactiver le débogage des scripts dans le navigateur. Pour le faire, suivez ces étapes:

Ouvrez Internet Explorer 11
Dans le coin supérieur du navigateur (à droite), cliquez sur l'icône Service sous la forme d'un engrenage (ou la combinaison de touches Alt+X). Puis dans le menu qui s'ouvre, sélectionnez
Dans la fenêtre, allez dans l'onglet En plus
Ensuite, décochez la case Afficher une notification pour chaque erreur de script et appuyez sur le bouton D'ACCORD.

Ceci est une liste des plus raisons courantes, qui provoquent des erreurs de script dans Internet Explorer, donc si vous en avez assez de tels messages, faites un peu attention et résolvez le problème une fois pour toutes.

Sur ce moment Il existe un grand nombre de navigateurs différents qui prennent en charge les normes HTML existantes à des degrés divers. Personnellement, je préfère le navigateur de Mozilla Corporation. Ce navigateur a une longue histoire (il est basé sur le célèbre navigateur Netscape Navigator). J'aime aussi ce navigateur car il prend en charge un système de plugins - des modules complémentaires distribués séparément, une fois connectés, vous pouvez modifier la fonctionnalité et la personnaliser en fonction de vos besoins. Et enfin, ce navigateur est distribué gratuitement et open source, ce qui est également important. Par conséquent, j'ai décidé de décrire les capacités que ce navigateur offre non seulement à l'utilisateur, mais également au développeur de pages Web, ainsi que la simplicité et la commodité du processus de débogage des produits écrits.

Mozilla Firefox est l'un des navigateurs les plus populaires parmi les développeurs et les développeurs Web. Il attire leur attention en raison des opportunités offertes par ce navigateur pour déboguer les projets créés, corriger les erreurs et les améliorer. Le package de navigateur standard comprend une console Java (ou « console d'erreur »). Cet utilitaire vous permet de déboguer les scripts java-script intégrés. Mais bien plus de fonctionnalités sont fournies au navigateur par des plugins tiers, qui peuvent être téléchargés et installés à partir du site officiel de la Fondation Mozilla. Je veux maintenant examiner deux de ces plugins : Web Developer et Firebug. Ces deux modules complémentaires peuvent être téléchargés à partir des liens ci-dessus sur le site Web officiel des modules complémentaires. Après les avoir installés et redémarré le navigateur, le développeur dispose d'un large éventail de possibilités, que je décrirai ci-dessous, tour à tour pour chacun des plugins.

Plugin Firebug

Comme indiqué sur la page officielle : « Firebug s'intègre au navigateur Firefox pour enrichir considérablement la boîte à outils du développeur. Vous pourrez éditer, déboguer et examiner les CSS, HTML et Javascript en direct sur n'importe quelle page Web. » Et c’est effectivement le cas. Regardons quelques-unes des fonctions de ce plugin, à savoir :

Affichage et modification du HTML.
Construire du CSS.
Surveillance des requêtes réseau
Débogage de JavaScript
Recherche JavaScript
Journalisation pour JavaScript

Ce n'est pas une liste complète de toutes ses capacités. Le projet étant open source, n’importe qui peut modifier et ajouter des fonctionnalités.

Pour travailler avec le plugin, vous devez appuyer sur la touche F12 (Ctrl-F12 pour travailler avec lui dans une fenêtre séparée). Après un lancement réussi, nous obtenons ce qui suit : figures 1a, 1b.

Figure 1a. La fenêtre initiale du plugin Firebug.

Figure 1b. La fenêtre initiale du plugin Firebug.

Ensuite, le travail proprement dit avec le plugin commence. Disons que nous devons trouver tel ou tel objet dans le code HTML, ou déterminer comment il est implémenté exactement avec en utilisant CSS fragment actuel. Pour ce faire, il vous suffit de sélectionner les options nécessaires dans le menu de la fenêtre du plugin avec la souris. L'exemple ci-dessous est du HTML en mode Inspecter. Maintenant, en allant à la page du document, sous le curseur de la souris, nous remarquerons une zone rectangulaire, illustrant la zone avec laquelle nous travaillons. Dans la fenêtre du plugin, nous verrons les paramètres HTML et CSS utilisés. De plus, en cliquant sur chacun d'eux, vous pouvez apporter des modifications et les suivre au fil du temps. Les actions décrites sont illustrées dans les figures 2,3,4.

Lors du développement de ce projet, le plugin décrit ci-dessus a été utilisé précisément à ces fins. Cependant, bien qu'aucun script Java n'ait été utilisé ici, le plugin Firebug peut également être utilisé pour le déboguer. Un exemple de débogage est présenté dans la figure 5.

Comme décrit ci-dessus, les fonctionnalités de cette extension ne se limitent pas à cela. Vous pouvez l'étudier dans son intégralité et l'utiliser selon vos besoins en le téléchargeant à partir des liens fournis, après avoir installé Mozilla Firefox.

Plugin Développeur Web

Web Developer est la deuxième extension pour Navigateur Mozilla Firefox est très puissant et fonctionnel, permettant un débogage rapide et efficace. Après l'avoir installé, une barre d'outils supplémentaire apparaîtra dans la fenêtre du navigateur, illustrée à la figure 6.

La poursuite du travail avec le plugin est intuitive. Par exemple, si nous devons effectuer un travail CSS (bien que pas aussi fonctionnel que le plugin Firebug), nous pouvons cliquer sur le menu CSS et verrouiller, activer ou désactiver.

Il est très pratique pour le développeur de pouvoir voir à quoi ressemblera son projet sur des moniteurs avec différentes résolutions. Pour ce faire, vous devez utiliser l'onglet Redimensionner. Ici, vous pouvez définir manuellement autorisations nécessairesécran (800x600, 1024x768, etc.), puis basculez librement entre eux, effectuez un zoom avant ou arrière sur le contenu. Cette fonctionnalité est illustrée à la figure 7.

Cette extension possède également de riches fonctionnalités, toutes décrites et disponibles sur les sites officiels.

Liste des sources utilisées

1. www.getfirebug.com
Site officiel du module complémentaire.
2. http://addons.mozilla.org
Le site officiel de Mozilla, où les plugins pour Navigateur Firefox, informations pour les développeurs, informations sur l'utilisation des plugins.
3. http://chrispederick.com/work/web-developer/
Site officiel du développeur de plugins WebDeveloper.

Lors de la navigation sur Internet, Internet Explorer peut afficher des messages indiquant que la page contient des erreurs et peut ne pas s'afficher correctement. Examinons plusieurs façons de résoudre ce problème.

Instructions

Internet Explorer ne bloque peut-être pas les scripts actifs, Java et ActiveX qui contrôlent la façon dont les informations sont affichées sur la page lorsque vous consultez les pages. Pour résoudre le problème, vous devez réinitialiser les paramètres de sécurité de votre navigateur. Pour cela, dans le menu « Outils », sélectionnez « Options Internet » et allez dans l'onglet « Sécurité ». Cliquez sur le bouton "Par défaut", puis sur "OK". Si après avoir réexécuté la page sur laquelle l'erreur s'est produite, le problème persiste, essayez la méthode suivante.

Très souvent, les utilisateurs peuvent rencontrer une situation dans laquelle un message d'erreur de script apparaît dans le navigateur Internet Explorer (IE). Si la situation est isolée, il n'y a pas lieu de s'inquiéter, mais lorsque de telles erreurs deviennent régulières, il convient de réfléchir à la nature du problème.

Une erreur de script dans Internet Explorer est généralement causée par le navigateur qui traite incorrectement le code de la page HTML, la présence de fichiers Internet temporaires, les paramètres de compte et bien d'autres raisons, qui seront abordées dans ce document. Les méthodes permettant de résoudre ce problème seront également discutées.

Avant de commencer avec les méthodes courantes de diagnostic des problèmes d'Internet Explorer qui provoquent des erreurs de script, vous devez vous assurer que l'erreur ne se produit pas uniquement sur un site spécifique, mais sur plusieurs pages Web à la fois. Vous devez également vérifier la page Web sur laquelle ce problème s'est produit sous un autre compte, sur un autre navigateur et sur un autre ordinateur. Cela vous permettra d'affiner la recherche de la cause de l'erreur et d'exclure ou de confirmer l'hypothèse selon laquelle les messages apparaissent en raison de la présence de certains fichiers ou paramètres sur le PC.

Blocage des scripts actifs d'Internet Explorer, ActiveX et Java

Ouvrez Internet Explorer 11
Service

Dans la fenêtre, allez dans l'onglet Sécurité
Ensuite, cliquez sur le bouton Défaut, puis le bouton D'ACCORD

Fichiers temporaires d'Internet Explorer

Ouvrez Internet Explorer 11
Dans le coin supérieur du navigateur (à droite), cliquez sur l'icône Service sous la forme d'un engrenage (ou la combinaison de touches Alt+X). Puis dans le menu qui s'ouvre, sélectionnez
Dans la fenêtre, allez dans l'onglet Sont communs
Au chapitre Historique du navigateur cliquez sur le bouton Supprimer…

Dans la fenêtre Supprimer l'historique des avis cochez les cases à côté des éléments Fichiers Internet et sites Web temporaires, Cookies et données du site Web, Revue
Cliquez sur le bouton Supprimer

Fonctionnement d'un logiciel antivirus

Des erreurs de script sont possibles grâce au fonctionnement d'un programme antivirus lorsqu'il bloque les scripts actifs, les contrôles ActiveX et Java sur une page ou les dossiers d'enregistrement des fichiers temporaires du navigateur. Dans ce cas, vous devez vous référer à la documentation du produit antivirus installé et désactiver l'analyse des dossiers pour enregistrer les fichiers Internet temporaires, ainsi que le blocage des objets interactifs.

Traitement incorrect du code de la page HTML

Ouvrez Internet Explorer 11
Dans le coin supérieur du navigateur (à droite), cliquez sur l'icône Service sous la forme d'un engrenage (ou la combinaison de touches Alt+X). Puis dans le menu qui s'ouvre, sélectionnez
Dans la fenêtre, allez dans l'onglet En plus
Ensuite, décochez la case Afficher une notification pour chaque erreur de script et appuyez sur le bouton D'ACCORD.

Ceci est une liste des raisons les plus courantes qui provoquent des erreurs de script dans Internet Explorer, donc si vous en avez assez de tels messages, faites un peu attention et résolvez le problème une fois pour toutes.

Il y en a bien sûr d'autres, je les mentionnerai certainement.

Firebug pour Firefox

Je ne sais pas avec certitude si c'est le cas Pyromane L'ancêtre des autres outils de développement, mais c'est certainement le plus populaire, le plus pratique et le plus fonctionnel de .

Firebug est un module complémentaire pour Firefox, ce qui signifie que vous devez le télécharger depuis le site Web des modules complémentaires de Firefox et l'installer.

Pour déclencher un firebug, appuyez simplement sur F12.

Caractéristiques de ce module complémentaire :

Inspecter et éditer du HTML à changement dynamique ;
Édition CSS à la volée ;
Débogage JavaScript, ligne de commande pour exécuter des scripts ;
Surveillance des requêtes réseau - vous pouvez voir la taille et les temps de téléchargement des fichiers et des scripts, les en-têtes de requête ;
Analyseur DOM.

Vous pouvez parler longtemps de ces possibilités en détail, mais je pense que tous nos lecteurs les connaissent, et sinon, des informations détaillées se trouvent sur la page d'accueil de Firebug ou la même chose dans la traduction d'Ilya Kantor.

En plus du Firebug lui-même, vous aurez peut-être besoin d'un module complémentaire utile - FireCookie, avec lequel (surprise :-) vous pouvez consulter et modifier les cookies.

Barre d'outils du développeur WEB pour Firefox

Un autre ajout utile à Ognelis. Cela ressemble à ceci :

Regardons point par point.

Désactiver

Permet de désactiver JavaScript, de désactiver l'utilisation du cache, ce qui est très utile lors du développement (permet d'être sûr que la page est chargée avec les dernières mises à jour), d'annuler les couleurs utilisées sur la page et de les remplacer par des couleurs standards. , désactivez l'envoi de l'en-tête du référent (la page à partir de laquelle le référencement a été effectué) ).

Biscuits

Une option utile pour travailler avec les cookies : vous pouvez les visualiser, les supprimer, les refuser et les ajouter.

CSS

Formes

Images

Information

Divers

Contour

Mise en évidence de différents éléments de la page - tableaux, titres, liens, cadres, blocs. Redimensionner vous permet de redimensionner la fenêtre du navigateur pour l'adapter à toutes les extensions d'écran standard. Les fonctionnalités des outils pour la validation des pages sont stockées ici. À la fois local et externe. Accès pratique et rapide à la validation du HTML, CSS et plus encore. Pour valider le HTML, vous pouvez utiliser le raccourci clavier CTRL+SHIFT+H.

Voir la source

Afficher le code source. Possibilité de visualisation dans une application externe, visualisation du code généré.

Barre d'outils du développeur Internet Explorer

Mais il existe un outil beaucoup plus cool pour ce navigateur, la soi-disant barre d'outils de développement Internet Explorer, qui peut être téléchargée à partir du lien.

Comme dans Firebug, il est possible d'inspecter un élément d'un simple clic. Mais si nous pouvons voir immédiatement le remplissage et les marges, ici, une telle opportunité n'existe pas.

Le meilleur : il y a un sélecteur de couleurs intégré, qui vous permet d'obtenir n'importe quelle couleur de la page à l'aide d'une pipette. (il existe un plugin ColorZilla distinct pour ff).

Déboguer DebugBar pour Internet Explorer

DebugBar pour Internet Explorer peut être téléchargé à partir du lien indiqué.

Une extension intéressante en soi. Installé comme panneau supplémentaire au navigateur :

De plus, il y a un inspecteur :

Et si vous fouillez dans les paramètres, vous trouverez ceci :

A la fois drôle et triste.

On sait que la barre d'outils du développeur sera intégrée au huitième explorateur. Ce sera similaire à celui décrit dans le troisième paragraphe, mais nous espérons qu'il sera meilleur.

Déboguer DragonFly pour Opera

Je vous préviens tout de suite que DragonFly est au stade Alpha2, cela explique bon nombre de ses bugs.

Liste des fonctionnalités :

Inspecteur DOM ;
Inspectez par clic (encore une fois, nous ne verrons pas d'indentation comme dans FireFox) ;
Édition ;
Accès rapide à la console d'erreurs.

Déboguer l’inspecteur WEB dans Safari

Je dirai tout de suite qu'il s'agit du navigateur Safari J'ai raté l'information, je ne suis donc pas responsable de l'adéquation du matériel, comme on dit.

Afin d'activer l'élément « Développement » dans le menu Safari, vous devez activer l'élément correspondant dans les paramètres (l'onglet « Avancé ») :

Dans le menu « Développement », les fonctions suivantes sont à notre disposition :

Regardons de plus près l'inspecteur WEB :

Si vous souhaitez travailler avec l'inspecteur dans une fenêtre de navigateur, vous pouvez cliquer sur le bouton dans le coin inférieur gauche.

Même dans Safari, une fonction telle que « Network Timeline » est disponible (le bouton « Network » dans l'inspecteur) :

Débogage pour les développeurs dans Google Chrome

Lame est né sous une forme avancée, et il dispose immédiatement, bien que tordu pour l'instant, mais toujours d'outils pour les développeurs.

Inspecteur DOM ;
débogueur javascript ;
Console JavaScript.

Afin d'inspecter n'importe quel élément, vous devez faire un clic droit dessus et sélectionner « Afficher le code de l'élément » dans le menu contextuel :

Dans l'onglet « Ressources », nous pouvons voir ce qui suit :

Dans cet article, j'ai examiné les extensions et les éléments intégrés de navigateur les plus connus.

Il y en a d'autres, par exemple :

Internet Explorer WEB Development Helper - un bon assistant pour les développeurs ASP.NET (Internet Explorer) ;
Barre d'outils du développeur WEB - barre d'outils pour Internet Explorer et FireFox. Il existe plusieurs fonctionnalités utiles ;
Barre d'outils d'accessibilité WEB - barre d'outils pour Internet Explorer. Rien d'interessant.

S'il y a des modules complémentaires que je n'ai pas mentionnés, mais qui devraient l'être, ou s'il y a des fonctions pour les extensions mentionnées que j'ai manquées, veuillez écrire.

Profitez-en pour votre santé !

Internet Explorer 11 sur Windows 8.1 et Windows 7 est livré avec un ensemble d'outils de développement entièrement repensés et améliorés intégrés au navigateur pour aider les développeurs à créer, dépanner et optimiser l'expérience des sites Web et des applications modernes sur plusieurs appareils. Les nouveaux outils, que nous appelons simplement F12 par souci de concision, permettent aux développeurs Web de travailler rapidement et efficacement.

Les équipes de Visual Studio et d'Internet Explorer ont travaillé ensemble pour créer les outils F12, construits sur le principe d'aider les développeurs à passer rapidement d'un problème à une solution en utilisant des données significatives. La nouvelle suite F12 offre une expérience Web rapide et flexible avec des outils pour diagnostiquer et résoudre les problèmes de performances, ainsi que des outils pour vous aider à mieux comprendre comment Internet Explorer met en page et restitue les applications Web. Les outils F12 prennent en charge le flux de travail rapide et interactif utilisé par les développeurs Web modernes.

Ensemble d'outils universel

Le nouveau kit F12 aide les développeurs à passer rapidement d'un problème à une solution. Certaines nouvelles fonctionnalités intéressantes incluent :

Outils de réactivité de l'interface utilisateur et de profilage de la mémoire pour aider les développeurs à créer des applications Web rapides et réactives.
Live DOM Explorer et vérificateur CSS qui se mettent à jour avec la page afin que les développeurs puissent explorer de manière interactive la manière dont le contenu dynamique affecte le balisage et le style.
Activez le débogage JavaScript pour qu'il s'exécute rapidement sans actualisation de la page, afin que les développeurs puissent démarrer plus rapidement

En utilisant les outils F12, vous remarquerez de nombreuses autres améliorations qui vous aideront à obtenir un flux de travail rapide et interactif :

Accédez rapidement à ces outils en cliquant avec le bouton droit sur un élément de menu à l'aide de « l'élément à cocher »
Interaction efficace au clavier
Possibilité étendue de copier des éléments et des composants à partir d'outils, afin qu'ils puissent être collés dans n'importe quel éditeur sans formatage supplémentaire

Le plus important est que ces outils affichent désormais les informations les plus complètes et les plus précises - des règles @media et!important dans l'Explorateur DOM à la structure des coûts élémentaires dans le Profiler de réponse de l'interface utilisateur. Ces outils fournissent également des données directement pertinentes ; par exemple, le profileur de mémoire identifie les nœuds DOM qui sont « actifs » mais non référencés à partir du balisage ou de l'arborescence de rendu.

La nouvelle suite F12 étend les capacités de Visual Studio pour offrir aux développeurs une expérience cohérente et transparente sur tous nos outils et frameworks de développement Web.

Jetons maintenant un rapide coup d'œil à ces outils en action.

Profilage d'applications avec l'analyseur de réponse de l'interface utilisateur

UI Response Analyzer vous aide à comprendre exactement où le temps CPU est dépensé afin que votre application puisse atteindre son plein potentiel de performances. Cet outil vous donne un aperçu essentiel du fonctionnement interne d'Internet Explorer, en fournissant une visualisation à l'exécution du code HTML, CSS et JavaScript, ainsi que des effets associés importants tels que le balisage et le garbage collection. En un coup d'œil, vous pouvez voir exactement à quelle vitesse votre application répond et s'affiche. Cela vous permettra d'identifier des sources spécifiques goulots d'étranglement et adopter une approche plus significative de son optimisation.

Profilage de sites Web

Analyser l'utilisation de la mémoire des applications avec Memory Profiler

Cet analyseur de mémoire vous aidera à éviter les fuites de mémoire ou la consommation excessive de mémoire. Création d'applications Web fonctionnant 24 heures sur 24 pour les clients ou complexes applications interactives signifie souvent que leur concepteur doit accorder une attention particulière aux problèmes d'utilisation de la mémoire.

Bien que JavaScript soit un environnement de récupération de place, les applications consomment généralement plus de mémoire simplement parce que les références d'objet n'ont pas été (et ne peuvent pas être) libérées. Un analyseur de mémoire peut vous aider à identifier ces problèmes en fournissant des informations sur chaque objet de la page, qu'il s'agisse d'un objet JavaScript ou d'un objet DOM. Avec ces informations, vous pouvez, par exemple, voir combien de mémoire est détenue par un élément et quels objets soutiennent sa préservation. Mais surtout, vous pouvez comparer deux instantanés et voir ce qui a changé. Cela vous permettra de comprendre pourquoi votre application utilise plus de mémoire et de la corriger.

Instantané de mémoire de tas affichant les éléments DOM désactivés

Comprenez rapidement les problèmes de performances des applications avec le tableau de bord des performances

Pour vous aider à identifier rapidement les problèmes affectant les performances de votre page, Internet Explorer 11 inclut un widget sur la page appelé Tableau de bord des performances, accessible à l'aide de Ctrl+Maj+U ou de l'élément de menu Outils ( Alt+T). Ce panneau affiche dynamiquement des statistiques dans Internet Explorer pour les mesures de performances clés telles que le temps de rendu, la mémoire, les images par seconde (fps) et l'utilisation du processeur. Le tableau de bord des performances ne nécessite pas l'utilisation des outils F12 et peut également être utilisé dans les navigateurs modernes.

Avec le tableau de bord des performances, vous pouvez identifier rapidement les interactions entre les pages qui provoquent des bégaiements de framerate ou une utilisation élevée du processeur. Vous pouvez ensuite passer aux outils F12 pour reproduire le problème et y trouver une solution.

Inspecter les éléments et modifier le balisage et les styles à l'aide de l'explorateur DOM

DOM Explorer simplifie le processus interactif de configuration des requêtes @media et des règles CSS et de leurs propriétés. C'est pourquoi interface utilisateur votre application devient une expérience multi-appareils hautement efficace et réactive. Vous pouvez rapidement démarrer sur une page Web en cliquant avec le bouton droit et en inspectant l'élément souhaité, ce qui déclenche les outils F12 ainsi que cet élément sélectionné dans l'Explorateur DOM, affichant dynamiquement les règles DOM et CSS appliquées. Les tableaux DOM et CSS rendus sont dynamiques, vous permettant de comprendre comment Internet Explorer interprète vos règles de balisage, de style et CSS. Lorsque vous interagissez avec la page ou la modifiez à l'aide de DOM Explorer, les modifications que vous apportez seront immédiatement reflétées.

Vérification du balisage et des styles

Lorsque vous apportez des modifications à une table CSS, DOM Explorer permet d'obtenir facilement la valeur correcte d'une ou plusieurs propriétés à l'aide d'IntelliSense. Vous pouvez facilement voir quelles propriétés sont erronées ou non reconnues, puis copier la règle pour la réappliquer à votre source.

Débogage de JavaScript à l'aide d'un débogueur et d'une console

Le nouveau débogueur JavaScript vous offre les outils nécessaires pour localiser et corriger rapidement le code défectueux. Le débogueur JavaScript peut ouvrir et inspecter plusieurs fichiers, même si votre bibliothèque de scripts a été réduite, définir des points d'arrêt et des traces, inspecter les objets JavaScript, les valeurs, les chaînes de portée et afficher le contenu de la pile. Lorsque vous exécutez les outils F12, le débogueur JavaScript se lance également immédiatement, vous pouvez donc commencer immédiatement

Lors du débogage, vous souhaiterez probablement interagir avec votre site Web. La console est l'outil clé pour accomplir cette tâche. Vous pouvez accéder à la console à tout moment, ce qui rend efficace l'utilisation de cet environnement interactif avec IntelliSense et les visualiseurs d'objets. La console fournit également une large gamme d'API spécialisées, vous permettant de consigner les sorties, d'analyser le temps passé dans un code spécifique et de fournir des rendus d'objets lorsque vous devez effectuer une inspection approfondie des objets JavaScript.

En résumé

Cet article de blog fournit simplement un aperçu des nouveaux éléments des outils F12. tu peux trouver liste complète nouveau Fonctionnalité, disponible pour les développeurs dans Internet Explorer 11 dans l'article « Quoi de neuf dans les outils F12 » et dans le « Guide du développeur Internet Explorer 11 Preview ». Vous pouvez également en apprendre davantage dans la démo de test d'Internet Explorer, "F12 Adventure".

Nous attendons avec impatience vos commentaires et espérons entretenir une longue relation avec la communauté des développeurs. Partagez vos suggestions via l’outil Commentaires et suggestions d’Internet Explorer 11 ou sur le site Connect.

PJ Hough
, vice-président, Visual Studio

Populaire dans la catégorie :