Débogage de votre application côté client

Le débogage de JavaScript côté client peut être une expérience frustrante. L'environnement dans lequel votre code s'exécute signifie qu'un grand nombre de choses pourraient mal tourner: compatibilité des fonctionnalités du navigateur, problèmes de dépendance, ressources ne pouvant pas être téléchargées, pour n'en nommer que quelques-unes.

Dans cet article, j'ai présenté quelques conseils sur débogage côté client que vous ne connaissez peut-être pas et pourrait changer la donne dans votre carrière de développeur!

Table des matières

Les outils de développement des navigateurs fournissent diverses informations que les développeurs peuvent utiliser pour analyser et dépanner les applications Web. Cela inclut l'inspection du HTML rendu; consulter les journaux d'informations ou d'erreurs; et en examinant les informations relatives au réseau telles que les types de connexions et leur état, les ressources chargées, etc. Aujourd'hui, la plupart des navigateurs intègrent les DevTools.

En fonction des informations que vous souhaitez consulter, les DevTools les regroupent en différentes tabs:

• L'inspecteur Elements où vous pouvez inspecter les éléments HTML rendus et les styles appliqués
• L'onglet Console qui agit comme une interface de ligne de commande utilisée pour afficher les erreurs, avertissements et autres journaux d'information; il peut également être utilisé pour interagir avec JavaScript et voir les résultats en temps réel
• L'onglet Réseau qui affiche des informations sur les connexions, leurs types et leur état, ainsi que les ressources chargées sur la page; cet outil est principalement utilisé pour déterminer les ressources chargées, les requêtes envoyées ou les réponses reçues et l'état HTTP

Les DevTools contiennent de nombreux autres outils que vous pouvez utiliser pour dépanner votre site Web et surveiller ses performances / santé. Cependant, dans cet article, je vais principalement me concentrer sur la console et vous apprendre quelques astuces pour déboguer des applications côté client.

IntelliSense

L'un des nombreux avantages d'une application IDE est la fonctionnalité IntelliSense (complétion de code) qui nous dépendons chaque jour. Cela nous aide à éviter de faire des erreurs de frappe / casse des caractères des variables ou des fonctions. La meilleure partie de cela est que nous pouvons voir les méthodes / propriétés disponibles dans une certaine classe ou un certain objet.

Aujourd'hui, les DevTools des navigateurs peuvent y arriver. C'est pas cool?

Test du code JavaScript

Outre l'achèvement du code, la console DevTools peut également exécuter du code JavaScript et afficher les résultats en temps réel. Vous pouvez tester votre code avant de l'ajouter à votre application.

Afficher les journaux

Vous êtes-vous déjà demandé pourquoi rien ne se passe lors de l'interaction avec les commandes de la page? Ouvrez les DevTools et surveillez l'onglet Console pour savoir si l'application génère une erreur.

Requêtes HTTP

Erreurs JavaScript

C'est un scénario courant que les applications ont tendance à ne rien faire quand on attend d'eux. Une exception JavaScript arrête probablement l'exécution de tous les autres scripts de la page. En surveillant la console à tout moment, ce problème peut être identifié dès son apparition.

Journaux de la console

Similaire à Debug.WriteLine de .NET Framework () la console DevTools a également sa propre fonction pour imprimer des informations, la méthode console.log () . Il est couramment utilisé pour imprimer les variables et les résultats renvoyés par les fonctions, ainsi que pour gérer les exceptions en silence sans faire planter l'ensemble de l'application.

Travailler avec des éléments

De nombreux développeurs, dont nous, travaillent avec des éléments tous les jours, essayant de trouver des moyens de manipuler le DOM HTML et de le plier à nos besoins. En utilisant la console, nous pouvons facilement déterminer laquelle de nos méthodes réussira avant même d'écrire le code dans la production.

Éléments HTML de référence

L'exemple suivant montre comment référencer des éléments HTML à l'aide de JavaScript pur dans la console.

Interagir avec des éléments HTML

Voici un exemple de manipulation visuelle du HTML éléments. Bien qu'il ne s'agisse que d'un changement temporaire, le code, s'il est prouvé qu'il fonctionne, peut être ajouté à la page et exécuté chaque fois que cela est nécessaire.

Travailler avec RadGrid

Travailler avec Telerik RadGrid n'est pas plus compliqué. Avec ses riches API côté client ]vous pouvez avoir un contrôle significatif dessus.

Get Référence

En tant que composants Web Telerik, RadGrid et tous les autres composants Telerik ont ​​des API pour faciliter le développement. Ils fournissent un moyen facile d'accéder à leurs composants et objets JavaScript, et de personnaliser leur comportement en fonction de vos besoins. [19659014] Pour plus d'informations, consultez l'article de documentation Obtenir une référence côté client à un objet de contrôle .

Voici un exemple d'obtention d'une référence à RadGrid en utilisant quelques approches courantes:

Modifier la taille de page

Une fois que vous avez fait référence à la grille, vous pouvez commencer à utiliser les propriétés de l'objet et les méthodes pour la manipuler.

L'exemple suivant montre la modification de la taille de page à l'aide de s et_pageSize () méthode côté client de l'objet TableView .

Passer à une autre page

Voici un exemple de modification de l'index de la page actuelle en utilisant la méthode set_currentPageIndex () .

Trier une colonne

Et voici un exemple de tri utilisant la fonction sort () de l'objet TableView ].

Debugger

L'instruction dont nous ne pouvons pas nous passer en développant notre code JavaScript. C'est le débogueur ; ].

En utilisant cette puissante instruction, nous pouvons facilement suspendre l'exécution de notre script à une ligne exacte que nous voulons et inspecter le code JavaScript avant cette ligne.

Imaginons que vous compreniez ce qui se passe avec la grille lors de en cliquant sur le bouton Trier, développer, filtrer, etc. Vous pouvez simplement attacher l'événement côté client OnCommand à la grille et utiliser l'instruction du débogueur.

JavaScript

L'exécution de la fonction s'arrêtera exactement à l'instruction «débogueur», et vous pourrez inspecter les arguments fournis à cette fonction. Utilisez l'onglet Console et inspectez les arguments.

Conclusion

Vous ne pouvez pas échapper aux bogues quelle que soit la vitesse à laquelle vous exécutez, il est donc essentiel de choisir une technique de débogage qui vous convient le mieux. Dans cet article, j'ai couvert quelques conseils et outils de débogage côté client qui, lorsqu'ils sont combinés, peuvent vous faciliter la vie et vous aider à améliorer votre flux de travail de développement.

Si vous souhaitez en savoir plus, je vous recommande Consultez ces ressources utiles:

Vos pensées

Quelle est votre technique de débogage préférée? Si vous souhaitez des conseils et astuces de débogage plus avancés, partagez vos commentaires, demandes et idées dans la section des commentaires ci-dessous.