Actualités DevTools, les plus récentes
La première actualité de cet article est un peu méta : il s'agit de cette mise à jour elle-même. De temps en temps, mais au moins une fois par mois, je vais résumer les dernières actualités du monde des outils de développement Chrome.
Et quand je dis "fraîches", je le pense: je vais parler des nouvelles fonctionnalités qui viennent d'arriver dans Chrome Canary. Si vous préférez rester sur une version stable, ce n'est pas un problème. Toutefois, si vous êtes aventureux et que vous souhaitez rester à la pointe, ces posts sont faits pour vous. En plus des dernières fonctionnalités et corrections de bugs, vous trouverez une section Bateau-pilote de la communauté à la fin de chaque post, qui met en avant les contributions les plus intéressantes de nos utilisateurs.
Passons sans plus attendre à l'actualité.
Nouveautés dans les outils de développement
Capture d'écran en mode pellicule dans "Réseau" et "Historique"
Il y a à peine une semaine, nous avons sorti de la phase de test une nouvelle fonctionnalité importante : la possibilité de prendre des captures d'écran de la page dans les onglets "Réseau" et "Chronologie".
Dans le panneau "Network" (Réseau), cliquez sur la petite icône d'appareil photo pour activer la capture de frames, puis actualisez la page pour déclencher la capture. Hormis les captures d'écran prises avec d'autres outils tels que WebPageTest, nous n'affichons actuellement que les cadres provenant d'une peinture.
Si vous double-cliquez sur l'un des cadres, une vue agrandie s'affiche (vous pouvez ensuite utiliser les flèches gauche/droite pour naviguer). Si vous pointez dessus, des lignes s'affichent dans le panneau et la chronologie pour visualiser exactement quand le cadre a été capturé, ce qui vous permet de le mettre en corrélation avec la séquence de chargement. Cela facilite le débogage des problèmes de chargement courants tels que les polices Web bloquant le rendu.
Dans le panneau "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" (Réseau) : dans ce cas, nous essayons de capturer aussi souvent que possible, quelle que soit la peinture réelle, afin de pouvoir placer ces captures d'écran sur une échelle temporelle linéaire qui correspond aux autres lignes de Timeline. Au lieu de devoir double-cliquer pour afficher un aperçu, des cadres agrandis s'affichent lorsque vous pointez dessus.
Comme les deux ne sont pas tout à fait synchronisés en termes de fonctionnalités et d'expérience utilisateur, nous vous invitons à tester la ou les fonctionnalités et à nous faire part de vos commentaires en envoyant des demandes sur crbug.com/new ou en tweetant à @ChromeDevTools.
Limitation de la bande passante dans le panneau "Network" (Réseau)
La limitation du débit réseau, une fonctionnalité que nous avons ajoutée lors du lancement de notre mode Appareil, a trouvé sa deuxième maison dans la barre d'outils du panneau "Réseau" afin que vous puissiez vous concentrer sur les optimisations réseau en un seul et même endroit.
Cette nouvelle page d'accueil n'est qu'un miroir: elle est toujours disponible en dehors du mode Appareil, car la simulation d'une mauvaise connectivité est toujours très importante lorsque vous travaillez à rendre votre site responsif.
Enfin, faites-vous partie de ces pauvres âmes qui se sont demandé pourquoi leur connexion Internet était interrompue après une longue journée de travail, pour découvrir qu'ils avaient oublié de désactiver le débit limité du réseau ? L'onglet du panneau "Réseau" affiche désormais une icône d'avertissement lorsque la limitation de bande passante réseau est activée.
Divers éléments
- Vous détestiez ces cercles bizarres sur la timeline du réseau ? Nous aussi. Il s'agit des moments où un frame (dans la nouvelle pellicule) a été capturé. Désormais, elles s'affichent sous forme de lignes lorsque vous passez la souris dessus.
- Le mode Appareil conserve désormais l'orientation lorsque vous passez d'un appareil à un autre.
Heartbeat de la communauté
Travailler en profondeur avec les outils pour les développeurs Chrome
Bret Little a publié ce petit cours de présentation qui vous familiarise avec les fonctionnalités de base de DevTools, mais qui propose également de nombreux conseils et astuces détaillés. Il s'agit d'informations très utiles, et plus de documentation sur DevTools ne peut pas faire de mal.
Un IDE DevTools...?!
Kenneth Auchenberg, développeur Web et passionné par les outils pour les développeurs, a développé une application DevTools autonome de preuve de concept il y a quelques mois. Son article de blog a fait les actualités (des pirates informatiques) cette semaine.
Transformer DevTools en IDE complet est une idée amusante, que de nombreux membres de notre équipe ont déjà rêvée, mais ce serait aussi un projet aux proportions épiques.
Qu'en pensez-vous ? L'IDE DevTools est-il un rêve ou pouvez-vous le voir fonctionner ? À quoi doit-il ressembler ? N'hésitez pas à nous en faire part dans les commentaires !
À bientôt !
Paul Bakaus et l'équipe DevTools