Pour ouvrir le panneau réseau de Safari pour le débogage des demandes de réseau, suivez les étapes suivantes: 1. Ouvrez Safari → Préférences → Advanced → Vérifiez le menu ?Afficher le développement? dans la barre de menu ?; 2. Ouvrez la page de destination, cliquez sur "Development" → "Afficher la console JavaScript" dans la barre de menu supérieure (ou utilisez l'option de clé de raccourci ? c); 3. Cliquez sur l'onglet "réseau" dans l'interface d'outil de développeur pour saisir le panneau réseau. Après avoir rafra?chi la page, vous pouvez afficher le nom, le statut, le type, la taille et les informations de temps de toutes les ressources chargées et prendre en charge le clic pour afficher les détails, le filtrage de la classification, le tri par le temps et l'enregistrement du comportement du réseau pour l'analyse des performances et le jugement d'optimisation.

Après avoir ouvert les outils de développeur de Safari, Network Inspecteur est un outil important pour vous déboguer sur les performances de chargement des pages et afficher les demandes de ressources. Il peut vous aider à analyser l'heure de chargement, le code d'état, l'en-tête de demande, le contenu de réponse et d'autres informations de chaque fichier dans la page.

Comment ouvrir le panneau réseau

Assurez-vous d'abord que le menu "Development" dans Safari est activé:

• Ouvrez Safari → Préférences → Avancé → Vérifiez "Afficher le menu" Development "dans la barre de menu"

Alors:

• Ouvrez la page Web que vous souhaitez déboguer
• Cliquez sur "Development" → "Afficher la console JavaScript" dans la barre de menu supérieure (ou appuyez directement sur Option ? C )
• Cliquez sur l'onglet "réseau" dans l'interface de l'outil de développeur et entrez le panneau de vérification du réseau

Afficher toutes les ressources chargées sur la page

Après être entré dans le panneau réseau, actualiser la page, vous verrez toutes les demandes initiées pendant le processus de chargement de la page, y compris HTML, CSS, JS, images, polices, etc.

Voici quelques colonnes clés à noter:

• Nom : le nom de ressource demandé
• Statut : code d'état HTTP (par exemple, 200 signifie succès, 404 n'est pas trouvé)
• Type : Types de ressources, tels que le script, la feuille de style, l'image, etc.
• Taille : la taille de la transmission vous indique combien de trafic cette ressource occupe
• Temps : le temps qu'il a fallu pour charger la ressource

Vous pouvez cliquer sur une ressource pour afficher les détails, tels que la visualisation des en-têtes de demande, les en-têtes de réponse, le contenu renvoyé réel et même la prévisualisation du contenu de l'image ou du script.

Filtre et tri Demandes de données

Pour trouver des types spécifiques de ressources ou de problèmes plus efficacement, vous pouvez utiliser la fonction de filtrage:

• Il y a une bo?te de recherche dans le coin supérieur gauche. Entrez les mots clés pour localiser rapidement une ressource.
• Il existe des boutons de classification à droite, comme tous, XHR, JS, CSS, images. Cliquez simplement dessus pour voir seulement un certain type de ressource.
• Cliquez sur le titre de la colonne "Time" à trier en chargeant le temps pour trouver le "coupable" qui ralentit la page

De plus, la vérification du ?journal de conservation? peut préserver les enregistrements de demande historique lorsque la page saute ou actualise, ce qui est très utile pour déboguer les processus de plusieurs pages.

Analyse des suggestions de performances et d'optimisation de chargement

Le panneau réseau peut non seulement afficher les demandes, mais également vous aider à porter des jugements d'optimisation des performances:

• Si un JS ou une image se charge particulièrement lentement, il peut s'agir d'un problème de configuration CDN ou d'une ressource trop grande
• Plusieurs demandes 304 apparaissent, indiquant que le navigateur vérifie le cache, ce qui est normal mais peut être encore optimisé.
• Un grand nombre de 200 demandes peuvent signifier que le cache n'est pas en vigueur, il vaut la peine de vérifier les paramètres de contr?le du cache

Vous pouvez également commencer l'enregistrement en cliquant sur le bouton "? ? ?" dans le coin inférieur gauche, en simulant les opérations utilisateur et en observant les modifications du comportement du réseau tout au long du processus.

Fondamentalement, c'est tout. La ma?trise de l'utilisation des panneaux de réseau est très utile pour le débogage frontal et l'optimisation des performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!