Les outils pour les développeurs Chrome évoluent rapidement. Nous souhaitons attirer votre attention sur de nouvelles fonctionnalités et améliorations que nous avons apportées à quelques-uns d'entre eux. Nous allons tout d'abord parler de certaines modifications de l'interface utilisateur, du profilage JS haute résolution et des nouvelles fonctionnalités Workspace.
- Le profilage haute résolution atteint désormais une précision de 0,1 milliseconde
- Les barres d'outils se sont hissées en haut des outils de développement et ont été déplacées dans le panneau de la console
- Ajout de fonctionnalités aux espaces de travail pour permettre l'ajout, la suppression et la recherche de 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é cet été un graphique de type "flamme", qui représente visuellement le traitement JavaScript d'une page au fil du temps. Elle permet d'afficher facilement l'étendue de la pile d'appel ainsi que le temps nécessaire au traitement de chaque fonction.
Jusqu'à récemment, les représentations traditionnelles de charges lourdes (de bas en haut) et d'arborescence (de haut en bas) ainsi que le graphique de type "flamme" n'affichaient les processus qu'avec une précision inférieure à une milliseconde. Pour la plupart des applications, ce n'est pas un problème. Toutefois, si vous travaillez sur un projet pour lequel la vitesse est vraiment importante dans l'interface utilisateur, comme un jeu, une résolution d'une milliseconde peut être trop grosse pour obtenir des résultats significatifs en raison de la lenteur de votre site ou de l'interface utilisateur lente. Pour activer le profilage haute résolution (actuellement Canary uniquement):
- Ouvrez les paramètres des outils de développement.
- Dans l'onglet General (Général), sous Profiler (Profileur), activez High Résolution CPU Profiling (Profilage de processeur haute résolution).
Voici un exemple de graphique de flammes utilisé en profilage normal et en haute résolution, où nous profilons la page d'accueil HTML5Rocks.com:
Avec une résolution de profilage normale, la durée de traitement est toujours arrondie à la milliseconde suivante. Un processus qui ne prend que 0, 1 milliseconde ou moins est donc toujours signalé comme ne prend que 1 milliseconde, et d'autres processus peuvent ne pas s'afficher du tout dans la pile d'appel.
Le profilage haute résolution entraîne une surcharge importante de la VM JavaScript. C'est pourquoi il est désactivé par défaut. Bien qu'elle semble plus froide que la résolution de profilage normale, nous vous recommandons de ne l'utiliser que si vous avez vraiment besoin de la précision.
Améliorations apportées à l'interface utilisateur des outils de développement
Bien qu'il y ait toujours de nouvelles choses en cours de déploiement dans Canary, nous voulions attirer votre attention sur quelques changements majeurs de l'interface utilisateur: les boutons s'affichant en haut de l'UI en général, les panneaux d'informations et de navigation de la timeline, et le déplacement des forçages dans le panneau de la console.
Tout d'abord, voyons d'où nous venons. Comme nous parlons de "Timeline", je vais essayer de tuer les deux premiers oiseaux avec une seule paire de captures d'écran. Voici à quoi ressemble actuellement Vos trajets dans Chrome (stable) :
Et voici à quoi ressemble maintenant "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 composants Timeline spécifiques à gauche et les outils de développement généraux à droite.
- La structure d'imbrication des enregistrements de la timeline s'affiche désormais dans le panneau de gauche. Vous pouvez même les faire défiler à l'aide du clavier. Outre le défilement vers le haut et vers le bas, vous pouvez utiliser les touches fléchées gauche et droite pour ouvrir et fermer des enregistrements imbriqués.
- Les détails de l'heure s'affichent désormais dans un panneau à droite de l'entrée sélectionnée. Vous pouvez également pointer sur d'autres entrées pour obtenir les informations les concernant.
Jetons maintenant un coup d'œil au panneau de la console. Pour ouvrir le panneau de la console, appuyez sur Échap dans les outils de développement ou sur le bouton du panneau de la console 
. Le panneau s'affiche alors à partir du bas.
Les onglets Console et Recherche s'affichent par défaut. Pour accéder à la fonctionnalité anciennement appelée "remplacement", ouvrez les paramètres des outils de développement et cochez la case "Afficher la vue "Émulation" dans le panneau de la console. Fermez la boîte de dialogue des paramètres. Un onglet Émulation s'affiche dans le panneau de la console, comme illustré dans la capture d'écran suivante:
qui permet d'effectuer toute l'émulation.
Cette modification s'explique par le fait qu'auparavant, vous deviez accéder aux paramètres, puis les quitter pour modifier vos remplacements d'émulation, puis revenir en arrière et afficher votre page. Vous pouvez maintenant modifier vos remplacements d'émulation tout en manipulant les styles.
Espaces de travail améliorés
Workspaces est une fonctionnalité qui simplifie considérablement votre workflow de création, mais elle n'est pas aussi appréciée qu'elle le mérite. Avec les espaces de travail, au lieu d'expérimenter et d'apporter des modifications dans les outils de développement et de devoir copier et coller vos modifications dans vos fichiers sources, vous pouvez effectuer vos modifications dans les outils de développement, 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 sur les révolutions des outils pour les développeurs Chrome 2013, n'hésitez pas à le consulter, puis revenez sur cette page pour découvrir les améliorations que nous avons apportées à ces fonctionnalités au cours des derniers mois.
Ajouter des fichiers plus facilement
À l'époque de l'article sur Révolutions 2013, la création d'un espace de travail nécessitait d'ajouter le dossier à vos espaces de travail, puis de mapper le dossier à une ressource réseau. Nous avons simplifié ce processus en une seule étape: il vous suffit de faire un clic droit dans le panneau de gauche de la section "Sources", puis de sélectionner Ajouter un dossier à l'espace de travail. La boîte de dialogue qui s'ouvre vous permet de choisir un nouveau dossier à ajouter à vos espaces de travail. (Le dossier actuellement en surbrillance n'est pas ajouté à vos espaces de travail.)
Création et suppression de fichiers
Vous pouvez désormais ajouter des fichiers au répertoire local que vous utilisez pour les espaces de travail directement dans les espaces de travail. Effectuez un clic droit sur un dossier dans le panneau "Sources" à gauche, puis sélectionnez New File (Nouveau fichier).
Vous pouvez également supprimer des fichiers depuis les espaces de travail. Effectuez un clic droit sur un fichier dans le panneau des sources à gauche, puis sélectionnez Delete File (Supprimer le fichier).
Vous pouvez également dupliquer un fichier en sélectionnant Dupliquer le fichier.
Actualiser
Maintenant que vous pouvez créer (ou supprimer des fichiers) directement dans les espaces de travail, le répertoire Sources s'actualise 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 Refresh (Actualiser) dans le menu contextuel pour forcer l'actualisation.
Cela peut également s'avérer utile si vous modifiez vos fichiers, que vous les ouvrez dans un autre éditeur et que vous souhaitez que ces modifications apparaissent dans les outils de développement.
Rechercher dans tous les fichiers
Nous avons légèrement 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 et dans tous les fichiers chargés dans les outils de développement. Vous pouvez rechercher une chaîne ou une expression régulière. Nous établissons une correspondance avec chaque occurrence de chaque fichier ou page. Pour effectuer une recherche dans plusieurs fichiers dans les espaces de travail (actuellement en Canary):
- Ouvrez le panneau de la console en appuyant sur la touche Échap, puis cliquez sur l'onglet Rechercher à 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 ne doit pas être sensible à la casse, cochez la case correspondante.
Listes d'éléments à ignorer
Rechercher dans le texte de fichiers ou filtrer par nom de fichier peut s'avérer très fastidieux si de nombreux fichiers .git ou README.md encombrent vos résultats.
C'est pourquoi nous avons ajouté une fonctionnalité de liste d'éléments à ignorer dans les espaces de travail afin que vous puissiez exclure certains types de fichiers ou de dossiers lorsque vous consultez votre espace de travail ou que vous y effectuez des recherches.
Pour afficher et modifier la liste d'éléments à ignorer actuellement partagée dans les espaces de travail:
- Ouvrez les paramètres des outils de développement.
- Cliquez sur Espace de travail.
- Sous Common, vous pouvez afficher et/ou modifier les formats dans la zone Dossier d'exclusion de format.
Nous fournissons les modèles d'exclusion globaux par défaut suivants:
Cette expression régulière exclut les métadonnées de Git, SVN et Mercurial, les fichiers de projet Eclipse et IntelliJ, les fichiers OS X DS_Store et "Corbeille", ainsi que quelques autres éléments pouvant être ignorés, comme le cache de Sass. Leur dossier complet, y compris les enfants, est exclu de l'interface utilisateur afin de ne pas s'afficher dans l'interface utilisateur ni lors d'une recherche dans les fichiers.
Listes d'exclusion spécifiques à l'espace de travail
Pour être plus précis, vous pouvez également choisir d'exclure des fichiers et des dossiers dans votre espace de travail afin de réduire l'encombrement des recherches. Les dossiers exclus n'apparaissent pas non plus dans le répertoire source.
Pour exclure un dossier entier de votre espace de travail, effectuez un clic droit dessus dans le panneau "Sources" de gauche, puis sélectionnez Exclure le dossier. Pour afficher les mappages et les dossiers exclus pour un dossier d'espace de travail donné:
- Ouvrez les paramètres des outils de développement.
- 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. Elle vous permet d'ajouter ou de supprimer des mappages et/ou des dossiers exclus.
