Fichier HAR - Qu'est-ce que c'est et comment en créer un

Lorsqu’il s’agit de comprendre la complexité des performances web et de résoudre les problèmes, les fichiers HAR constituent un outil essentiel pour les développeurs et les équipes d’assistance technique. HAR, qui signifie HTTP Archive, est un format de fichier utilisé pour suivre toutes les interactions d’un navigateur avec un site web.

Dans ce guide complet, nous verrons ce que sont les fichiers HAR et leur importance, et nous expliquerons étape par étape comment en générer un dans différents navigateurs populaires comme Chrome, Firefox, Safari et Edge.

Comprendre les dossiers HAR

Qu’est-ce qu’un fichier HAR ?

Qu’est-ce qu’un fichier HAR ?

Un fichier HAR est un journal formaté en JSON des interactions d’un navigateur web avec un site.

Il enregistre toutes les requêtes envoyées et les réponses reçues, le temps nécessaire pour obtenir ces réponses, les en-têtes, les cookies et d’autres détails cruciaux pour une analyse détaillée. L’examen d’un fichier HAR permet de repérer les goulets d’étranglement en matière de performances, d’identifier les problèmes de réseau et de comprendre le comportement des applications web.

Pourquoi les fichiers HAR sont-ils importants ?

Les fichiers HAR sont inestimables pour les développeurs et les professionnels de l’informatique, car ils fournissent une vue granulaire de la séquence de chargement de chaque élément sur une page web. Cela peut s’avérer particulièrement utile pour :

• Diagnostiquer des temps de chargement lents
• Déboguer des cycles complexes de demande et de réponse
• Analyser la séquence de chargement des ressources
• Identifier les services tiers ayant un impact sur les performances

Comment générer un fichier HAR dans différents navigateurs ?

Google Chrome

• Étape 1Ouvrir les outils du développeur

  Cliquez avec le bouton droit de la souris n’importe où sur la page que vous souhaitez analyser et sélectionnez Inspecter, ou appuyez sur la touche Ctrl+Shift+I (Cmd+Option+I on Mac).

• Étape 2Accéder à l’onglet Réseau

  Cliquez sur l’onglet Réseau dans le volet Outils de développement.

• Étape 3Enregistrer la session

  
  

  Assurez-vous que le bouton d’enregistrement (le cercle rouge en haut à gauche de l’onglet Réseau) est actif. S’il est gris, cliquez dessus pour commencer l’enregistrement.

  

• Étape 4Reproduire le problème

  Si ce n’est pas déjà le cas, cochez la case Conserver le journal. Cliquez sur le bouton gris en forme de cercle croisé pour supprimer tous les journaux existants de l’onglet Réseau. Actualisez la page ou effectuez les actions qui ont conduit au problème que vous étudiez.

• Étape 5Enregistrer le fichier HAR

  Cliquez avec le bouton droit de la souris n’importe où dans la grille des demandes de réseau, sélectionnez Enregistrer tout comme HAR avec contenu et enregistrez le fichier à l’emplacement de votre choix.

  

Mozilla Firefox

• Étape 1Ouvrir le moniteur de réseau

  Cliquez avec le bouton droit de la souris n’importe où sur la page et sélectionnez Inspecter l’élément, puis cliquez sur l’onglet Réseau ou appuyez sur la touche Ctrl+Shift+E (Cmd+Option+E sur Mac).

• Étape 2Commencer à capter du trafic

  L’enregistrement démarre automatiquement lorsque vous ouvrez le Moniteur réseau.

• Étape 3Reproduire le problème

  Actualisez la page ou effectuez les actions nécessaires pour capturer le trafic lié à votre problème.

• Étape 4Exporter le fichier HAR

  Cliquez avec le bouton droit de la souris n’importe où dans la grille des demandes de réseau, sélectionnez Enregistrer tout sous HAR et choisissez l’endroit où vous souhaitez enregistrer le fichier.

  

Safari

• Étape 1Activer le menu Développer

  Allez dans Safari > Paramètres > Avancés et cochez la case Afficher les fonctionnalités pour les développeurs web.

  

• Étape 2Ouvrir l’inspecteur Web

  Cliquez avec le bouton droit de la souris n’importe où sur la page et Inspecter l’élément, puis cliquez sur l’onglet Réseau ou appuyez sur la touche Cmd+Option+I

• Étape 3Reproduire le problème

  Rafraîchir la page ou effectuer toutes les actions nécessaires pour capturer le trafic lié à votre problème.

• Étape 4Exporter comme HAR

  Après avoir effectué les étapes qui recréent le problème, cliquez sur le bouton Exporter en haut à droite de l’onglet Réseau et enregistrez le fichier HAR.

  

Microsoft Edge

• Étape 1Accéder aux outils du développeur

  Cliquez avec le bouton droit de la souris n’importe où sur la page et sélectionnez Inspecter ou appuyez sur la touche F12 ou Ctrl+Shift+I

• Étape 2Naviguer vers l’onglet Réseau

  Cliquez sur l’onglet Réseau dans la fenêtre Outils de développement.

  

• Étape 3Enregistrer l’activité du réseau

  Assurez-vous que l’enregistrement est actif (cercle rouge). Si ce n’est pas le cas, cliquez dessus pour démarrer.

  

• Étape 4Effectuer les actions

  Actualisez la page ou reproduisez les étapes nécessaires au dépannage.

• Étape 5Save the HAR File

  Cliquez avec le bouton droit de la souris dans la liste des événements du réseau et cliquez sur Enregistrer tout en tant que HAR avec contenu, puis enregistrez le fichier.

  

Analyse des fichiers HAR

Une fois que vous avez généré un fichier HAR, vous pouvez, si nécessaire, l’analyser à l’aide de divers outils en ligne ou en inspectant manuellement le contenu au format JSON. Recherchez les longs temps d’attente, les demandes qui ont échoué ou les fichiers volumineux qui pourraient être optimisés.

Conclusion

Les fichiers HAR constituent une ressource précieuse pour tous ceux qui cherchent à optimiser les performances d’un site web ou à résoudre des problèmes. En suivant les étapes décrites ci-dessus, vous pouvez générer des fichiers HAR dans Chrome, Firefox, Safari et Edge, et obtenir ainsi des informations précieuses sur le fonctionnement interne des interactions web.

FAQs

Les fichiers HAR peuvent-ils contenir des informations sensibles ?

Oui, les fichiers HAR peuvent contenir des données sensibles telles que des informations personnelles, des cookies et des jetons d’authentification. Il est important de manipuler et de partager les fichiers HAR avec prudence, en s’assurant qu’ils ne sont partagés qu’avec des personnes de confiance et qu’ils sont stockés en toute sécurité.

Comment visualiser le contenu d’un fichier HAR ?

Vous pouvez consulter les fichiers HAR à l’aide de divers outils en ligne, tels que l’analyseur HAR de Google ou un logiciel capable d’analyser le format JSON. Ces outils vous permettent de visualiser les données dans un format plus lisible.

Les fichiers HAR sont-ils utilisés pour tester les performances ?

Bien que les fichiers HAR ne soient généralement pas utilisés pour les tests de performance automatisés, ils constituent une excellente ressource pour l’analyse manuelle de la performance et peuvent aider à identifier des problèmes qui peuvent ne pas être apparents lors des tests automatisés.

La génération d’un fichier HAR peut-elle affecter les performances d’un site web ?

Le processus de génération d’un fichier HAR ne devrait pas affecter de manière significative les performances du site web pour l’utilisateur. Toutefois, les outils de développement peuvent consommer des ressources système supplémentaires sur votre ordinateur, ce qui peut ralentir légèrement votre navigateur ou votre système d’exploitation.

Est-il possible de modifier un fichier HAR ?

Oui, les fichiers HAR étant au format JSON, ils peuvent être modifiés à l’aide d’un éditeur de texte. Toutefois, il n’est pas recommandé d’éditer un fichier HAR à moins de savoir exactement quelles modifications vous devez apporter, car cela pourrait corrompre le fichier ou altérer les données enregistrées.