Il n’y a pas grand-chose que vous ne pouvez pas faire avec les technologies Web de nos jours. La plate-forme Web a tellement évolué que des choses aussi diverses que l’animation d’éléments, la lecture ou l’enregistrement de médias, l’accès aux fichiers ou au stockage, l’interception des requêtes réseau et l’accès au cache, la création de mises en page CSS complexes ou l’écriture de code natif sont toutes possibles aujourd’hui.
Avec tant de choses à apprendre et à utiliser, les développeurs Web ont besoin d’une suite complète d’outils sur lesquels ils peuvent compter.
Heureusement, Microsoft Edge est livré avec des outils de développement qui permettent aux développeurs Web d’être productif avec les fonctionnalités Web et les API. Peu importe ce que vous faites, il existe très probablement un outil dédié qui peut vous aider.
Le revers de la médaille est que les DevTools ont tendance à être assez compliqués. Ils contiennent plus de 30 outils différents et l’interface utilisateur s’est développée au fil du temps pour les accueillir. De plus, de nouvelles fonctionnalités sont ajoutées en permanence en réponse aux commentaires que nous recevons des utilisateurs.
Dans cet article, nous vous présenterons les nouvelles fonctionnalités de Microsoft Edge DevTools qui aident à rendre les outils plus accessible et personnalisable, vous pouvez donc commencer à relever le défi d’avoir autant d’outils différents à votre disposition. Vous pouvez également en savoir plus sur ces fonctionnalités dans la vidéo ci-dessous.
DevTools évolue rapidement d’un navigateur à l’autre-pour restez au courant des dernières nouveautés des autres navigateurs, consultez mon article dans Smashing Magazine couvrant les nouvelles fonctionnalités de DevTools dans Microsoft Edge, Google Chrome, Mozilla Firefox et Safari.
Ouvrir, fermer et déplacer des outils
Bien que les DevTools disposent d’environ 30 outils distincts, il est peu probable que vous aurez besoin d’accéder à plus d’une poignée d’entre eux en même temps, sans parler de 30. Il est donc très important d’avoir un moyen d’ouvrir facilement les outils lorsque vous en avez besoin et de les fermer lorsque vous n’en avez pas besoin.
En même temps, il peut y avoir des outils que vous n’avez jamais utilisés auparavant et qui pourraient être très pratiques. Si ceux-ci sont fermés par défaut, vous ne les découvrirez peut-être jamais du tout.
Nous avons ajouté trois petites fonctionnalités DevTools, mais très puissantes, pour résoudre ce problème.
Outils de fermeture
Les onglets de Microsoft Edge DevTools ont désormais un bouton de fermeture qui peut être utilisé pour masquer ceux dont vous n’avez plus besoin. Vous pouvez donc conserver une interface utilisateur propre et simple, et ne disposer que des outils dont vous avez besoin pour le moment.
Notez que quelques outils n’ont pas de bouton de fermeture : Éléments, Console et Sources. Ces outils sont beaucoup plus utilisés que tous les autres. Les développeurs Web en ont besoin à tout moment, et les fermer n’a pas beaucoup de sens.
Ouverture des outils
Il y a maintenant un bouton + (plus) à la fin de la barre d’onglets pour ouvrir n’importe quel outil qui n’est pas déjà ouvert.
Auparavant, pour découvrir tous les outils disponibles, il fallait aller dans le menu principal (…), puis sélectionner Plus d’outils, ou savoir utiliser le menu de commandes pour accéder rapidement aux outils. Le bouton + facilite la découverte et l’accès à d’autres outils.
Il peut y avoir deux barres d’onglets dans DevTools : une en haut, qui est toujours visible et où se trouvent généralement les panneaux Éléments et Sources, et une en bas, le tiroir, qui peut être basculé en appuyant sur Esc sur votre clavier. La console vit généralement dans le tiroir. Ces deux barres d’onglets ont le bouton +, vous pouvez donc ouvrir de nouveaux outils dans l’un de ces 2 emplacements.
Déplacer les outils
Avoir le tiroir ouvert peut être très utile lors du débogage de quelque chose qui nécessite plus d’un outil en même temps.
Par exemple, vous souhaiterez peut-être que les panneaux Sources et Réseau s’ouvrent en même temps pour vous assurer que les bonnes requêtes HTTP sont envoyées lors de l’étape de débogage du code JavaScript. Ou vous voudrez peut-être que les panneaux Éléments et Vue 3D soient ouverts côte à côte pour déboguer un problème d’index z avec un élément.
Avec Microsoft Edge DevTools, vous pouvez désormais déplacer des outils entre la zone principale et le tiroir en ouvrant le menu contextuel (clic droit) sur le l’onglet que vous souhaitez déplacer et en sélectionnant Déplacer vers le bas ou Déplacer vers le haut.
Notez que si vous sélectionnez le bouton + dans le tiroir et choisissez un outil dans la liste qui est déjà ouverte dans la zone principale, alors cet outil sera déplacé vers le tiroir. C’est un autre bon moyen de déplacer les outils.
En savoir plus sur les outils, depuis les outils
Le bouton + est idéal pour découvrir facilement de nouveaux outils que vous n’avez peut-être pas utilisés auparavant. Mais parfois, l’interface utilisateur d’un outil peut être écrasante à première vue. Il est utile d’avoir une documentation disponible. La documentation Microsoft Edge DevTools peut vous y aider, mais n’est souvent pas à portée de main lorsque vous êtes à mi-tâche.
Récemment, nous avons ajouté une fonctionnalité pour faciliter l’apprentissage contextuel d’un nouvel outil : DevTools Tooltips. Les info-bulles DevTools sont une superposition qui couvre les outils et fournit une documentation contextuelle à leur sujet, avec des liens pour en savoir plus.
Vous pouvez activer les info-bulles DevTools de 3 manières différentes :
Allez sur le bouton Personnaliser et contrôler DevTools (…) > Aide > Activer les info-bulles de DevTools. Vous pouvez également utiliser le raccourci clavier Ctrl+Maj+H (Cmd+Maj+H sur Mac). Ou utilisez le menu de commandes et tapez”info-bulles”.
Une fois activé, déplacez simplement votre souris sur les zones en surbrillance pour afficher une info-bulle d’information sur cette zone spécifique des outils (vous pouvez également utiliser la touche Tab pour naviguer dans les info-bulles). Certaines des info-bulles contiennent même des liens vers le site Web de documentation pour en savoir encore plus.
Notez que vous pouvez également accéder à d’autres panneaux pendant que les info-bulles de DevTools sont actives. De cette façon, vous pouvez naviguer dans DevTools et continuer à apprendre de nouvelles choses sans avoir à tourner le bouton fonction désactivée et rallumée à chaque fois.
Changer de langage
Nous savons que les développeurs peuvent être plus productifs lorsque leurs outils correspondent à leur langage préférence d’utilisation. De plus, d’autres produits de développement Microsoft, y compris VS Code, peuvent être utilisés dans d’autres langues. C’est pourquoi nous avons rendu DevTools disponible dans 11 langues différentes.
Par défaut, DevTools correspond à la langue que vous choisissez pour l’interface utilisateur du navigateur, mais vous pouvez la définir indépendamment sur l’une de ces autres langues.
Pour changer la langue, accédez aux paramètres DevTools (en utilisant le raccourci F1 ou en cliquant sur l’icône d’engrenage dans la barre d’outils) et choisissez dans la Langue liste déroulante.
Après avoir rechargé DevTools, son interface utilisateur apparaîtra dans la langue de votre choix, ce qui plus facile d’utiliser les outils. Voici à quoi cela ressemble en français :
Cela fonctionne également très bien avec la fonctionnalité DevTools Tooltips, car la documentation contextuelle est également traduite, comme indiqué en russe ci-dessous.
Depuis nous avons annoncé la sortie expérimentale de la fonctionnalité DevTools localisée en 2020, nous avons poursuivi notre collaboration avec les équipes Lighthouse et Chrome de Google via le projet Chromium, et la fonctionnalité n’est désormais plus uniquement disponible pour tous les utilisateurs de Microsoft Edge, b mais également à toute personne utilisant DevTools dans un navigateur basé sur Chromium.
Personnalisation de votre thème de couleur
Si vous utilisez Visual Studio Code (ou d’autres éditeurs de texte et IDE d’ailleurs), vous a probablement personnalisé son thème de couleur en quelque chose de visuellement agréable et confortable pour travailler pendant de longues périodes.
Jusqu’à présent, le thème de couleur DevTools pouvait être personnalisé uniquement en choisissant entre ses thèmes sombres ou clairs. Cependant, il existe désormais 9 nouveaux thèmes de couleurs parmi lesquels choisir. Ce sont les mêmes que ceux préinstallés de Visual Studio Code et devraient donc vous être familiers.
Voici la liste complète des thèmes dans Microsoft Edge DevTools maintenant :
Thèmes existants : Light+ Dark+ Chromium Light Chromium Dark Nouveaux thèmes: Quiet Light Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue
Pour choisir un nouveau thème, vous pouvez aller dans les Paramètres (l’icône d’engrenage dans la barre d’outils ) et utilisez le menu déroulant Thème . Vous pouvez également utiliser le menu de commandes et taper”thème”pour voir la liste complète des thèmes de couleurs disponibles.
Notez que si vous utilisez le Outils Microsoft Edge pour l’extension VS Code, vous avez peut-être remarqué que DevTools n’est pas toujours affiché avec le même thème de couleur que l’interface utilisateur VS Code elle-même.
Maintenant, grâce au nouveau thèmes de couleur dans DevTools, cela ne se produira plus. À partir de Microsoft Edge 95, l’interface utilisateur DevTools, intégrée dans VS Code, correspondra au thème de couleur sélectionné.
Si vous ne connaissez pas cette extension, en savoir plus ici.
Commentaires
Les commentaires des utilisateurs nous permettent de déterminer les priorités pour le travail en cours sur Microsoft Edge DevTools. Si vous avez des questions ou des commentaires sur ces fonctionnalités ou d’autres, veuillez nous envoyer quelques mots et des captures d’écran en utilisant le le bouton de commentaires dans DevTools.
N’hésitez pas à poser également des questions à notre équipe sur Twitter en mentionnant le @EdgeDevTools compte.
– Patrick Brosset, responsable de programme senior, Microsoft Edge
