DevTools Digest : pellicule et nouvel espace pour la limitation

Paul Bakaus
Paul Bakaus

Actualités sur les outils de développement, aussi récentes que possible

Le premier article de cet article est un peu trop méta. Il s'agit ici de la mise à jour elle-même ! De temps en temps, mais au moins une fois par mois, je vais vous parler de ce qui se passe dans l'univers des outils pour les développeurs Chrome, à tout moment.

Quand je parle de nouveauté, je parle des nouvelles fonctionnalités qui viennent d'arriver dans Chrome Canary. Si vous préférez rester en phase stable, vous êtes également très bienvenu. Mais si vous êtes aventureux et souhaitez rester au courant, ces posts sont faits pour vous. En plus des dernières fonctionnalités et corrections de bugs, vous trouverez à la fin de chaque post une section Cœurs de la communauté pour mettre en avant vos meilleurs contributeurs.

Sans plus tarder, étudions l'actualité.


Nouveautés des outils de développement

Captures d'écran de type "bande de film" dans "Réseau" et "Vos trajets"

Il y a tout juste une semaine, nous avons retiré vos tests d'une nouvelle fonctionnalité importante : la possibilité de faire des captures d'écran de la page à la fois dans les onglets "Réseau" et "Chronologie".

Dans le panneau "Network" (Réseau), cliquez sur la petite icône en forme de caméra pour activer la capture de frames, puis actualisez la page pour déclencher la capture. À l'exception des captures d'écran capturées avec d'autres outils tels que WebPageTest, nous n'affichons actuellement que les images issues d'une peinture.

Si vous double-cliquez sur l'un des cadres pour afficher une vue agrandie (puis utilisez les flèches gauche/droite pour naviguer), vous pouvez pointer dessus pour afficher des lignes à travers le panneau et la chronologie pour visualiser exactement le moment où l'image a été capturée. Vous pouvez ainsi établir une corrélation avec la séquence de chargement. Cela simplifie considérablement le débogage des problèmes de chargement courants, tels que les polices Web qui bloquent le rendu.

Dans le panneau de chronologie, vous pouvez activer la capture d'écran en cochant la case "Captures d'écran" dans la barre d'outils supérieure. Les choses fonctionnent un peu différemment ici par rapport au panneau "Network" : dans ce cas, nous essayons de capturer aussi souvent que possible, quels que soient les peintures réelles, afin de pouvoir déposer les captures d'écran sur une échelle de temps linéaire en corrélation avec les autres lignes de la chronologie. Au lieu d'avoir à double-cliquer dessus pour afficher un aperçu, les images agrandies s'affichent lorsque l'utilisateur passe la souris dessus.

Ces deux fonctionnalités étant un peu différentes en termes de fonctionnalités et d'expérience utilisateur, nous vous invitons à les essayer et à nous faire part de vos commentaires par le biais de tickets sur crbug.com/new ou d'un tweet à l'adresse @ChromeDevTools.

Limitation du réseau dans le panneau "Réseau"

La limitation du réseau, une fonctionnalité que nous avons ajoutée lors du lancement du mode Appareil, a été ajoutée à l'étape suivante dans la barre d'outils du panneau "Réseau". Vous pouvez ainsi vous concentrer sur les optimisations réseau depuis un seul et même endroit.

Limitation du réseau en action

Cette nouvelle maison n'est qu'un miroir: elle est toujours disponible en mode Appareil, et il est toujours très important de simuler une mauvaise connectivité pour rendre votre site responsif.

Enfin, faites-vous partie de ces pauvres personnes qui vous ont demandé pourquoi votre connexion Internet n'était plus fonctionnelle après une longue journée de travail, et qui ont découvert que vous aviez oublié de désactiver la limitation de bande passante ? L'onglet du panneau "Network" affiche désormais une icône d'avertissement lorsque la limitation de bande passante est activée.

Infos diverses


Pulsation de la communauté

Logiciel de mise à jour avec les outils pour les développeurs Chrome

Limitation du réseau en action

Bret Little a publié ce petit cours de présentation qui vous présente les fonctionnalités de base des outils de développement, mais qui propose également de nombreux conseils et astuces détaillés. Des informations vraiment utiles, et plus de documents sur les outils de développement,

Un IDE d'outils de développement...?!

Kenneth Auchenberg, développeur Web et passionné d'outils de développement, a développé une application autonome de démonstration de faisabilité pour les outils pour les développeurs il y a quelques mois. Son article de blog a de nouveau fait l'actualité cette semaine.

Transformer les outils de développement en IDE complet est une idée amusante, dont de nombreux membres de notre équipe avaient déjà rêvé, mais ce serait aussi un projet aux proportions incroyables.


Qu'en pensez-vous ? L'IDE DevTools est-il une fonctionnalité fictive ou imaginez-vous qu'il fonctionne correctement ? À quoi doit-il ressembler ? N'hésitez pas à nous en faire part dans les commentaires !

À bientôt !
Paul Bakaus et l'équipe DevTools