Collecter les journaux du navigateur pour analyser efficacement les problèmes

Gather Browser Logs for Efficient Troubleshooting
February 16, 2024
Rédigé par
Révisé par
Diane Phan
Twilion

Collecter les journaux du navigateur pour analyser efficacement les problèmes

Le SDK Twilio Voice est un outil puissant qui permet aux développeurs d'intégrer des fonctionnalités d'appel vocal en toute fluidité dans leurs applications. Cependant, malgré tous les efforts accomplis pour atteindre la perfection, même les applications les plus finement paramétrées peuvent rencontrer des problèmes. Des journaux de navigateur complets sont donc indispensables lors de l'analyse des problèmes liés au SDK Voice JS, car ils peuvent changer la donne.

Ce guide complet détaille la marche à suivre pour configurer des journaux de débogage et collecter efficacement des journaux du navigateur. Une attention particulière sera accordée à l'analyse des problèmes à l'aide du SDK Twilio Voice JS.

Prérequis

Pour suivre cette procédure, vous devez disposer des éléments suivants :

  • Navigateur Google Chrome ou Microsoft Edge

  • Système d'exploitation Mac/Windows

  • Client SDK Voice JS avec logLevel défini sur debug, comme décrit ci-après

Vérifier votre logLevel

Le niveau de journal de la console utilisé par le client SDK Voice JS est un paramètre configuré à l'aide du système logLevel pour permettre la configuration de la journalisation au moment de l'exécution. Pour en savoir plus sur les meilleures pratiques, cliquez ici.

Pour configurer le niveau de journal, utilisez la propriété logLevel dans l'objet DeviceOptions lors de l'instanciation d'un Twilio.Device. Reportez-vous à l'exemple ci-dessous :

// when instantiating a Twilio.Device

const device = new Twilio.Device (token, { logLevel: 1 });

Utilize browser-based debugging

Le SDK Twilio Voice JS est optimisé pour offrir une expérience fluide sur les navigateurs de bureau pris en charge comme Google Chrome et Microsoft Edge. Cet article présentera ces deux procédures étape par étape.

Que vous utilisiez Chrome ou Edge, les étapes sont les mêmes. Vous pouvez ainsi tirer parti du potentiel des journaux de navigateur, quel que soit votre navigateur préféré.

Configurer et lancer la collecte des journaux du navigateur

Étape 1 : ouvrez le menu de Chrome et accédez à Outils de développement. Vous pouvez ouvrir Outils de développement avec des raccourcis clavier ou via le menu Chrome. Les raccourcis clavier sont les suivants :

  • Mac OS : CMD + Maj + J ou CMD + Maj + C.

  • Linux, Chromebook et Windows : Ctrl + Maj + J.

  • Dans le menu Chrome : Ouvrez le menu Chrome et accédez à Plus d'outils > Outils de développement.

Étape 2 : cliquez sur l'icône Paramètres dans le coin supérieur droit de la fenêtre Outils de développement.

Étape 3 : cochez les cases suivantes

  1. Dans l'onglet Console

    1. Log XMLHttpRequests (Journal XMLHttpRequests)

    2. Show timestamps (Afficher les horodatages)

    3. Preserve log upon navigation (Conserver le journal lors de la navigation)

  2. Dans l'onglet Network (Réseau)

    1. Preserve log (Conserver le journal)

    2. Record network log (Enregistrer le journal réseau)

Étape 4 : fermez la fenêtre.

Étape 5 : pour sélectionner un niveau de filtre dans l'onglet Console, recherchez la liste Log level (Niveau de journal) dans le coin supérieur droit de la fenêtre. Choisissez un niveau de filtre qui n'est pas déjà sélectionné. Si vous souhaitez sélectionner tous les niveaux, la sélection du niveau de journal indique All levels (Tous les niveaux).

 

Étape 6 : pour collecter les journaux réseau pendant la reproduction des problèmes, sélectionnez le menu et ancrez la fenêtre en bas en cliquant sur l'icône avec la petite case en bas, à côté de l'option Dock side (Côté ancrage).

 

Notez que vous perdrez les journaux réseau de la session si vous fermez cette fenêtre ou l'onglet.

Étape 7 : gardez la console ouverte et répétez les étapes nécessaires pour reproduire le problème analysé.

Étape 8 : après avoir reproduit le problème, accédez à l'onglet Console et rassemblez les fichiers journaux. Cliquez ensuite avec le bouton droit de la souris sur les lignes du journal et sélectionner « Enregistrer sous » pour les enregistrer.

 

Étape 9 : vous pouvez également accéder à l'onglet Network (Réseau) et cliquer sur l'icône de téléchargement d'exportation pour enregistrer les journaux réseau.

Étape 10 : vous pourrez peut-être identifier et résoudre le problème vous-même à l'aide des journaux. Vous pouvez également ouvrir un ticket auprès du service client et télécharger le fichier journal en précisant l'heure approximative où le problème est apparu et le SID d'appel pour analyser le problème.

 

Vérifiez que les journaux couvrent bien la période où le problème signalé est apparu.

Étape 11(Facultatif) : si vous n'avez pas encore ouvert de ticket auprès du service client, suivez les instructions de ce lien pour créer et soumettre un ticket afin d'obtenir de l'aide et analyser le problème.

Quelle est l'étape suivante pour analyser les problèmes du SDK Voice JS ?

Maîtriser la collecte et l'analyse des journaux du navigateur est une compétence précieuse pour analyser les problèmes du SDK Voice JS. Vous gagnerez ainsi du temps si vous créez un ticket auprès du service client. En suivant les étapes décrites dans cet article, vous pouvez collecter et examiner efficacement les journaux du navigateur. Vous obtiendrez ainsi des informations complètes sur les erreurs potentielles, les goulots d'étranglement de performances et les autres problèmes affectant l'expérience utilisateur.

De plus, vous pouvez améliorer vos capacités d'analyse des problèmes en consultant les meilleures pratiques du SDK Voice Javascript. Le respect de ces meilleures pratiques garantira à vos utilisateurs une expérience d'appel fluide. Vous pourrez également analyser plus facilement les problèmes de connexion et de qualité des appels.

En tant que Lead Technical Account Manager, Khushbu Shaikh est un atout inestimable pour l'équipe d'assistance personnalisée. Forte d'une solide expérience, Khushbu Shaikh sait gérer de nombreux clients et les aide à surmonter leurs défis en leur proposant des solutions efficaces. Elle excelle dans l'analyse des problèmes rencontrés par les clients, et cherche à leur proposer des alternatives pertinentes tout en offrant une assistance exceptionnelle. Pour toute demande ou assistance, contactez Khushbu Shaikh à l'adresse suivante : kshaikh [at] twilio.com.