Comment utiliser les outils de développement de navigateur Web

Outre la plupart des fabricants de navigateurs qui s’adressent aux utilisateurs quotidiens qui cherchent à surfer sur le Web, ils s’adressent également aux développeurs, concepteurs et professionnels de l’assurance qualité qui les aident à créer les applications et les sites auxquels ces utilisateurs ont accès en intégrant des outils puissants directement dans les navigateurs. se.

Fini l'époque où les seuls outils de programmation et de test disponibles dans un navigateur vous permettaient de visualiser le code source d'une page et rien de plus. Les navigateurs actuels vous permettent d'approfondir vos connaissances en exécutant et en déboguant des extraits JavaScript, en inspectant et en modifiant des éléments DOM, en surveillant le trafic réseau en temps réel au fur et à mesure du chargement de votre application ou de votre page pour identifier les goulots d'étranglement, en analysant les performances CSS, en veillant à ce que votre code ne pas utiliser trop de mémoire ou trop de cycles du processeur, 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 d'un design réactif et de 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 de Chrome vous permettent d’éditer et de déboguer du code, d’auditer des composants individuels afin d’exposer des problèmes de performances, de simuler différents écrans de périphériques, y compris ceux fonctionnant sous Android ou iOS, et d’exécuter plusieurs autres fonctions utiles.

1. Cliquez sur le bouton du 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, survolez la souris avec la souris. Plus d'outils option.
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 )
4. L'interface de Chrome Developer Tools devrait maintenant s'afficher, comme illustré dans cet exemple de capture d'écran. En fonction de 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 à droite ou à droite de l'écran, contient les onglets suivants.Éléments: Offre la possibilité d'inspecter le code CSS et HTML ainsi que de modifier le code CSS à la volée, en visualisant les effets de vos modifications en temps réel.Console: La console JavaScript de Chrome permet la saisie directe de commandes ainsi que le débogage de diagnostics.Sources: Vous permet de déboguer du code JavaScript via une interface graphique puissante.Réseau: Catégorise et affiche des informations détaillées sur chaque opération associée sur l'application ou la page active, y compris les en-têtes complets de requête et de réponse, ainsi que les mesures de minutage avancées.Chronologie: Permet une analyse approfondie de chaque activité qui a lieu dans le navigateur dès qu'une demande de chargement de page ou d'application est lancée.
5. Outre ces sections, vous pouvez également accéder aux outils suivants via le logiciel >> icône, située à droite de la Chronologie languette.Profil: Cassé en Profileur de la CPU et Profileur de tas sections, fournit une utilisation complète de la mémoire et le temps d’exécution global de l’application ou de la page active.Sécurité: Met en évidence les problèmes de certificat et autres problèmes liés à la sécurité avec la page ou l'application active.Ressources: C'est ici que vous pouvez inspecter les cookies, le stockage local, le cache d'applications et d'autres sources de données locales utilisées par la page Web ou l'application en cours.Audits: Offre des moyens d'optimiser le temps de chargement et les performances générales d'une page ou d'une application.
6. Mode appareil vous permet d'afficher la page active dans un simulateur, ce qui la rend presque exactement telle qu'elle apparaîtrait sur l'un 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 de développement ou de test. Pour basculer Mode appareil et désactiver, sélectionnez l’icône du téléphone portable située directement à gauche de Éléments languette.
7. Vous pouvez également personnaliser l'apparence de vos outils de développement en cliquant d'abord sur le bouton de menu représenté par trois points placés verticalement et situé à l'extrême droite des onglets susmentionnés. Dans 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 est hautement personnalisable via les paramètres de 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 de ciblage par pixel.

Lifewire a recommandé la lecture:Les 25 meilleurs scripts utilisateur Greasemonkey et Tampermonkey

1. Cliquez sur le bouton du 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 l'icône intitulée Développeur . le Développeur web menu 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 située au bas de la fenêtre du navigateur. Raccourci clavier: Mac OS X ( ALT (OPTION) + COMMAND + I ), Les fenêtres ( CTRL + SHIFT + I )Inspecteur: Vous permet d'inspecter et / ou d'ajuster le code CSS et HTML sur la page active ainsi que sur un périphérique portable via le débogage à distance. Raccourci clavier: Mac OS X ( ALT (OPTION) + COMMANDE + C ), Les fenêtres ( CTRL + SHIFT + C )Console Web: Vous permet d'exécuter des expressions JavaScript dans la page active, ainsi que de consulter un ensemble varié de données consigné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 ), Les fenêtres ( CTRL + SHIFT + K )Debugger: le Débogueur JavaScript vous permet de localiser et de réparer des défauts en définissant des points d'arrêt, en inspectant des nœuds DOM, des sources externes de type black boxing, etc. Comme c'est le cas avec le Inspecteur , cette fonctionnalité prend également en charge le débogage à distance. Raccourci clavier: Mac OS X ( ALT (OPTION) + COMMAND + S ), Les fenêtres ( CTRL + SHIFT + S) Éditeur de style: Vous permet de créer de nouvelles feuilles de style et de les incorporer à la page Web active, ou d'éditer 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 )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 ( MAJ + F5 )Réseau: Répertorie chaque requête réseau initiée par le navigateur avec la méthode, le domaine d'origine, le type, la taille et le temps écoulés. Raccourci clavier: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Les fenêtres ( CTRL + SHIFT + Q )Barre d'outils développeur: Ouvre un interpréteur de ligne de commande interactif. Entrer Aidez-moi dans l’interprète pour obtenir une liste de toutes les commandes disponibles et de leur syntaxe appropriée. Raccourci clavier: Mac OS X, Windows ( MAJ + F2 )WebIDE: Permet 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 de navigation: Fournit les mêmes fonctionnalités que le Console Web (voir au dessus). Cependant, toutes les données renvoyées concernent l’ensemble de l’application Firefox (y compris les extensions et les fonctions de navigateur), par opposition à la seule page Web active. Raccourci clavier: Mac OS X ( MAJ + COMMANDE + J ), Les fenêtres ( CTRL + SHIFT + J )Vue de conception réactive: Vous permet d'afficher instantanément une page Web dans différentes résolutions, dispositions et tailles d'écran pour imiter plusieurs périphériques, y compris des tablettes et des smartphones. Raccourci clavier: Mac OS X ( ALT (OPTION) + COMMAND + M ), Les fenêtres ( CTRL + MAJ + M )Pipette: Affiche le code de couleur hexadécimal pour les pixels sélectionnés individuellement.Bloc-notes: Vous permet d'écrire, de modifier, d'intégrer et d'exécuter des extraits de code JavaScript à partir d'une fenêtre Firefox en incrustation. Raccourci clavier: Mac OS X, Windows ( MAJ + F4 )Source de la page: 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 ), Les fenêtres ( CTRL + U )Obtenez plus d'outils: Ouvre le Boîte à outils du développeur Web collection sur le site officiel des add-ons de Mozilla, comprenant une douzaine d’extensions populaires telles que Firebug et Greasemonkey.

Microsoft Edge / Internet Explorer

Communément appelé le Outils de développement F12 , un hommage au raccourci clavier qui a lancé l’interface depuis les versions précédentes d’Internet Explorer, le jeu d’outils de développement dans IE11 et Microsoft Edge a parcouru un long chemin depuis sa création en proposant un groupe très pratique d’écrans, de débogueurs, compilateurs à la volée.

1. Clique sur le Plus d'actions menu, représenté par trois points et situé dans le coin supérieur droit de la fenêtre du navigateur. Lorsque le menu déroulant apparaît, sélectionnez l'option intitulée Outils de développement F12 . Comme je l'ai déjà mentionné, vous pouvez également accéder aux outils via le F12 raccourci clavier.
2. L’interface de développement doit maintenant être affichée, généralement en bas de la fenêtre du navigateur. Les outils suivants sont disponibles, chacun étant accessible en cliquant sur leur en-tête respectif ou en utilisant le raccourci clavier associé.DOM Explorer: Vous permet de modifier les feuilles de style et le code HTML dans la page active, en rendant 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: Permet 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. Permet également d'injecter du code dans une page Web active et de modifier les valeurs attribuées à des 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) Réseau: Répertorie chaque requête réseau lancé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, etc. Raccourci clavier: (CTRL + 4) Performance: Détaillez les fréquences d'images, l'utilisation de l'UC et d'autres mesures liées aux performances pour vous aider à réduire le 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 en cours en affichant une chronologie d'utilisation de la mémoire ainsi que des instantanés à différents intervalles de temps. Raccourci clavier: (CTRL + 6) Émulation: Vous indique comment la page active afficherait différentes résolutions et tailles d'écran, émulant des smartphones, des tablettes et d'autres appareils. Fournit é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)
3. Pour afficher le Console Alors que dans l'un des autres outils, cliquez sur le bouton carré avec un crochet droit à l'intérieur de celui-ci, situé dans le coin supérieur droit de l'interface des outils de développement.
4. Pour désancrer l'interface des outils de développement et la transformer en une fenêtre distincte, cliquez sur le bouton représenté par deux rectangles en cascade ou utilisez le raccourci clavier suivant: CTRL + P . Vous pouvez replacer les outils à leur emplacement d'origine en appuyant sur CTRL + P une seconde fois.

Apple Safari (OS X uniquement)

Les divers outils de développement de Safari reflètent l'importante communauté de développeurs qui utilise un Mac pour leurs besoins de conception et de programmation. Outre une console puissante et des fonctions de journalisation et de débogage traditionnelles, un mode de conception réactif facile à utiliser et un outil permettant de créer vos propres extensions de navigateur sont également fournis.

1. Cliquer sur 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 + COMMA (,)
2. Safari Préférences l'interface devrait maintenant être affichée, en superposant la fenêtre de votre navigateur. Clique sur le Avancée icône située à l'extrême droite de l'en-tête.
3. le Avancée les préférences devraient maintenant être visibles. Au bas de cet écran se trouve une option intitulée Afficher le menu de développement dans la barre de menu , accompagné d'une case à cocher. Si la case n'est pas cochée, cliquez dessus une fois pour en placer une.
4. Fermer la Préférences interface en cliquant sur le «x» rouge qui se trouve dans le coin supérieur gauche.
5. Vous devriez maintenant remarquer une nouvelle option dans le menu du navigateur nommée Développer , situé entre Signets et La fenêtre . Cliquez sur cet élément de menu. Un menu déroulant contenant les options suivantes devrait maintenant s'afficher.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, et de définir votre propre chaîne personnalisée.Entrez en mode de conception réactif: Rend la page actuelle telle qu'elle apparaîtrait sur différents appareils et à différentes résolutions d'écran.Afficher l'inspecteur Web: Lance l'interface principale pour les outils de développement de Safari, généralement placée au bas de l'écran de votre navigateur et contenant les sections suivantes: Éléments , Réseau , Ressources , Les délais , Débogueur , Espace de rangement , Console .Afficher la console d'erreur: Lance également l’interface des outils de développement, directement vers le Console onglet qui affiche les erreurs, les avertissements et d’autres données de journal interrogeables.Afficher la source de la page: Ouvre le Ressources onglet, qui affiche le code source de la page active classée par document.Afficher les ressources de la page: Remplit la même fonction que le Afficher la source de la page option.Afficher l'éditeur de fragments: Ouvre une nouvelle fenêtre dans laquelle vous pouvez saisir le code CSS et HTML, en affichant un aperçu de sa sortie à la volée.Afficher le constructeur d'extension: Permet de créer ou de modifier des extensions Safari avec CSS, HTML et JavaScript.Afficher l'enregistrement sur la timeline: Ouvre le Les délais onglet et commence à afficher les demandes du réseau, les informations de mise en page et de rendu, ainsi que l’exécution de JavaScript en temps réel.Caches vides: Supprime la totalité du cache en cours de stockage 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: Limite l'exécution de JavaScript sur toutes les pages.Désactiver les extensions: Empêche toutes les extensions installées de s'exécuter dans le navigateur.Désactiver les piratages spécifiques au site: Si Safari a été modifié pour gérer explicitement le (s) problème (s) spécifique (s) à la page Web active, cette option bloque ces modifications afin que la page soit chargée comme elle le serait avant l'introduction de ces modifications.Désactiver les restrictions de fichiers locaux: Permet au navigateur d’avoir accès aux fichiers de vos disques locaux, action limitée 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 prévenir les attaques 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: Lorsque activé, 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 largement considérés comme obsolètes et vulnérables.