Comment utiliser les outils de développement de navigateur Web

2024 Auteur: Abigail Brown | [email protected]. Dernière modifié: 2023-12-17 06:47

En plus de la plupart des fabricants de navigateurs qui se concentrent sur l'utilisateur quotidien qui cherche à 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 de puissants outils directement dans les navigateurs eux-mêmes.

Il est révolu 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 déboguant des extraits de code JavaScript, en inspectant et en modifiant des éléments DOM, en surveillant le trafic réseau en temps réel pendant le chargement de votre application ou de votre page 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 populaires.

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 des 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.

   

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) +COMMANDE+I)

   

4. L'interface des outils de développement Chrome devrait maintenant s'afficher, 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 Performance tab.

   • Mémoire: surveille et enregistre l'utilisation de la mémoire sur une page Web. Vous pouvez voir à quel point le JavaScript est lourd sur votre site.
   • Security: 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.

   

6. Device Mode vous permet d'afficher la page active dans un simulateur qui la rend presque exactement telle qu'elle apparaîtrait sur l'un des douze appareils, y compris plusieurs appareils Android bien connus et les modèles iOS 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 téléphone portable située directement à gauche du Éléments onglet.

   

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.

   Depuis 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.

   

Mozilla Firefox

La section des développeurs Web de Firefox comprend des outils pour les concepteurs, les développeurs et les testeurs, tels qu'un éditeur de style et une pipette ciblant les 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.

   

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.

   • Toggle Tools: 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)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: vous permet d'inspecter et/ou de modifier le code CSS et HTML sur la page active ainsi que sur un appareil portable via le débogage à distance. Raccourci clavier: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Console Web: vous permet d'exécuter des expressions JavaScript dans la page active et de consulter un ensemble varié 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)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: le débogueur JavaScript vous permet d'identifier 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 les 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)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: 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 (SHIFT+F7)
   • Performance: 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 clignotement de la peinture et bien plus encore. Raccourci clavier: Mac OS X, Windows (SHIFT+F5)
   • Network: Répertorie chaque requête réseau initiée par le navigateur avec la méthode correspondante, le domaine d'origine, le type, la taille et le temps écoulé. Raccourci clavier: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: examinez le cache et les cookies stockés par un site Web. Raccourci clavier: (SHIFT+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 (SHIFT+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 (SHIFT+F8)
   • Browser Console: fournit les mêmes fonctionnalités que la console Web (voir ci-dessus). Cependant, toutes les données renvoyées concernent l'ensemble 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 (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: 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)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: affiche le code de 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 Firefox. Ouvrez un document JavaScript interactif qui vous permet d'écrire du code et de le tester sur un site Web. Raccourci clavier: (SHIFT+F4)
   • Service Workers: Déboguer 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 (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: ouvre la collection Web Developer's Toolbox sur le site officiel des modules complémentaires de Mozilla, avec une douzaine d'extensions populaires telles que comme Firebug et Greasemonkey.

   

Microsoft Edge/Internet Explorer

Communiquement appelé F12 Developer Tools, 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, de débogueurs, d'émulateurs et de compilateurs à la volée.

Microsoft ne prend plus en charge Internet Explorer et vous recommande de mettre à jour vers le nouveau navigateur Edge. Rendez-vous sur leur site pour télécharger la dernière version.

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

   

2. Lorsque le menu déroulant apparaît, sélectionnez l'option intitulée Developer Tools.

   

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.

   

   • DOM Explorer: vous permet de modifier les feuilles de style et le code HTML dans la page active, en affichant les résultats modifiés au fur et à mesure. Utilise la fonctionnalité IntelliSense pour compléter automatiquement le code, le cas échéant. Raccourci clavier: (CTRL+1)
   • Console: offre la possibilité de soumettre des informations de débogage, notamment des compteurs, des minuteries, 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)
   • Debugger: vous 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)
   • Network: Répertorie chaque requête réseau initiée par le navigateur lors du chargement et de 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)
   • Performance: 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)
   • Memory: 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 saisissant 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 dans le coin supérieur droit de l'interface des outils de développement.

   

5. Pour désancrer l'interface des outils de développement afin qu'elle devienne une fenêtre séparée, 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 seconde fois sur CTRL+P.

   

Apple Safari (Mac uniquement)

L'ensemble d'outils de développement diversifié de Safari reflète la grande communauté de développeurs qui utilisent 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 Preferences. Vous pouvez également utiliser le raccourci clavier suivant à la place de cet élément de menu: COMMAND+COMMA(,)

   

2. L'interface Preferences 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.

   

3. Les préférences Advanced devraient maintenant être visibles. Au bas de cet écran se trouve une option intitulée Show Develop menu dans la barre de menus, accompagnée d'une case à cocher. S'il n'y a pas de coche dans la case, cliquez une fois dessus pour en placer une.

   

4. Fermez l'interface Préférences.

5. Vous devriez maintenant remarquer une nouvelle option dans le menu du navigateur nommée Develop, située entre Bookmarks et Window. 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.
   • User Agent: 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.
   • Entrez en mode de conception réactive: 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: Éléments, Réseau, Ressources, Chronologies, Débogueur, Stockage, Console.
   • Show Error Console: 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 journalisation.
   • Afficher la source de la page: Ouvre l' onglet Ressources, qui affiche le code source de la page active classée par document.
   • Afficher les ressources de la page: effectue la même fonction que l'option Afficher la source de la page.
   • Show Snippet Editor: 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.
   • Show Timeline Recording: Ouvre l'onglet Timelines et commence à afficher les requêtes réseau, la mise en page et les informations de rendu ainsi que l'exécution de JavaScript en temps réel.
   • Empty Caches: Supprime l'intégralité du cache actuellement stocké sur votre disque dur.
   • Disable Caches: Arrête la mise en cache de Safari afin que tout le contenu soit récupéré du serveur à chaque chargement de page.
   • Disable Images: Empêche le rendu des images sur toutes les pages Web.
   • Disable Styles: Ignore les propriétés CSS lorsqu'une page est chargée.
   • Désactiver JavaScript: limite l'exécution de JavaScript sur toutes les pages.
   • Disable Extensions: Interdit à toutes les extensions installées de s'exécuter dans le navigateur.
   • Disable Site-specific Hacks: 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 il l'aurait fait avant l'introduction de ces modifications.
   • Disable Local File Restrictions: Permet au navigateur d'avoir accès aux fichiers sur vos disques locaux, une action qui est restreinte par défaut pour des raisons de sécurité.
   • Disable Cross-Origin Restrictions: Ces restrictions sont mises en place par défaut pour prévenir 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 intelligent: lorsqu'il est activé, il offre la possibilité de saisir des URL avec javascript: incorporé 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 généralement considérés comme obsolètes et vulnérables.