Comment déboguer les principaux problèmes de site Web à l'aide d'un proxy de débogage Web

Besoin de plus de temps dans la journée? Prenez les commandes et réinventez les solutions aux problèmes de débogage Web les plus courants à l'aide d'un outil proxy de débogage Web HTTP (s).

Peu de choses semblent incontestables dans l'environnement actuel; à chaque coin de rue, vous êtes confronté à des décisions, des obstacles et parfois, lorsque vous voyez un chemin clair, vous avancez avec enthousiasme. La même chose peut être dite lorsque vous êtes confronté à des problèmes courants de débogage de sites Web. Dans ce blog, nous voulons vous offrir un chemin clair pour identifier facilement les problèmes de site Web et vous offrir des conseils solides sur le débogage de ces problèmes à l'aide d'un proxy de débogage Web. À la fin du parcours, vous aurez une compréhension rassurante de la façon de trouver un problème, de le localiser, de l'inspecter, tout cela peut vous simplifier la vie et vous redonner du temps.

Catalogage de requêtes réseau

Naturellement, un site Web est composé de plusieurs requêtes. Requêtes qui alimentent le HTML, le JavaScript et les millions d'autres composants de votre site Web. Pourtant, parfois, il peut être très difficile de comprendre toutes les demandes de sites Web.

En utilisant un outil proxy de débogage Web, dans notre scénario Fiddler Everywhere Pro vous pouvez filtrer les requêtes en fonction des critères que vous spécifiez. Pour illustrer, je vais utiliser le site Web du nœud de hachage pour inspecter certaines des erreurs présentes sur la page, puis en utilisant Fiddler Everywhere Pro, je vais voir comment nous pouvons les déboguer.

À première vue sur ce site Web, il ne semble pas que quelque chose puisse être faux car tout semble se charger correctement. En inspectant le site Web du nœud de hachage dans Fiddler Everywhere Pro, vous pouvez capturer chaque demande réseau de leur site Web et les centaines d'autres demandes provenant des différents sites Web et applications ouverts.

L'interface utilisateur Fiddler Everywhere Pro montre le type de fichiers que chaque requête apporte.

La magie ici est que le proxy de débogage Web vous montre le type de fichier que chaque demande apporte, et dans ce cas, il y a un fichier particulier provenant du nœud de hachage comme indiqué par l'hôte. En utilisant la fonction de sélection des demandes parent / enfant, vous pouvez voir toutes les demandes, y compris celles provenant de l'hôte du nœud de hachage et de certains scripts similaires, et enregistrer les sessions sélectionnées.

Vous avez maintenant sauvegardé toutes les sessions enregistrées à partir du nœud de hachage, et vous pouvez rapidement identifier le nombre de fichiers HTML inclus, le nombre de fichiers CSS et tous les fichiers JavaScript présents dans la session. Le fait d'avoir ces sessions enregistrées vous permet de comprendre facilement et facilement les différentes demandes qui sortent et arrivent chaque fois que le site Web est chargé. Cela devient important si vous souhaitez suivre les demandes malveillantes qui, selon vous, pourraient être présentes lors du chargement du site Web.

Erreurs de site Web

Maintenant que vous pouvez cataloguer toutes les requêtes réseau sans avoir à définir les options de filtrage, voyons comment identifier au mieux les erreurs de site Web. Des erreurs de site Web peuvent être causées par plusieurs choses. Il peut s'agir d'une erreur 4XX due à un problème sur le site client ou d'une erreur 5XX causée par des problèmes de communication avec le serveur. Vous pouvez identifier ces problèmes à une vitesse irréprochable en utilisant le proxy de débogage Web que je vous ai présenté ci-dessus, Fiddler Everywhere Pro.

N'oubliez pas que lorsque nous avons chargé le nœud de hachage pour la première fois, il semblait que tout fonctionnait bien. Pourtant, en utilisant l'interface utilisateur de Fiddler Everywhere Pro, vous voyez immédiatement tout le trafic du nœud de hachage qui a été capturé, et l'erreur 404 est immédiatement évidente.

Vous pouvez voir dans les inspecteurs de la circulation que la réponse particulière n'a pas été trouvée, comme indiqué par le 404.

La demande est indiquée en rouge, indiquant qu'il s'agit d'une erreur. Et si vous cliquez sur cette demande particulière dans les inspecteurs de la circulation vous pouvez voir que cette réponse particulière n'a pas été trouvée, ce qui signifie qu'il s'agit d'une erreur 404. Ainsi, même si le site Web semblait fonctionner correctement, vous êtes rapidement allé dans les coulisses pour identifier cette erreur, qui n'était pas clairement visible dans l'interface utilisateur du nœud de hachage.

Alerte d'avantage: cette méthode peut être utilisée pour identifier toutes les erreurs 4XX , ainsi que des erreurs 5XX.

Voyons maintenant comment nous pouvons résoudre le problème à l'origine des erreurs. Encore une fois, lorsque j'arrive à mon inspecteur dans les en-têtes de la requête, je peux voir la requête GET frapper une nouvelle URL, qui semble mal saisie. Si je ne me trompe pas, l'intention était de récupérer cette URL particulière, une API Google pour les polices. Pour corriger, vous pouvez appliquer une règle qui redirigera vers une URL différente à chaque fois que cette demande particulière est effectuée. Fiddler's AutoResponder que vous pouvez utiliser ici, vous donne la liberté de créer des règles simulées et de fournir des réponses sans contacter le serveur. En créant une règle pour cette URL et en rechargeant la session, vous pouvez voir que le fichier CCSS exact est résolu et qu'il se comporte désormais comme prévu.

Si vous deviez effectuer le même changement sur le serveur, ce problème serait définitivement résolu, mais vous pouvez utiliser le répondeur automatique de Fiddler pour simuler la réponse et vous assurer qu'elle est d'abord résolue localement. Pensez simplement, ce qui demanderait du travail manuellement, vous pouvez désormais le faire intuitivement pour identifier diverses erreurs liées au site Web, dont beaucoup peuvent ne pas être directement visibles sans l'utilisation d'un proxy de débogage Web.

Simulation d'erreurs

Passons maintenant à la troisième, et celle-ci est parfois un peu délicate pour vous ou vos développeurs parce que vous entendez constamment la phrase «Cela n'a pas fonctionné sur mon système». C'est donc exactement l'un des problèmes majeurs auxquels nous sommes confrontés lors des tests de sites Web.

Comment simulez-vous une erreur ou un problème auquel un utilisateur est confronté dans son environnement alors que cela ne se produit pas dans le vôtre? Une belle fonctionnalité de Fiddler Everywhere Pro répond à cette question en vous donnant la possibilité de vous moquer des problèmes. En vous moquant des problèmes et des erreurs, vous pouvez simuler l'environnement de votre utilisateur. Cela se produit en utilisant la fonction AutoResponder que vous avez apprise dans la dernière section. Par exemple, vous pouvez voir ce qui se passerait si le chargement de votre CSS prenait un peu plus de temps que d'habitude, puis utiliser Fiddler Everywhere Pro pour simuler ce qui se passerait dans chaque scénario.

Pour ce faire, vous commencez par ajouter une nouvelle règle pour en utilisant le répondeur automatique. Exemple: "Chaque fois que le fichier CSS est chargé, je souhaite définir un délai de dix mille millisecondes, soit environ dix secondes." Ensuite, vous allez enregistrer ceci, recharger la session et voir ce qui se passe.

Simulez des scénarios en ajoutant une règle, c'est-à-dire un délai dans ce cas, à l'aide du Fiddler AutoResponder.

Lorsque vous rechargez, vous pouvez voir que le site Web est toujours en attente. Et puis, après 10 secondes, il se charge. Vous voyez maintenant les changements qui ont eu lieu une fois le fichier CSS chargé. Par exemple, toutes les icônes et blocs de texte ont été redimensionnés et se sont mis en place comme prévu. En utilisant cette méthode, vous pouvez être en avance sur la courbe et mieux la gérer car vous savez maintenant à quoi vous attendre.

Et maintenant

C'est la pointe de l'iceberg, et vous voudrez peut-être continuer à déboguer d'autres problèmes de site Web courants. Il y a plus d'indices et d'exemples à votre disposition. Inscrivez-vous pour le résumé Fiddler. Vous pouvez vous attendre à ce que des solutions de contournement de productivité et d'autres conseils utiles sur le débogage en toute sécurité et fiabilité tout en vous éloignant des erreurs coûteuses soient organisées pour vous par une équipe d'experts en débogage.

Abonnez-vous à Fiddler Monthly Digest