Utilisation efficace des outils de développement de Chrome (didacticiel)

Outils de développement de Edge par rapport aux outils de développement de Chrome

Toutes les vidéos du tutoriel Utiliser efficacement les outils de développement Chrome (didacticiel)

Dans ce tutoriel, vous apprendrez à connaître les outils de développement Microsoft Edge, qui sont similaires à bien des égards aux outils de développement Google Chrome. Vous découvrirez comment ouvrir et utiliser efficacement les outils, ainsi que les différences entre les deux outils de développement de navigateur.

Principales conclusions

Les outils de développement Edge offrent une interface utilisateur presque identique à celle des outils de développement Chrome en ce qui concerne les fonctionnalités de base. Les différences résident principalement dans l'interface utilisateur et quelques fonctionnalités supplémentaires, tandis que les outils principaux et les raccourcis sont restés largement les mêmes.

Guide étape par étape

Pour ouvrir les outils de développement Edge, vous disposez de différentes options. Une possibilité est d'appuyer sur F12. Si vous travaillez sur un Mac, vous pouvez utiliser la combinaison de touches Commande + Option + I. Les utilisateurs de Windows peuvent également utiliser la combinaison Contrôle + Maj + I. Si vous souhaitez ouvrir les outils de développement via le menu contextuel, faites un clic droit sur l'en-tête de la page Web et sélectionnez "Inspecter".

L'interface des outils de développement Edge vous semblera immédiatement familière si vous avez déjà travaillé avec les outils de développement Chrome. Les onglets sont là, les icônes ont un aspect légèrement différent, et les outils supplémentaires sont accessibles via un symbole "+" dans la barre supérieure. Dans Chrome, ces outils supplémentaires étaient accessibles via le menu principal.

Outils de développement Edge par rapport aux outils de développement Chrome

Si vous souhaitez ajouter un nouvel onglet dans les outils de développement Edge, il vous suffit de cliquer sur le symbole "+". Vous pouvez par exemple ajouter l'outil d'animation. Celui-ci s'affichera alors en haut de la barre d'onglets, de manière similaire aux outils de développement Chrome.

Un onglet "Bienvenue" est également présent, similaire à la page "Nouveautés" de Chrome. Vous pouvez y consulter un aperçu des fonctionnalités des outils de développement. Je vous recommande de consulter cet onglet pour découvrir éventuellement des astuces utiles que nous n'avons pas encore traitées dans le cours.

Outils de développement Edge par rapport aux outils de développement Chrome

Une autre fonctionnalité utile des outils de développement Edge est la possibilité de déplacer la barre d'onglets sur la gauche. Cela permet une disposition verticale des onglets. Les icônes apparaissent alors sous forme de bulles d'information, ce qui permet d'économiser de l'espace et d'offrir plus de place pour les outils eux-mêmes.

Outils de développement Edge par rapport aux outils de développement Chrome

Les outils de conception eux-mêmes peuvent être modifiés via divers paramètres, similaires aux paramètres Chrome. Vous pouvez personnaliser les menus déroulants, la documentation et la barre d'activité. Ainsi, vous conservez votre environnement de travail habituel.

Une des rares différences est le symbole supplémentaire pour Azure DevOps dans les outils Edge, qui n'est pas présent dans Chrome. Ceci est particulièrement utile pour les développeurs travaillant dans l'environnement Azure.

Outils de développement Edge par rapport aux outils de développement Chrome

Une fois que vous êtes dans les onglets respectifs, vous remarquerez que la structure et les fonctionnalités des deux outils sont presque identiques. Vous pouvez utiliser les styles, les mises en page calculées et tout ce que vous avez l'habitude de faire dans Chrome, également dans Edge.

Outils de développement Edge par rapport aux outils de développement Chrome

Cependant, les mises à jour des fonctionnalités peuvent légèrement différer. Lorsque Chrome ajoute une nouvelle fonctionnalité, il se peut qu'elle soit disponible un peu plus tard dans Edge, ou vice versa. Il est donc recommandé de vérifier régulièrement quelles sont les nouvelles fonctionnalités ajoutées aux différents outils.

Outils de développement Edge par rapport aux outils de développement Chrome

C'est tout ce que vous devez savoir sur les outils de développement Edge. Si vous êtes déjà familier avec les outils de développement Chrome, vous vous retrouverez rapidement à l'aise avec les outils de développement Edge.

Outils de développement Edge par rapport aux outils de développement Chrome

Résumé

Dans ce tutoriel, vous avez appris les similitudes et les différences entre les outils de développement Google Chrome et Microsoft Edge. Vous savez maintenant comment ouvrir les outils et quelles fonctionnalités sont à votre disposition pour travailler efficacement sur vos projets Web.

Questions fréquemment posées

Comment ouvrir les outils de développement de Microsoft Edge ?Appuyez sur F12 ou utilisez la combinaison Control + Maj + I sur Windows.

Y a-t-il de grandes différences entre les outils de développement d’Edge et de Chrome ?Les différences sont minimes, principalement dans l'interface utilisateur et quelques fonctionnalités supplémentaires.

Puis-je personnaliser la barre d'onglets dans Edge ?Oui, en cliquant sur le symbole Plus, vous pouvez ajouter de nouveaux onglets et déplacer la barre d'onglets vers la gauche.

Les raccourcis dans Edge sont-ils similaires à ceux de Chrome ?Oui, la plupart des raccourcis sont identiques.

Microsoft Edge introduit-il également des mises à jour futures ?Oui, cependant, les fonctionnalités peuvent apparaître légèrement décalées par rapport à celles de Chrome.