Chrome/Firefox : les outils de développement

Les outils de développement sont des outils de débogage de pages internet.
Ces outils permettent de manipuler les pages WEB pour effectuer des essais de code.

Mais surtout, ces outils de développement sont aussi très pratiques pour obtenir des informations de connexion (comme le header/en-tête d’une page) ou des erreurs de chargement de page WEB.
Dans cet article, nous verrons les outils de développement pour les navigateurs Web Mozilla Firefox et Google Chrome.

Introduction

Ces outils de développement font parti intégrante de Chrome et Firefox.
Vous pouvez y aller par les menus suivants ou la combinaison de touches : CTRL+MAJ+I

La fenêtre des outils de débogage s’ouvre… sur le côte ou en bas.
Les fonctionnalités de cet outil entre Firefox et Chrome sont assez similaires.

Les onglets permettent d’accéder aux diverses fonctionnalités, ainsi, on trouve :

  • L’inspecteur qui permet de charger le code  d’une partie souhaité de la page.. il est alors possible de modifier le code, les modifications seront directement jouées sur le navigateur WEB.
  • Console : enregistre les erreurs ou notifications durant le chargement de la page. Les erreurs de code ou erreur HTTP y seront enregistrées.
  • Réseau : affiche toutes les pages et éléments chargées lors de l’accès à la page WEB. Le temps de chargement s’inscrit sur chaque requête. Il est ainsi possible de visualiser les portions qui sont lentes à charger ou encore visualiser les en-têtes du serveur WEB.
  • Security (Seulement sur Chrome) : affiche des informations de sécurité dont les certificats des sites HTTPs.

Inspecteur

L’inspecteur permet d’inspecter une page WEB.
Le code source de la page sera chargée par le navigateur WEB et potentiellement modifiable depuis l’outil de développement.
Le navigateur WEB va alors jouer ses modifications en direct, ce qui permet aux développeurs de site, d’ajuster très facilement le code.

Par exemple, ci-dessous, on modifie la couleur de fond du site malekal.com :

L’inspecteur propose une icône de capture qui permet de sélectionner un élément de la page.
Automatiquement, le navigateur WEB va se positionner sur le code de l’élément sélectionné.

Dans la page suivante, j’avais expliqué comment nettoyer les publicités sur les sites de streaming à partir des outils de développement : Nettoyer les publicités sur video streaming avec Débogueur

Console

La console affiche tous les notifications lors du chargement de page mais aussi les erreurs HTTP.
Cette console est une vraie mine d’informations dans le cas où vous rencontrez des problèmes de chargement de page internet.

Par exemple, dans la page ci-dessous, qui rencontre des problèmes d’affichage (page blanche avec seulement l’écriture bleu).
La console indique que les problèmes ont pour source des pages manquantes ou qui ne se chargent pas (problème de cache).
Le problème est donc côté serveur.

Autre exemple à travers ce mélange de contenu sécurisé/non sécurisé (contenu mixe).

Par défaut, et notamment sur Firefox, la console est assez bavarde.
Vous avez en liste horizontale, les différents journaux (Réseau, CSS, JS, Sécurité, Journal).
Un clic droit dessus permet de choisir ce que vous désirez afficher : LOG, erreur, avertissements.

Facebook n’aime pas la console, dont les informations peuvent être utilisées pour récupérer des informations par un tiers.

Réseau

La partie réseau permet d’obtenir des informations sur les requêtes HTTP.

Les informations de connexions (En-tête, cookie, réponse, délai)

Toutefois, si vous désirez mesurer votre débit et la vitesse de votre connexion internet, il existe d’autres moyens : Mesurer le débit/vitesse de sa connexion

Onglet Security (Chrome)

L’onglet Security donne certaines informations dont les informations HTTPs avec le protocole utilisé et l’algorithme de chiffrement de la clé.

On peut alors avoir visualiser le certificat et toute la chaîne de certification.

L’onglet Application donne accès à certains informations dont les cookies :

image_pdfimage_print
(Visité 2 557 fois, 1 visites ce jour)

Add Comment