Comment utiliser les outils de développement de navigateur Web

Comment utiliser les outils de développement de navigateur Web

En plus de la plupart des fabricants de navigateurs qui se concentrent sur les utilisateurs quotidiens qui souhaitent se connecter, ils s’adressent également aux développeurs Web, aux concepteurs et aux professionnels de l’assurance qualité qui aident à développer ce que font ces utilisateurs en intégrant des outils puissants directement dans le navigateur. par eux-même.

Fini le temps où les seuls outils de programmation et de test présents dans un navigateur permettaient de visualiser le code source d’une page. Les navigateurs d’aujourd’hui vous permettent d’identifier les goulots d’étranglement 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 lors du chargement de votre application ou de votre page, en analysant les performances CSS et en vous assurant que votre code n’utilise pas trop de mémoire Ou trop de cycles CPU, etc.

Du point de vue des tests, vous pouvez reproduire le rendu de votre application ou de votre page Web sur différents navigateurs et 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 jamais quitter votre navigateur !

Les didacticiels suivants 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 les problèmes de performances, de simuler différents écrans d’appareils (y compris ceux exécutant Android ou iOS) et d’effectuer plusieurs autres fonctions utiles.

1. Choisissez Chrome menu principalmarqué de trois lignes horizontales, dans le coin supérieur droit du navigateur.

2. Lorsque le menu déroulant apparaît, passez le curseur de la souris sur plus d’outils options.

3. Un sous-menu devrait maintenant apparaître.Sélectionnez l’option marquée comme outils de développement. Vous pouvez également utiliser les raccourcis clavier suivants à la place de cet élément de menu : Chrome OS/Windows (CTRL+MAJ+I), Mac OS X (ALT (option) + commande + i)

4. L’interface des outils de développement Chrome devrait maintenant apparaître, 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 illustrée ici. Le centre principal des outils de développement, généralement 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 >> icône, à droite Performance Étiquette.

   • Mémoire: Surveillez et enregistrez l’utilisation de la mémoire sur les pages Web. Vous pouvez voir à quel point JavaScript est lourd sur votre site.
   • Sécurité: met en évidence les problèmes de certificat et d’autres problèmes liés à la sécurité pour la page ou l’application active.
   • application: Vérifiez les ressources utilisées par l’application Web. Obtenez une ventilation complète de ce qui est utilisé.
   • Audit: fournit 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 une page active dans un émulateur qui peut l’afficher sur presque un appareil parmi plus d’une douzaine, y compris certains modèles Android et iOS bien connus tels que l’iPad, l’iPhone et le Samsung Galaxy. Vous pouvez également simuler des résolutions d’écran personnalisées pour répondre à vos besoins spécifiques de développement ou de test.

   basculer mode appareil Marche et arrêt, sélectionnez icône de téléphone directement à gauche élément Étiquette.

7. Vous pouvez également commencer par sélectionner bouton de menu représenté comme trois points placés verticalement et à l’extrême droite des onglets ci-dessus.

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

Navigateur 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 positionnement des pixels.

1. Choisissez Firefox menu principalExprimé en trois lignes horizontales et 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. Cette Menu Développeur Web Il devrait maintenant apparaître, avec les options suivantes. Vous remarquerez que la plupart des éléments de menu sont associés à des raccourcis clavier.

   • basculer l’outil: affiche ou masque l’interface des outils de développement, généralement en bas de la fenêtre du navigateur. Raccourcis clavier : Mac OS X (ALT (option) + commande + i), les fenêtres (CTRL+MAJ+I)
   • Inspecteur: vous permet d’inspecter et/ou d’ajuster le code CSS et HTML sur les pages actives et les appareils portables via le débogage à distance. Raccourcis clavier : Mac OS X (ALT (option)+commande+C), les fenêtres (CTRL+MAJ+C)
   • console Web: vous permet d’exécuter des expressions JavaScript dans la page active et d’afficher diverses données enregistrées, notamment des avertissements de sécurité, des requêtes réseau, des messages CSS, etc. Raccourcis clavier : Mac OS X (ALT (option)+commande+K), les fenêtres (CTRL+MAJ+K)
   • Débogueur: Cette Débogueur JavaScript Vous permet d’identifier et de corriger les bogues en définissant des points d’arrêt, en inspectant les nœuds DOM, en mettant en boîte noire les sources externes, etc.et Inspecteur, cette fonctionnalité prend également en charge le débogage à distance. Raccourcis clavier : Mac OS X (ALT (option) + commande + S), les fenêtres (CTRL+MAJ+S)
   • éditeur de styles: vous permet de créer de nouvelles feuilles de style et de les fusionner avec la page Web active, ou de modifier des feuilles existantes et de tester le rendu de vos modifications dans le navigateur en un seul clic. Raccourcis 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 scintillement de la peinture, etc. Raccourcis 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 correspondante, le domaine d’origine, le type, la taille et le temps écoulé. Raccourcis clavier : Mac OS X (ALT (option)+commande+Q), les fenêtres (CTRL+MAJ+Q)
   • inspecteur de stockage: Voir les caches et les cookies stockés par le site Web. Raccourcis clavier: (MAJ+F9)
   • Barre d’outils du développeur: Ouvre l’interpréteur de ligne de commande interactif.Entrer aider Entrez l’interpréteur pour obtenir une liste de toutes les commandes disponibles et leur syntaxe correcte. Raccourcis clavier : Mac OS X, Windows (MAJ+F2)
   • EDI Web: offre la possibilité de créer et d’exécuter des applications Web à partir d’un appareil réel exécutant Firefox OS ou à partir du simulateur Firefox OS. Raccourcis clavier : Mac OS X, Windows (MAJ+F8)
   • console du navigateur: livré avec console Web (Chercher). Cependant, toutes les données renvoyées concernent l’ensemble de l’application Firefox (y compris les extensions et les fonctionnalités au niveau du navigateur), et pas seulement la page Web active. Raccourcis clavier : Mac OS X (MAJ+Commande+J), les fenêtres (CTRL+MAJ+J)
   • Vue de conception réactive: vous permet d’afficher instantanément des pages Web dans différentes résolutions, mises en page et tailles d’écran pour imiter plusieurs appareils, y compris les tablettes et les smartphones. Raccourcis clavier : Mac OS X (ALT (option)+commande+M), les fenêtres (CTRL+MAJ+M)
   • paille: Affiche le code couleur hexadécimal des pixels sélectionnés individuellement.
   • Remarques: Scratchpad vous permet d’écrire, de modifier, d’intégrer et d’exécuter des extraits de code JavaScript dans une fenêtre Firefox contextuelle. Ouvre un document JavaScript interactif dans lequel vous pouvez écrire du code et le tester sur votre site Web. Raccourcis clavier: (MAJ+F4)
   • service personnelle: Déboguez votre application Web avec un service worker. Obtenez des détails sur ses performances et ses bogues.
   • origine de la page: L’outil de développement original basé sur un navigateur, cette option affiche uniquement le code source disponible pour la page active. Raccourcis clavier : Mac OS X (commande+U), les fenêtres (CTRL+U)
   • Obtenez plus d’outils: Ouvert Boîte à outils du développeur Web Une collection sur le site Web officiel des modules complémentaires de Mozilla, qui contient environ une douzaine d’extensions populaires telles que Firebug et Greasemonkey.

Microsoft Edge/Internet Explorer

généralement appelé Outils de développement F12un clin d’œil aux raccourcis clavier pour lancer les interfaces depuis les premières versions d’Internet Explorer, l’ensemble d’outils de développement dans IE11 et Microsoft Edge a parcouru un long chemin depuis son introduction, offrant un ensemble très pratique de moniteurs, débogueurs , émulateur, etc. compilateur de vol.

1. choisir Plus d’actionsExprimé en Trois points et dans le coin supérieur droit de la fenêtre du navigateur.

2. Lorsque le menu déroulant apparaît, sélectionnez l’option marquée comme outils de développement.

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 étant accessible en cliquant sur le titre de l’onglet respectif ou en utilisant les raccourcis clavier inclus.

   • Navigateur DOM: vous permet d’éditer les feuilles de style et le HTML dans la page active, en rendant le résultat modifié à tout moment. Code de saisie semi-automatique avec IntelliSense, le cas échéant. Raccourcis clavier: (CTRL+1)
   • confort: offre la possibilité de soumettre des informations de débogage, notamment des compteurs, des minuteurs, des traces et des messages personnalisés, via l’API intégrée. De plus, vous pouvez injecter du code dans des pages Web actives et modifier les valeurs attribuées à des variables individuelles en temps réel. Raccourcis clavier: (CTRL+2)
   • Débogueur: vous permet de définir des points d’arrêt et de déboguer votre code au fur et à mesure de son exécution, ligne par ligne si nécessaire. Raccourcis clavier: (CTRL+3)
   • réseau: répertorie toutes les requêtes réseau effectuées 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. Raccourcis 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. Raccourcis 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 de l’utilisation de la mémoire ainsi que des instantanés à différents intervalles de temps. Raccourcis clavier: (CTRL+6)
   • Simulation: vous montre comment la page de l’événement s’affichera dans différentes résolutions et tailles d’écran, simulant des smartphones, des tablettes et d’autres appareils. Il offre également la possibilité de modifier l’agent utilisateur et l’orientation de la page, ainsi que de simuler différents emplacements géographiques en saisissant la latitude et la longitude. Raccourcis clavier: (CTRL+7)

4. afficher confort Appuyez sur n’importe quel autre outil bouton carré Il y a un crochet de fermeture à l’intérieur, situé 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 dans une fenêtre séparée, sélectionnez deux rectangles en cascade ou utilisez les raccourcis clavier suivants : CTRL+PVous pouvez appuyer sur CTRL+P la deuxième fois.

Apple Safari (Mac uniquement)

L’ensemble diversifié d’outils de développement de Safari reflète la grande communauté de développeurs qui utilisent le Mac pour leurs besoins de conception et de programmation. En plus de la puissante console et des fonctionnalités traditionnelles de journalisation et de débogage, un logiciel responsive facile à utiliser…