Comment détecter les erreurs avec l'inspecteur Web
Il peut arriver que vous rencontriez un message d'erreur qui n'explique pas clairement la nature du problème. Nous nous engageons à ce que toutes les erreurs soient accompagnées d'un texte guidé indiquant les étapes à suivre pour résoudre le problème, mais dans certains cas, le message d'erreur peut ne pas contenir de texte et se limiter à une phrase de code.
Dans ce cas, il est essentiel de rencontrer le message d'erreur dans le code (lorsque l'erreur provient de l'API), de faire une capture d'écran et de la partager avec notre équipe d'assistance. De cette façon, nous pouvons agir plus rapidement et trouver le problème en moins de temps.
Structure de l'article :
1. Comment ouvrir le navigateur Web à partir de l'inspecteur ?
Les outils de l'inspecteur. Cet ensemble d'outils, qui est maintenant inclus dans tous les principaux navigateurs modernes, vous donne les clés pour découvrir ce qui se passe dans la page au niveau du HTML, du CSS, du JavaScript et plus encore. Poursuivons avec les moyens d'ouvrir l'inspecteur à partir de chaque navigateur.
1.a Google Chrome:
Le moyen le plus simple d'ouvrir l'inspecteur de Chrome est de cliquer avec le bouton droit de la souris sur la page, puis de faire défiler la page jusqu'en bas et de cliquer sur Inspecter.
Une autre solution consiste à utiliser un raccourci clavier, à ouvrir Developer Tools et à mettre le focus sur la console.
Windows: Ctrl + Shift + J.
Mac: Cmd + Option + J.
Et voici le résultat :
1.b Safari:
L'inspecteur Web de Safari a besoin de deux autres étapes supplémentaires avant que vous puissiez le lancer et inspecter la page :
Cliquez sur Safari > Préférences, puis sur Avancé.
Au bas du volet, cochez la case "Afficher le menu Développer dans la barre de menus".
À ce stade, vous disposez d'un onglet supplémentaire dans la barre de menus, intitulé Développer.
À partir de là, choisissez Développer > Afficher l'inspecteur Web.
ℹ️ Raccourcis:
Windows: Ctrl + Shift + C
Mac: Cmd + Option + I
1.c Firefox:
Firefox est très similaire à Chrome lorsqu'il s'agit d'utiliser l'inspecteur Web.
Cliquez avec le bouton droit de la souris sur n'importe quelle partie de la page et choisissez Inspecter.
Dans le menu du haut de Firefox, sélectionnez Outils > Outils du navigateur > Outils du développeur Web.
ℹ️ Raccourcis:
Windows: Control + Shift + C
Mac: Command + Option + C
2. Vérifiez les erreurs dans les onglets "Réseau" et "Console".
Une fois l'inspecteur Web ouvert, nous devons d'abord vérifier l'onglet Console pour détecter les erreurs.
ℹ️ Si vous voyez des messages d'erreur soulignés en rouge, faites une capture d'écran de toute la fenêtre du navigateur et continuez jusqu'à l'onglet Réseau.
Lorsque vous ouvrez l'onglet Réseau/Network, il est fort probable que l'onglet soit vide et qu'il n'y ait aucun enregistrement, ce qui est normal si vous avez chargé l'inspecteur Web après l'apparition de l'erreur dans votre compte TIMIFY.
Continuez et sélectionnez l'option Fetch/XHR dans les menus inférieurs, puis dans votre compte TIMIFY, répétez les mêmes étapes que précédemment jusqu'à ce que le message d'erreur apparaisse à nouveau.
Vous verrez alors des enregistrements dans la barre latérale gauche sous "Nom", et celui que nous recherchons s'appelle api.timify.io. Cliquez dessus et une autre ligne avec des options s'ouvrira sur le côté.
Sélectionnez "Aperçu" pour voir les données, et cherchez la mention errors, développez-la et vous verrez un message qui indiquera où ou quoi est le problème réel.
3. Important
Il peut y avoir plusieurs enregistrements identiques de
api.timify.io. vous devrez vérifier lequel d'entre eux contient les donnéeserror.Les messages d'erreur de votre compte TIMIFY ne génèrent pas tous des enregistrements d'erreur dans l'onglet Aperçu de l'inspecteur Web. Cela se produit uniquement lorsque l'erreur provient de notre API.