Google I/O 2016 est terminé. Les outils de développement ont été très présents lors de l'événement I/O, avec une conférence de Paul Bakaus, Paul Irish et Seth Thompson sur l'avenir des outils de développement. Regardez la vidéo ci-dessous ou lisez la suite pour en savoir plus sur l'évolution de DevTools en 2016 et au-delà.
Création
DevTools vise à faciliter chaque étape du cycle de vie du développement Web. Vous savez probablement que les outils pour les développeurs peuvent vous aider à déboguer ou à profiler un site Web, mais vous ne savez peut-être pas comment les utiliser pour vous aider à créer un site. Le terme "création" désigne l'acte de créer un site. L'un des objectifs à court terme est de vous permettre d'itérer, de tester et d'émuler plus facilement votre site sur plusieurs appareils.
Mode de l'appareil
L'équipe DevTools continue d'itérer sur l'expérience du mode appareil, qui a connu sa première mise à niveau majeure dans Chrome 49. Consultez le post de mars (Un nouveau mode Appareil pour un monde mobile first) pour en savoir plus sur les nouveautés. L'objectif global est de fournir un workflow fluide pour afficher et émuler votre site sur tous les facteurs de forme.
Voici un bref récapitulatif des mises à jour apportées au mode Appareil dans Canary depuis la publication de l'article en mars.
Lorsque vous affichez une page sur un appareil spécifique, vous pouvez vous immerger davantage dans l'expérience en affichant le matériel de l'appareil autour de votre page.
Le menu d'orientation de l'appareil vous permet d'afficher votre page lorsque différents éléments de l'interface utilisateur du système, tels que la barre de navigation et le clavier, sont actifs.
L'expérience sur ordinateur a également été améliorée. Grâce à la fonctionnalité de zoom du mode Appareil, vous pouvez émuler des écrans d'ordinateur plus grands que celui sur lequel vous travaillez, comme un écran 4K (3 840 x 2 160 pixels).
Vous pouvez limiter le débit du réseau directement depuis l'interface utilisateur du mode Appareil, sans avoir à passer au panneau "Réseau".
Différences de sources
Lorsque vous itérez sur le style d'un site, il est facile de perdre le fil de vos modifications. Pour résoudre ce problème, DevTools utilise des repères visuels dans la marge de numéro de ligne du panneau "Sources" pour vous aider à suivre vos modifications. Les lignes supprimées sont indiquées par une ligne rouge, les lignes modifiées sont mises en surbrillance en violet, et les nouvelles lignes sont mises en surbrillance en vert.
Vous pourrez également suivre vos modifications dans le nouvel onglet du panneau "Source rapide" :
Pour la première fois, l'onglet "Source rapide" vous permet de vous concentrer sur votre code source HTML ou JavaScript en même temps que sur vos règles CSS. De plus, lorsque vous cliquez sur une propriété CSS dans le volet "Styles", l'onglet "Source rapide" saute automatiquement vers la définition dans la source et la met en surbrillance.
Activez le test de la différence entre les sources dans Chrome Canary pour l'essayer dès aujourd'hui.
Édition Sass en temps réel
Voici un aperçu de certaines des principales améliorations à venir du workflow d'édition Sass. Ces fonctionnalités sont encore au tout début de la phase expérimentale. Nous vous recontacterons dans un prochain post lorsque vous pourrez les essayer.
En gros, DevTools vous permettra d'afficher et de modifier les variables Sass comme vous l'avez toujours souhaité. Cliquez sur une valeur compilée à partir d'une variable Sass. Le nouvel onglet "Sources rapides" vous permet alors d'accéder à la définition de la variable.
Lorsque vous modifiez une valeur compilée à partir d'une variable Sass, votre modification met à jour la variable Sass, et non seulement la propriété individuelle que vous avez sélectionnée.
Progressive web apps
Consultez la liste des conférences sur le Web et Chrome lors de la Google I/O 2016. Vous constaterez qu'un thème majeur émerge dans le monde du développement Web: les progressive web apps.
À mesure que le modèle de progressive web app se développe, les outils pour les développeurs évoluent rapidement pour fournir les outils dont ils ont besoin pour créer des applications Web progressives de qualité. Nous avons constaté que la création et le débogage de ces applications modernes comportaient souvent des exigences uniques. DevTools a donc consacré un panneau entier au développement d'applications Web progressives. Ouvrez Chrome Canary. Vous constaterez que le panneau "Ressources" a été remplacé par le panneau "Application". Toutes les fonctionnalités précédentes du panneau "Ressources" sont toujours disponibles. Seuls quelques nouveaux volets sont conçus spécifiquement pour le développement de progressive web apps:
Le volet "Fichier manifeste" vous offre une représentation visuelle du fichier manifeste de l'application. Vous pouvez alors déclencher manuellement le workflow "Ajouter à l'écran d'accueil".
Le volet "Service workers" vous permet d'inspecter et d'interagir avec le service worker enregistré pour la page actuelle.
Le volet "Effacer l'espace de stockage" vous permet d'effacer toutes sortes de données afin de voir une page vierge.
JavaScript
La frontière entre le front-end et le backend est une partie difficile du développement Web full stack. Si vous découvrez que votre backend renvoie un code d'état 500 lors du débogage d'une application Web, vous avez atteint la limite d'utilité de DevTools. Vous devez alors changer de contexte et démarrer votre environnement de développement backend pour déboguer le problème.
Toutefois, avec les backends écrits en Node.js, les limites entre le frontend et le backend commencent à s'estomper. Étant donné que Node.js s'exécute sur le moteur JavaScript V8 (le même moteur qui alimente Google Chrome), nous souhaitions permettre le débogage de Node.js à partir de DevTools. Grâce aux équipes V8, DevTools et Google Cloud Platform pour Node.js, vous pouvez désormais utiliser toutes les puissantes fonctionnalités de débogage de DevTools pour inspecter une application Node.js. Cette fonctionnalité a déjà atteint les builds nocturnes de Node.js, bien que l'intégration de DevTools soit encore en cours d'amélioration avant d'être incluse dans une version majeure. Le débogage de votre application Node.js à partir des outils pour les développeurs sera un jour aussi simple que de transmettre node --inspect app.js et de se connecter à partir des outils pour les développeurs dans n'importe quelle fenêtre Chrome.
Bien que les outils existants tels que Node Inspector offrent des expériences de débogage basées sur une IUG, la nouvelle intégration des outils pour les développeurs Node.js restera à jour avec les dernières fonctionnalités de débogage des outils pour les développeurs, telles que le débogage de la pile asynchrone, le masquage et la compatibilité avec ES6.