Les outils de développement Chrome évoluent rapidement. Nous souhaitons donc vous présenter quelques nouvelles fonctionnalités et améliorations que nous avons apportées à certains composants. Plus précisément, nous allons parler de quelques modifications apportées à l'interface utilisateur, du profilage JavaScript haute résolution et des nouvelles fonctionnalités Workspaces.
- Le profilage haute résolution atteint désormais une précision de 0,1 milliseconde
- Les barres d'outils sont montées en haut de DevTools, et les forçages ont été déplacés dans le panneau de la console.
- Workspaces a ajouté plusieurs fonctionnalités pour ajouter/supprimer/rechercher des fichiers
Profilage haute résolution
Le profilage du processeur est une fonctionnalité très utile pour évaluer l'efficacité de votre code JavaScript. En plus des vues de profil traditionnelles, nous avons lancé un graphique de type "flamme" cet été, qui représente visuellement le traitement JavaScript d'une page au fil du temps. Il permet de voir facilement la profondeur de votre pile d'appels, ainsi que la durée de traitement de chaque fonction.
Jusqu'à récemment, les représentations traditionnelles de type "Heavy" (ascendante) et "Tree" (descendante), ainsi que le graphique en forme de flamme, n'affichaient que les processus avec une précision de 1 milliseconde. Pour la plupart des applications, cela convient. Toutefois, si vous travaillez sur un projet où la vitesse est vraiment importante dans l'interface utilisateur, comme un jeu, une résolution de 1 milliseconde peut être trop importante pour obtenir des résultats significatifs sur les causes de la lenteur de votre site ou de la latence de votre interface utilisateur. Pour activer le profilage haute résolution (actuellement Canary uniquement):
- Ouvrez les paramètres des outils pour les développeurs.
- Dans l'onglet Général, sous Profileur, activez Profilage du processeur haute résolution.
Voici un exemple de graphique en forme de flamme dans le profilage normal et en haute résolution, où nous profilons le chargement de la page d'accueil de HTML5Rocks.com:
Avec la résolution de profilage normale, la durée du processus est toujours arrondie à la milliseconde la plus proche. Par conséquent, un processus qui ne prend que 0,1 milliseconde ou moins est toujours signalé comme prenant 1 milliseconde, et d'autres processus peuvent ne pas apparaître du tout dans la pile d'appels.
Le profilage haute résolution a un coût important dans la VM JavaScript, c'est pourquoi il est désactivé par défaut. Bien que cette résolution soit plus attrayante que la résolution de profilage normale, nous vous recommandons de ne l'utiliser que si vous avez vraiment besoin de cette précision.
Améliorations apportées à l'interface utilisateur des outils de développement
Bien que de nouvelles fonctionnalités soient toujours déployées dans Canary, nous souhaitons attirer votre attention sur quelques modifications majeures de l'interface utilisateur: les boutons qui remontent en haut de l'interface utilisateur en général, les panneaux de navigation et d'informations de la chronologie, et le déplacement des forçages dans le panneau latéral de la console.
Commençons par examiner d'où nous venons. Comme nous parlons de Vos trajets, je vais essayer de répondre aux deux premières questions avec une paire de captures d'écran. Voici à quoi ressemble actuellement Vos trajets dans Chrome (version stable) :
Voici à quoi ressemble désormais Vos trajets.
Notez les points suivants:
- Les barres d'outils et les boutons se trouvent désormais en haut de l'écran, à la fois pour les barres d'outils spécifiques de Timeline à gauche et celles générales de DevTools à droite.
- La structure d'imbrication des enregistrements de Vos trajets s'affiche désormais dans le panneau de gauche. Vous pouvez même faire défiler les enregistrements à l'aide du clavier. En plus d'utiliser les touches vers le haut et vers le bas pour faire défiler l'écran vers le haut et vers le bas, vous pouvez également utiliser les touches vers la gauche et vers la droite pour ouvrir et fermer les enregistrements imbriqués.
- Les détails de l'heure s'affichent désormais dans un panneau de droite pour l'entrée que vous avez sélectionnée. (Vous pouvez également pointer sur d'autres entrées pour obtenir leurs informations.)
Voyons maintenant le tiroir de la console. Pour ouvrir le panneau de la console, appuyez sur Échap dans DevTools ou sur le bouton du panneau de la console 
. Le panneau se déroule depuis le bas.
Par défaut, les onglets Console et Recherche s'affichent. Pour accéder à la fonctionnalité anciennement appelée "Forcer", ouvrez les paramètres de DevTools et cochez la case "Afficher la vue "Emulation" dans le panneau de la console". Fermez la boîte de paramètres. Un onglet Émulation s'affiche dans le panneau de la console, comme illustré dans la capture d'écran ci-dessous:
Vous pouvez y effectuer toutes vos émulations.
Cette modification est nécessaire, car auparavant, vous deviez ouvrir et fermer les paramètres pour modifier vos forçages d'émulation, puis revenir en arrière pour afficher votre page. Vous pouvez désormais modifier vos forçages d'émulation tout en manipulant les styles.
Amélioration des espaces de travail
Les espaces de travail, en particulier, sont une fonctionnalité qui peut simplifier considérablement votre workflow de création. Pourtant, ils ne sont pas aussi appréciés qu'ils le méritent. Avec les espaces de travail, au lieu d'expérimenter et d'apporter des modifications dans les outils pour les développeurs, puis de devoir copier et coller vos modifications dans vos fichiers sources, vous pouvez apporter des modifications dans les outils pour les développeurs, les afficher dans le navigateur et les enregistrer dans une version locale persistante de vos fichiers, le tout sans quitter Chrome.
Si vous n'avez pas encore lu l'article Révolutions des outils pour les développeurs Chrome en 2013, consultez-le, puis revenez ici pour découvrir comment nous avons amélioré ces fonctionnalités au cours des derniers mois.
Ajouter des fichiers plus facilement
À l'époque de l'article Revolutions 2013, la création d'un espace de travail nécessitait d'ajouter le dossier à vos espaces de travail, puis de le mapper sur une ressource réseau. Nous avons simplifié ce processus en une seule étape: il vous suffit d'effectuer un clic droit dans le panneau de gauche des sources, puis de sélectionner Ajouter un dossier à l'espace de travail. Une boîte de dialogue de fichier s'ouvre, dans laquelle vous pouvez choisir un nouveau dossier à ajouter à vos Workspaces. (Le dossier actuellement mis en surbrillance n'est pas ajouté à vos espaces de travail.)
Créer et supprimer des fichiers
Vous pouvez désormais ajouter des fichiers au répertoire local que vous utilisez pour Workspaces dans Workspaces. Il vous suffit de faire un clic droit sur un dossier dans le panneau "Sources" de gauche, puis de sélectionner New File (Nouveau fichier).
Vous pouvez également supprimer des fichiers depuis Workspaces. Effectuez un clic droit sur un fichier dans le panneau "Sources" de gauche, puis sélectionnez Supprimer le fichier.
Vous pouvez également dupliquer un fichier en sélectionnant Dupliquer le fichier.
Actualiser
Maintenant que vous pouvez créer des fichiers (ou en supprimer) directement dans les espaces de travail, le répertoire "Sources" s'actualise également automatiquement et affiche ces nouveaux fichiers. Si ce n'est pas le cas, vous pouvez toujours effectuer un clic droit sur un dossier et sélectionner Actualiser dans le menu contextuel pour forcer l'actualisation.
Cette option est également utile si vous modifiez des fichiers ouverts dans un autre éditeur et que vous souhaitez que les modifications s'affichent dans DevTools.
Rechercher dans les fichiers
Nous avons un peu affiné l'interface de recherche dans les fichiers. Vous pouvez désormais rechercher des chaînes dans tous les fichiers de vos espaces de travail, ainsi que dans tous les fichiers chargés dans DevTools. Vous pouvez rechercher une chaîne ou une expression régulière, et nous trouvons toutes les occurrences dans chaque fichier ou page. Pour rechercher plusieurs fichiers dans Workspaces (actuellement disponible dans Canary):
- Ouvrez le panneau de la console en appuyant sur la touche Échap, puis cliquez sur l'onglet Recherche à côté de Console pour ouvrir la fenêtre de recherche.
OU
Appuyez sur Ctrl + Shift + F (Cmd + Opt + F sur Mac) pour ouvrir la fenêtre de recherche.
- Saisissez votre requête dans le champ Sources de recherche, puis appuyez sur Entrée. Si votre requête est une expression régulière ou doit être insensible à la casse, cochez la case appropriée.
Listes d'éléments à ignorer
Rechercher dans le texte des fichiers ou filtrer par nom de fichier peut s'avérer très fastidieux si vous avez une tonne de fichiers .git ou README.md qui encombrent vos résultats.
Nous avons donc ajouté une fonctionnalité de liste d'ignorement dans Workspaces pour que vous puissiez exclure certains types de fichiers ou dossiers lorsque vous consultez et recherchez des éléments dans votre espace de travail.
Pour afficher et modifier la liste de blocage partagée actuelle dans Workspaces:
- Ouvrez les paramètres des outils pour les développeurs.
- Cliquez sur Espace de travail.
- Sous Commun, dans le champ Modèle d'exclusion de dossier, vous pouvez afficher et/ou modifier les modèles.
Nous fournissons les formats d'exclusion globaux suivants par défaut:
Cette expression régulière exclut les métadonnées de Git, SVN, Mercurial, les fichiers de projet d'Eclipse et d'IntelliJ, les fichiers OS X DS_Store et Trash, ainsi que quelques autres éléments à ignorer, comme le cache de Sass. L'intégralité de son dossier, y compris ses enfants, est exclue de l'UI et ne s'affiche pas lors de la recherche de fichiers.
Listes d'ignorement spécifiques à un espace de travail
Pour être plus précis, vous pouvez également choisir d'exclure des fichiers et des dossiers de votre espace de travail spécifique afin de réduire le nombre de résultats de recherche. Les dossiers exclus ne s'affichent pas non plus dans le répertoire des sources.
Pour exclure un dossier entier de votre espace de travail, effectuez un clic droit sur le dossier dans le panneau "Sources" de gauche, puis sélectionnez Exclure le dossier. Pour afficher les mappages et les dossiers exclus d'un dossier d'espace de travail donné:
- Ouvrez les paramètres des outils pour les développeurs.
- Cliquez sur Espace de travail.
- Sélectionnez le dossier qui vous intéresse.
- Cliquez sur Modifier. La fenêtre "Modifier le système de fichiers" s'affiche. Vous pouvez y ajouter ou supprimer des mappages et/ou des dossiers exclus.
