Débogage de script client
La quasi-totalité des navigateurs modernes disposent d’une extension de débogage prenant en charge la capture du trafic réseau, l’analyse du contenu des pages et le débogage des scripts client. Les ensembles d’outils suivants sont utiles pour effectuer des opérations de débogage :
Microsoft Edge (au moyen des outils de développement F12). Pour en savoir plus, consultez le guide Utilisation des outils de développement F12.
Google Chrome (au moyen des outils de développement F12)
Mozilla Firefox (à l’aide de Firebug)
Apple Safari (à l’aide de Web Inspector)
Afficher les ressources de script
Lorsque votre page de formulaire d’application pilotée par modèle se charge, toutes les bibliothèques de scripts client se chargent en sus de la page web en tant que ressources de script individuelles. Étant donné le volume de ressources de script nécessaires pour exécuter une application pilotée par modèle, localiser un fichier que vous souhaitez déboguer peut être difficile. Lorsque vous utilisez des outils de débogage tels que Microsoft Edge, nous vous recommandons de noter votre nom de fichier et de rechercher vos fichiers de script à l’aide des fonctionnalités de recherche des outils.
Écrire des messages sur la console
La méthode window.alert lors du débogage de problèmes liés à JavaScript et l’instruction debugger pour interrompre l’exécution permettent encore couramment de résoudre les problèmes liés au code dans l’application. Mais maintenant que tous les navigateurs modernes offrent un accès facile aux outils de débogage, nous vous déconseillons cette méthode, car d’autres peuvent utiliser l’application que vous êtes en train de déboguer. Ces appels de débogage sont également souvent laissés par mégarde dans le code, provoquant des problèmes pour les utilisateurs de l’application en production.
Envisagez plutôt d’écrire vos messages sur la console. Voici une petite fonction que vous pouvez ajouter à vos bibliothèques pour faciliter l’envoi des messages que vous souhaitez afficher sur la console lorsqu’elle est ouverte.
function writeToConsole(message)
{
if (typeof console != 'undefined') {
console.log(message);
}
}
Contrairement à la méthode alert, si vous oubliez de supprimer tout code utilisant cette fonction, les utilisateurs de l’application ne voient pas vos messages. Elle est également utile lors de la résolution des problèmes de comportement de l’application en production sans perturber ses utilisateurs.
Remplacer le contenu de ressources web à l’aide de Fiddler Auto-Responder
Modifier constamment des ressources web lorsqu’elles sont en cours de développement peut s’avérer difficile et prendre beaucoup de temps. Vous devez republier les fichiers dans une solution lors de chaque modification et veiller à vider le cache du navigateur de la version précédente des ressources. De plus, si plusieurs développeurs partagent l’environnement, cela peut être perturbant pour les autres.
Pour gagner en efficacité, envisagez d’utiliser un outil comme Auto-Responder dans Telerik Fiddler pour remplacer le contenu d’une ressource web par le contenu d’un fichier local au lieu de le charger et de le republier chaque fois. Plusieurs autres outils tiers prenant également en charge l’édition directe peuvent être envisagés. Pour en savoir plus sur l’installation et la configuration de Fiddler Auto-Responder, consultez Développement de ressources web de script à l’aide de Fiddler Auto-Responder.