Debugging GeoNode in the Browser¶
Cette section traite des techniques de débogage du navigateur et des réponse associées des bogues à l’aide de l’extension du navigateur web Firefox nommée Firebug. Les concepts traités s’appliquent aux autres outils des navigateurs mais peuvent varier selon la terminologie.
Une autre extension Firefox à noter est ‘jsonview’. Cette extension prend en charge le format d’affichage des réponses JSON et s’intègre parfaitement avec Firebug.
Références :
Net Tab¶
L’onglet net permet de visualiser tout le trafic réseau depuis le navigateur. Les sous-onglets (comme l’onglet “Images” sélectionné) permettent le filtrage par type de trafic.
Firebug Net Tab
Dans cette capture d’écran, le pointeur de la souris affiche le contenu de l’image et la pleine URL demandée. On peut faire un clic droit pour copier-coller l’URL ou la vue dans un onglet séparé. Ceci est utile pour obtenir des URL de test. Les rubriques grisées indiquent que la ressource mise en cache par l’intermédiaire de conditionnel-get (le 304 non modifié). Autres informations avancées très utiles comprennent la taille de la réponse et le chargement graphiques d’indicateur sur la droite. En bas, notez la taille totale et les informations de synchronisation.
Net Tab Exercices¶
Aller aux pages de couches/cartes/Rechercher et regarder les diverses demandes. Notez le sous-onglet XHR. Demander de regarder les différents onglets spécifiques : en-têtes, params, etc..
Utilisez l’option ‘désactiver le cache du navigateur’ et voir comment elle affecte le chargement de la page. Discuter les avantages et les défis de la mise en cache.
DOM Tab¶
L’onglet DOM affiche tous les objets de la fenêtre de niveau supérieur. En creusant, cela peut être un moyen utile pour savoir ce qui se passe dans une page.
Firebug DOM Tab
Dans cet exemple, la souris est positionnée sur l’objet app. Notez la vue de haut niveau des objets et leurs champs. L’onglet de console permet d’interagir avec les objets.
DOM Tab Exercices¶
Descendre dans l’onglet DOM.
Utilisez la console pour exercer interactivement jquery.
Utiliser la console pour interagir avec l’application/carte ou d’autres objets de la page
Script Tab¶
L’onglet script permet la visualisation de scripts et de débogage.
La capture d’écran affiche un point d’arrêt défini à la ligne 3, le code actuel s’arrête à la ligne 8, et le pointeur de la souris affiche la valeur de la variable ‘class_list’. Sur la droite, l’onglet ‘Watch’ affiche les différentes variables et étendues et offre un zoom avant vue semblable à la vue de DOM. L’onglet pile affiche le contexte de pile d’exécution en dehors du cadre actuel.
Script Tab Exercices¶
Faire défiler un code
Regardez les différentes fonctionnalités : variables, scopes, DOM drill-down
HTML Tab¶
La balise HTML permet de visualiser et de creuser dans le DOM. Il s’agit d’une fonction extrêmement utile lorsque vous faites un travail CSS ou HTML.
La capture d’écran affiche un élément d’ “article” ,le résultat de recherche a mis en évidence avec rembourrage et marge en jaune et violet. La structure DOM est affichée sur la gauche et le panneau de droite affiche les règles de style spécifique tandis que l’onglet calculée affiche les règles de style efficace. L’onglet mis en page affiche les règles et valeurs de propriété tandis que l’onglet DOM affiche une vue de débogage/DOM-comme des propriétés de l’objet réel.
HTML Tab Exercices¶
Identifier les éléments, regardez les onglets sur la droite
Modifier les styles, ajouter des styles et des nouvelles règles
Modifiez les éléments HTML existants via le raw et arborescence