Comment utiliser les outils de développement de navigateur Web

Image illustrant : Comment utiliser les outils de développement de navigateur W
  1. Accueil
  2. Web
  3. Autres recherches
  4. Comment utiliser les outils de développement de navigateur W

Ensembles d'outils intégrés pour les concepteurs Web, les développeurs et les testeurs

En plus de la plupart des fabricants de navigateurs axés sur l'utilisateur quotidien cherchant à surfer sur le Web, ils s'adressent également aux développeurs Web, aux concepteurs et aux professionnels de l'assurance qualité qui aident à créer les applications et les sites auxquels ces utilisateurs accèdent en intégrant des outils puissants directement dans les navigateurs. eux-mêmes.

Fini le temps où les seuls outils de programmation et de test trouvés dans un navigateur vous permettaient d'afficher le code source d'une page et rien de plus. Les navigateurs d'aujourd'hui vous permettent de plonger beaucoup plus profondément en exécutant et en déboguant des extraits de code JavaScript , en inspectant et en modifiant les éléments DOM, en surveillant le trafic réseau en temps réel au fur et à mesure que votre application ou page se charge pour identifier les goulots d'étranglement, en analysant les performances CSS, en vous assurant que votre code est ne pas utiliser trop de mémoire ou trop de  cycles CPU , et bien plus encore.

Du point de vue des tests, vous pouvez reproduire le rendu d'une application ou d'une page Web dans différents navigateurs ainsi que sur différents appareils et plates-formes grâce à la magie de la conception réactive et des simulateurs intégrés. La meilleure partie est que vous pouvez faire tout cela sans avoir à quitter votre navigateur !

Les didacticiels ci-dessous vous expliquent comment accéder à ces outils de développement dans plusieurs navigateurs Web courants .

Google Chrome

Les outils de développement Chrome vous permettent de modifier et de déboguer du code, d'auditer des composants individuels pour exposer les problèmes de performances, de simuler différents écrans d'appareils, y compris ceux exécutant Android ou iOS , et d'exécuter plusieurs autres fonctions utiles.

  1. Sélectionnez le menu principal de Chrome , marqué de trois lignes horizontales et situé dans le coin supérieur droit du navigateur.

  2. Lorsque le menu déroulant apparaît, passez le curseur de votre souris sur l' option Plus d'outils .

    Une capture d'écran de Chrome avec l'option de menu Plus d'outils en surbrillance
  3. Un sous-menu devrait maintenant apparaître. Sélectionnez l'option intitulée Outils de développement . Vous pouvez également utiliser le raccourci clavier suivant à la place de cet élément de menu : Chrome OS/Windows ( CTRL+SHIFT+I ), Mac OS X ( ALT(OPTION)+COMMAND+I )

    Une capture d'écran de Chrome avec l'option de menu Outils de développement en surbrillance
  4. L'interface des outils de développement Chrome devrait maintenant être affichée, comme illustré dans cet exemple de capture d'écran. Selon votre version de Chrome, la mise en page initiale que vous voyez peut être légèrement différente de celle présentée ici. Le hub principal des outils de développement, généralement situé en bas ou à droite de l'écran, contient les onglets suivants.

  5. En plus de ces sections, vous pouvez également accéder aux outils suivants via l' icône >> , située à droite de l' onglet Performance .

    • Mémoire : Surveillez et enregistrez l'utilisation de la mémoire sur une page Web. Vous pouvez voir à quel point le JavaScript sur votre site est lourd.
    • Sécurité : met en évidence les problèmes de certificat et d'autres problèmes liés à la sécurité avec la page ou l'application active.
    • Application : Inspectez les ressources utilisées par une application Web. Obtenez une ventilation complète de ce qui est utilisé.
    • Audits : offre des moyens d'optimiser le temps de chargement et les performances générales d'une page ou d'une application.
    Une capture d'écran des outils de développement de Chrome avec le bouton de menu Plus mis en surbrillance
  6. Le mode appareil vous permet d'afficher la page active dans un simulateur qui la rend presque exactement telle qu'elle apparaîtrait sur l'un des plus d'une douzaine d'appareils, y compris plusieurs modèles Android et iOS bien connus tels que l'iPad, l'iPhone et le Samsung Galaxy. Vous avez également la possibilité d'émuler des résolutions d'écran personnalisées pour répondre à vos besoins particuliers de développement ou de test.

    Pour activer et désactiver le mode appareil , sélectionnez l' icône du téléphone mobile située directement à gauche de l' onglet Éléments .

    Une capture d'écran du menu des outils de développement de Chrome avec le bouton Mode appareil mis en surbrillance
  7. Vous pouvez également personnaliser l'apparence de vos outils de développement en sélectionnant d'abord le bouton de menu représenté par trois points placés verticalement et situé à l'extrême droite des onglets susmentionnés.

    À partir de ce menu déroulant, vous pouvez repositionner le dock, afficher ou masquer différents outils ainsi que lancer des éléments plus avancés tels qu'un inspecteur de périphérique. Vous constaterez que l'interface des outils de développement elle-même est hautement personnalisable via les paramètres trouvés dans cette section.

    Une capture d'écran de la fenêtre des outils de développement de Chrome avec les options de personnalisation mises en évidence

Mozilla Firefox

La section développeur Web de Firefox comprend des outils pour les concepteurs, les développeurs et les testeurs, tels qu'un éditeur de style et une pipette de ciblage de pixels. 

  1. Sélectionnez le menu principal de Firefox , représenté par trois lignes horizontales et situé dans le coin supérieur droit de la fenêtre du navigateur.

  2. Lorsque le menu déroulant apparaît, sélectionnez Développeur Web .

    Une capture d'écran de Firefox avec l'option de menu Développeur Web en surbrillance
  3. Le menu Développeur Web devrait maintenant être affiché, contenant les options suivantes. Vous remarquerez que la plupart des éléments de menu sont associés à des raccourcis clavier.

      • Basculer les outils : affiche ou masque l'interface des outils de développement, généralement positionnée en bas de la fenêtre du navigateur. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+I ), Windows ( CTRL+MAJ+I )
      • Inspecteur : permet d'inspecter et/ou de modifier le code CSS et HTML sur la page active ainsi que sur un appareil portable via un débogage à distance. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+C ), Windows ( CTRL+MAJ+C )
      • Console Web : vous permet d'exécuter des expressions JavaScript dans la page active ainsi que d'examiner un ensemble diversifié de données enregistrées, notamment des avertissements de sécurité, des requêtes réseau, des messages CSS, etc. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+K ), Windows ( CTRL+MAJ+K )
      • Débogueur : Le débogueur JavaScript vous permet de localiser et de corriger les défauts en définissant des points d'arrêt, en inspectant les nœuds DOM, en mettant en boîte noire des sources externes, et bien plus encore. Comme c'est le cas avec l' Inspector , cette fonctionnalité prend également en charge le débogage à distance. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+S ), Windows ( CTRL+MAJ+S )
      • Éditeur de style : vous permet de créer de nouvelles feuilles de style et de les incorporer à la page Web active, ou de modifier des feuilles existantes et de tester le rendu de vos modifications dans un navigateur en un seul clic. Raccourci clavier : Mac OS X, Windows ( MAJ+F7 )
      • Performances : Fournit une ventilation détaillée des performances réseau de la page active, des données de fréquence d'images, du temps et de l'état d'exécution de JavaScript, du flash de peinture et bien plus encore. Raccourci clavier : Mac OS X, Windows ( MAJ+F5 )
      • Réseau : répertorie chaque demande réseau lancée par le navigateur avec la méthode, le domaine d'origine, le type, la taille et le temps écoulé correspondants. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+Q ), Windows ( CTRL+MAJ+Q )
      • Inspecteur de stockage : jetez un œil au cache et aux cookies stockés par un site Web. Raccourci clavier : (MAJ+F9)
      • Developer Toolbar : ouvre un interpréteur de ligne de commande interactif. Entrez help dans l'interpréteur pour obtenir une liste de toutes les commandes disponibles et leur syntaxe appropriée. Raccourci clavier : Mac OS X, Windows ( MAJ+F2 )
      • WebIDE : offre la possibilité de créer et d'exécuter des applications Web via un appareil réel exécutant Firefox OS ou via le simulateur Firefox OS. Raccourci clavier : Mac OS X, Windows ( MAJ+F8 )
      • Console du navigateur : Fournit les mêmes fonctionnalités que la console Web (voir ci-dessus). Cependant, toutes les données renvoyées concernent l'intégralité de l'application Firefox (y compris les extensions et les fonctions au niveau du navigateur) et non uniquement la page Web active. Raccourci clavier : Mac OS X ( MAJ+COMMANDE+J ), Windows ( CTRL+MAJ+J )
      • Vue de conception réactive : vous permet d'afficher instantanément une page Web dans différentes résolutions, mises en page et tailles d'écran pour imiter plusieurs appareils, y compris les tablettes et les smartphones. Raccourci clavier : Mac OS X ( ALT(OPTION)+COMMANDE+M ), Windows ( CTRL+MAJ+M )
      • Pipette : Affiche le code couleur hexadécimal pour les pixels sélectionnés individuellement.
      • Scratchpad : Scratchpad vous permet d'écrire, de modifier, d'intégrer et d'exécuter des extraits de code JavaScript à partir d'une fenêtre contextuelle de Firefox. Ouvrez un document JavaScript interactif qui vous permet d'écrire du code et de le tester sur un site Web. Raccourci clavier : (MAJ+F4)
    • Service Workers : Déboguez les service workers de votre application Web. Obtenez des informations détaillées sur leurs performances et leurs erreurs.
    • Source de la page : L'outil de développement original basé sur un navigateur, cette option affiche simplement le code source disponible pour la page active. Raccourci clavier : Mac OS X ( COMMANDE+U ), Windows ( CTRL+U )
    • Obtenir plus d'outils : ouvre la collection Web Developer's Toolbox sur le site officiel des modules complémentaires de Mozilla, contenant environ une douzaine d'extensions populaires telles que Firebug et Greasemonkey .
    Options de développement Web Firefox

Microsoft Edge/Internet Explorer

Communément appelés les outils de développement F12 , un hommage au raccourci clavier qui a lancé l'interface depuis les versions antérieures d'Internet Explorer, l'ensemble d'outils de développement dans IE11 et Microsoft Edge a parcouru un long chemin depuis sa création en offrant un groupe très pratique de moniteurs, débogueurs, émulateurs et compilateurs à la volée.

  1. Sélectionnez Plus d'actions , représentées par trois points et situées dans le coin supérieur droit de la fenêtre du navigateur.

    Une capture d'écran de Microsoft Edge avec le bouton de menu Plus d'options mis en surbrillance
  2. Lorsque le menu déroulant apparaît, sélectionnez l'option intitulée Outils de développement .

    Une capture d'écran de Microsoft Edge avec l'élément de menu Outils de développement mis en surbrillance
  3. L'interface de développement devrait maintenant être affichée, généralement en bas de la fenêtre du navigateur. Les outils suivants sont disponibles, chacun accessible en cliquant sur leur en-tête d'onglet respectif ou en utilisant le raccourci clavier qui l'accompagne.

    Outils de développement Microsoft Edge
      • DOM Explorer : vous permet de modifier les feuilles de style et le HTML dans la page active, en restituant les résultats modifiés au fur et à mesure. Utilise la fonctionnalité IntelliSense pour la saisie semi-automatique du code, le cas échéant. Raccourci clavier : CTRL+1 )
      • Console : offre la possibilité de soumettre des informations de débogage, notamment des compteurs, des minuteurs, des traces et des messages personnalisés via une API intégrée. Vous permet également d'injecter du code dans une page Web active et de modifier les valeurs attribuées aux variables individuelles en temps réel. Raccourci clavier : CTRL+2 )
      • Débogueur : permet de définir des points d'arrêt et de déboguer votre code pendant son exécution, ligne par ligne si nécessaire. Raccourci clavier : CTRL+3 )
      • Réseau : répertorie chaque demande réseau lancée par le navigateur pendant le chargement et l'exécution de la page, y compris les détails du protocole, le type de contenu, l'utilisation de la bande passante et bien plus encore. Raccourci clavier : CTRL+4 )
      • Performances : détaille les fréquences d'images, l'utilisation du processeur et d'autres mesures liées aux performances pour vous aider à accélérer les temps de chargement des pages et d'autres activités. Raccourci clavier : CTRL+5 )
    • Mémoire : vous aide à isoler et à corriger les fuites de mémoire potentielles sur la page Web actuelle en affichant une chronologie d'utilisation de la mémoire ainsi que des instantanés à différents intervalles de temps. Raccourci clavier : CTRL+6 )
    • Emulation : vous montre comment la page active s'afficherait dans différentes résolutions et tailles d'écran, en émulant les smartphones, tablettes et autres appareils. Il offre également la possibilité de modifier l'agent utilisateur et l'orientation de la page, ainsi que de simuler différentes géolocalisations en entrant une latitude et une longitude. Raccourci clavier : CTRL+7 )
  4. Pour afficher la console dans l'un des autres outils, appuyez sur le bouton carré avec un crochet droit à l'intérieur, situé dans le coin supérieur droit de l'interface des outils de développement.

    Une capture d'écran de Microsoft Edge avec le bouton de la console en surbrillance
  5. Pour détacher l'interface des outils de développement afin qu'elle devienne une fenêtre distincte, sélectionnez les deux rectangles en cascade ou utilisez le raccourci clavier suivant : CTRL+P . Vous pouvez replacer les outils à leur emplacement d'origine en appuyant une deuxième fois sur CTRL+P .

    Une capture d'écran des outils de développement dans Microsoft Edge avec le bouton Fenêtre contextuelle mis en surbrillance

Apple Safari (Mac uniquement)

L'ensemble d'outils de développement diversifié de Safari reflète la grande communauté de développeurs qui utilise un Mac pour leurs besoins de conception et de programmation. En plus d'une console puissante et des fonctionnalités traditionnelles de journalisation et de débogage, un mode de conception réactif facile à utiliser et un outil pour créer vos propres extensions de navigateur sont également fournis.

  1. Sélectionnez Safari dans le menu du navigateur, situé en haut de votre écran. Lorsque le menu déroulant apparaît, sélectionnez Préférences . Vous pouvez également utiliser le raccourci clavier suivant à la place de cet élément de menu : COMMANDE+VIRgule (,)

    Une capture d'écran de Safari avec l'option Préférences en surbrillance
  2. L' interface des préférences de Safari devrait maintenant être affichée, recouvrant la fenêtre de votre navigateur. Sélectionnez l' icône Avancé , située à l'extrême droite de l'en-tête.

    Capture d'écran du menu Préférences de Safari avec l'onglet Avancé en surbrillance
  3. Les préférences avancées devraient maintenant être visibles. Au bas de cet écran se trouve une option intitulée Afficher le menu Développer dans la barre de menus, accompagnée d'une case à cocher. S'il n'y a pas de coche dans la case, cliquez dessus une fois pour en placer une.

    Capture d'écran de la fenêtre Préférences de Safari avec l'élément
  4. Fermez l' interface Préférences .

  5. Vous devriez maintenant remarquer une nouvelle option dans le menu du navigateur nommée Développer , située entre les signets et la fenêtre . Cliquez sur cet élément de menu. Un menu déroulant devrait maintenant s'afficher, contenant les options suivantes.

      • Ouvrir la page avec : vous permet d'ouvrir la page Web active dans l'un des autres navigateurs actuellement installés sur votre Mac.
      • Agent utilisateur : vous permet de sélectionner parmi plus d'une douzaine de valeurs d'agent utilisateur prédéfinies, y compris plusieurs versions de Chrome, Firefox et Internet Explorer, ainsi que de définir votre propre chaîne personnalisée.
      • Entrer en mode de conception réactif : rend la page actuelle telle qu'elle apparaîtrait sur divers appareils et à différentes résolutions d'écran.
      • Show Web Inspector : lance l'interface principale des outils de développement de Safari, généralement placée en bas de l'écran de votre navigateur et contenant les sections suivantes : Elements , Network , Resources , Timelines , Debugger , Storage , Console .
      • Afficher la console d'erreur : lance également l'interface des outils de développement, directement dans l' onglet Console qui affiche les erreurs, les avertissements et d'autres données de journal consultables.
      • Afficher la source de la page : ouvre l' onglet Ressources , qui affiche le code source de la page active classée par le document.
      • Afficher les ressources de la page : Exécute la même fonction que l' option Afficher la source de la page .
      • Afficher l'éditeur d'extraits : ouvre une nouvelle fenêtre dans laquelle vous pouvez saisir du code CSS et HTML, en prévisualisant sa sortie à la volée.
      • Show Extension Builder : offre la possibilité de créer ou de modifier des extensions Safari avec CSS, HTML et JavaScript.
      • Afficher l'enregistrement de la chronologie : ouvre l' onglet Chronologie et commence à afficher les demandes réseau, la mise en page et les informations de rendu ainsi que l'exécution de JavaScript en temps réel.
      • Vider les caches : supprime l'intégralité du cache actuellement stocké sur votre disque dur.
      • Désactiver les caches : empêche Safari de mettre en cache afin que tout le contenu soit récupéré du serveur à chaque chargement de page.
      • Désactiver les images : empêche le rendu des images sur toutes les pages Web.
      • Désactiver les styles : Ignore les propriétés CSS lorsqu'une page est chargée.
      • Désactiver JavaScript : restreint l'exécution de JavaScript sur toutes les pages.
      • Désactiver les extensions : interdit à toutes les extensions installées de s'exécuter dans le navigateur.
      • Désactiver les hacks spécifiques au site : si Safari a été modifié pour gérer explicitement les problèmes spécifiques à la page Web active, cette option bloquera ces modifications afin que la page se charge comme elle l'aurait fait avant l'introduction de ces modifications.
    • Désactiver les restrictions de fichiers locaux : permet au navigateur d'accéder aux fichiers sur vos disques locaux, une action qui est restreinte par défaut pour des raisons de sécurité.
    • Désactiver les restrictions d'origine croisée : ces restrictions sont mises en place par défaut pour empêcher le XSS et d'autres dangers potentiels. Cependant, ils doivent souvent être temporairement désactivés à des fins de développement.
    • Autoriser JavaScript à partir du champ de recherche intelligente : lorsqu'il est activé, il offre la possibilité de saisir des URL avec javascript : intégré directement dans la barre d'adresse.
    • Traiter les certificats SHA-1 comme non sécurisés : les certificats SSL utilisant l' algorithme SHA-1 sont largement considérés comme obsolètes et vulnérables.
    Une capture d'écran de Safari avec le menu Développer en surbrillance
Partager Tutoriel

Autres Tutoriels sur (xxx) ...