Contenu

Introduction

Format ARchive HTTP

Inférence

Collecter les journaux HAR

Google Chrome

Firefox

Internet Explorer

Introduction

Ce document décrit le processus afin de collecter des journaux HTTP ARchive (HAR) pour réduire et dépanner les problèmes liés à l'interface graphique utilisateur côté client. Il explique également pourquoi ils sont utiles et comment collecter le fichier à partir de différents navigateurs.

Format ARchive HTTP

Pourquoi HAR ?

Lorsque vous accédez à ou utilisez Software as Service (SaaS) sur Internet, différents problèmes peuvent surgir lorsque vous accédez aux services. Afin de réduire et d'isoler le problème, vous devez comprendre l'interaction côté client et côté serveur/service. Les journaux HAR donnent l'interaction du côté Client. Les journaux HAR sont un ensemble unique de captures qui consignent et suivent l'interaction d'un navigateur avec un site. Cet ensemble de journaux nous donne une bonne compréhension de ce qui se passe au niveau du client et ceci, à son tour, accélère le processus de dépannage.

Recherchons des journaux HAR dans quelques scénarios types

- Dépannage des problèmes de rendu de page Web (comme une partie de la page Web qui ne se charge pas, la mise en forme de la page est incorrecte ou une partie de la page Web est manquante)

- Dépannage des problèmes de performances (comme une page qui prend beaucoup de temps à se charger ou à expirer lorsqu'un événement est déclenché)

Qu'est-ce que HAR et comment est-il utile ?

Les fichiers HAR stockent les informations au format JSON ; cela nous permet de visualiser plus facilement les données à l'aide d'aides visuelles. Les fichiers HAR contiennent des informations de synchronisation de plusieurs composants. D'après le Compréhension de la durée des ressources de Google, voici quelques compteurs qui sont présents dans le journal.

Bloqué/Bloqué : Temps passé à attendre la demande avant de pouvoir l'envoyer. Il peut être en attente de l'une des raisons décrites pour la mise en file d'attente. En outre, ce temps inclut tout le temps passé dans la négociation de proxy.

Négociation du proxy : Temps passé à négocier avec une connexion de serveur proxy.

Recherche DNS : Temps passé à effectuer la recherche DNS. Chaque nouveau domaine d'une page nécessite un aller-retour complet pour effectuer la recherche DNS.

Connexion initiale/Connexion : Il a fallu du temps pour établir une connexion, y compris des échanges/tentatives TCP et la négociation d'un protocole SSL.

SSL : Temps passé à effectuer une connexion SSL.

Demande envoyée/envoyée : Temps passé à émettre la requête réseau. En général, une fraction de milliseconde.

En attente (TTFB) : Temps passé à attendre la réponse initiale, également appelée Time To First Byte. Cette heure capture la latence d'une aller-retour vers le serveur en plus du temps passé à attendre que le serveur livre la réponse.

Téléchargement/téléchargement de contenu : Temps passé à recevoir les données de réponse.

Inférence

Ces informations de synchronisation des journaux HAR peuvent vous aider à déterminer quelle partie du réseau doit être examinée en premier.

- Si vous remarquez un retard sur le réseau, vous saurez quel aspect du réseau vous devez cibler afin de dépanner.

- S'il s'agit d'un problème de rendu de page Web, vous pouvez consulter la section Téléchargement/téléchargement de contenu afin de voir la demande et la réponse qui sont retournées pour chaque contenu et voir s'il y a des erreurs ou des problèmes présents.

Un fichier journal HAR est ouvert dans le Bloc-notes. Voici un petit extrait de son aspect :

Voici un aperçu d'un fichier chargé dans le logiciel d'outil en ligne :

À partir de cette image, vous pouvez avoir une bonne idée de l'endroit où vous passez beaucoup de temps et du composant qui prend le plus de temps.

Voici un aperçu d'un fichier chargé sur l'outil en ligne G-Suite :

Vous pouvez voir ici les informations de minuteur sur chacune des demandes.

Collecter les journaux HAR

Il est très utile afin de dépanner quand vous pouvez collecter un ensemble de journaux HAR en cours et non en cours de travail pour comparaison. Pour une page qui ne fonctionne pas, il est préférable de collecter plusieurs fichiers HAR afin d'obtenir une durée moyenne pour tous les composants et de voir si un composant similaire présente systématiquement des problèmes.

Avant de collecter un HAR, il est recommandé d'utiliser une seule session de navigation privée afin de forcer le navigateur à télécharger toutes les informations et à ne pas utiliser les données mises en cache déjà présentes.

Le processus de tout navigateur est le suivant :

1. Ouvrir l'option du développeur.

2. Assurez-vous que vous disposez d'options sur le réseau et que vous êtes prêt à capturer les interactions.

3. Recréez le problème avec la page Web.

4. Enregistrez la capture.

5. Envoyez le fichier enregistré pour une analyse plus approfondie.

Voici le processus de collecte des journaux HRA à partir de ces navigateurs :

Google Chrome

1. Appuyez sur F12 et l'onglet Développeur s'ouvre comme illustré dans l'image.

2. Cliquez sur l'onglet Réseau comme illustré dans l'image.

3. Sélectionnez le journal de conservation comme indiqué dans l'image.

4. Notez le bouton d'enregistrement en haut à gauche de l'onglet Réseau. Si la couleur est rouge, cela signifie que la capture a commencé. Si le bouton est noir, cliquez sur le cercle noir pour changer de couleur en rouge et commencer l'enregistrement dans votre navigateur.

5. Recréez le problème pendant l'exécution de la capture, comme l'illustre l'image.

6. Une fois le problème recréé, cliquez avec le bouton droit de la souris sur une ligne du volet d'activité et sélectionnez Enregistrer tout en tant que fichier HAR avec le contenu tel qu'illustré dans l'image.

7. Enregistrez le fichier et envoyez-le pour analyse.

Firefox

1. Appuyez sur F12 et ouvrez l'onglet Développeur. La fenêtre Outils de développement s'ouvre en tant que panneau ancré à côté ou en bas de Firefox.

2. Cliquez sur l'onglet Réseau comme illustré dans l'image.

3. Vérifiez que les journaux Persist sont cochés.

4. Recréez le problème.

5. Une fois le problème recréé, cliquez avec le bouton droit de la souris sur le panneau d'activité et sélectionnez Enregistrer tout sous HAR comme indiqué dans l'image.

6. Enregistrez le fichier et envoyez-le pour analyse.

Internet Explorer

1. Touchez F12.

2. Vérifiez que vous êtes dans l'onglet Réseau.

3. Assurez-vous que « Démarrer la session de profil » est grisé (si l'état par défaut est défini, les captures sont exécutées).

4. Recréez le problème.

5. Une fois le problème recréé, cliquez sur l'icône Enregistrer pour enregistrer les journaux.

6. Enregistrez le fichier et envoyez-le pour analyse.