Les outils de développement web des navigateurs
|

Outils de développement web des navigateurs

[En cours de rédaction.]

En plus des nombreux raccourcis pour les utiliser plus efficacement, les navigateurs Chrome et Firefox mettent à notre disposition des Outils de développement web nous permettant de comprendre comment ils interprètent les pages web.

On peut même apporter des modifications directement dans l'Inspecteur de la page ou dans la Console pour tester différents contenus (HTML), mises en formes (CSS) ou actions (JavaScript).

Même ne connaitre que les bases peut vous être très utile et vous en apprendrez davantage en les utilisant dans vos projets.

Accéder aux outils de développement

  • touche F12;
  • raccourci Ctrl+Maj+I;
  • clic droit sur un élément de la page, puis Inspecter.

Outils utiles même aux débutants

  • Sélectionner (flèche) : pour sélectionner un élément en le pointant sur une page;
  • Inspecteur : pour modifier les balises HTML et leur contenu;
  • Console : pour tester ou exécuter du code JavaScript;
  • Réseau : pour voir les requêtes HTTP et les réponses reçus, codes du serveur, etc. (seulement par curiosité).

Exercice – Faire disparaitre le logo de Google!

  1. Consignes écrites à suivre, exercice fait en classe.

A lire également