Outils de développement Chrome Mise en réseau et console

Dans la partie 1 - Outils de développement Chrome: balises et styles, nous avons examiné deux panneaux: Éléments et Ressources. Nous passons maintenant aux deux panneaux suivants: Réseau et Console.

Panneau de réseau

le Réseau panneau nous donne une vue sur les ressources qui sont demandées et téléchargées sur le réseau en temps réel. La visualisation du trafic réseau n’est pas l’activité la plus glamour, surtout si vous débutez dans le développement Web. Cependant, les performances deviennent un problème important à mesure que le trafic de votre site augmente. L'identification et la résolution des demandes qui prennent beaucoup de temps constituent une étape importante dans l'optimisation d'un site..

Un proxy HTTP, tel que Charles Proxy, peut vous fournir une quantité décente d’informations sur le réseau de votre site Web. Cela étant dit, le Réseau panneau offre une quantité surprenante d'informations détaillées; En quelques clics de souris, c’est un excellent candidat pour le débogage des problèmes de réseau. Ce qui suit est une capture d'écran de la Réseau panneau lors du chargement du site mobile Linkedin sur une nouvelle page de chargement:

0 $ renvoie l'élément actuellement sélectionné dans le Éléments panneau.

1. Ce bouton ouvre le Réseau panneau. Assurez-vous d'ouvrir l'onglet avant Chargement d'une page afin qu'elle capture les requêtes du réseau (par exemple, ouvrez un nouvel onglet de navigateur, ouvrez les outils de développement, ouvrez l'onglet réseau, puis chargez enfin l'URL à surveiller)
2. Cette ligne contient une ressource avec des informations intéressantes que je couvre dans les points suivants. La première colonne est le nom et le chemin de la ressource. Le nom de la ressource s'affichera sur la première ligne tandis que le chemin d'accès à la ressource s'affichera sur la seconde..
3. La méthode HTTP utilisée pour la requête.
4. Le code d'état HTTP renvoyé par le serveur. 200 est une réponse commune pour une réponse réussie; bien que tout ce qui est compris entre 200 et 299 est considéré comme acceptable. Notez que l’une des demandes ci-dessus est en rouge. Ceci est lié au code de réponse HTTP, une réponse 401 non autorisée, car je ne suis pas connecté au site mobile de LinkedIn..
5. Le type de contenu d'une requête. Par exemple, dans un HTTP POST (en utilisant la ressource de métriques comme exemple), le type de contenu dans les en-têtes de requête et de réponse est: application / json; alors que les en-têtes de réponse de la page HTML principale contiennent un type de contenu de texte / html. Une petite note sur le cache de l’application: lorsqu’on envoie un fichier manifeste, assurez-vous de le servir avec un type de contenu de texte / cache-manifeste. Lors du débogage, la colonne "Type" dans la Réseau le panneau est l'endroit pour s'assurer qu'il est servi correctement!
6. L'initiateur est une colonne intéressante. cela nous permet de voir pourquoi une ressource est téléchargée. Par exemple, vous pouvez voir le fichier __utm.gif souvent dans vos sessions de débogage; il est utilisé par Google Analytics. L'initiateur montre comme ga.js: 52, une valeur en nom_fichier: numéro_ligne format. Avec cette colonne, vous pouvez découvrir pourquoi, quand et comment les ressources sont téléchargées. Si Analyseur s'affiche pour l'initiateur, il y a de bonnes chances que le navigateur ait initié la requête après avoir vu quelque chose comme un ou >