La conférence Google I/O 2016 s'achève. Les outils de développement ont été très présents lors de la conférence I/O. Ils y ont notamment participé à 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'avenir des outils de développement en 2016 et au-delà.
Création
Les outils de développement visent à faciliter chaque étape du cycle de développement Web. Vous savez probablement que les outils de développement peuvent vous aider à déboguer ou à profiler un site Web, mais vous ne savez peut-être pas comment les utiliser pour créer un site. Le terme "création" désigne le fait de créer un site. L'un des objectifs à venir est de faciliter l'itération, le test et l'émulation de votre site sur plusieurs appareils.
Mode de l'appareil
L'équipe des outils de développement continue de perfectionner l'expérience du mode Appareil, qui a reçu sa première mise à niveau majeure dans Chrome 49. Lisez l'article du mois de mars (Un nouveau mode Appareil pour un monde axé sur les mobiles) pour avoir un aperçu des nouveautés. L'objectif principal est d'offrir un flux de travail fluide permettant d'afficher et d'émuler votre site sur tous les facteurs de forme.
Voici un bref résumé de certaines mises à jour du mode Appareil disponibles dans Canary depuis la publication de cet article en mars.
Lorsque vous consultez une page en tant qu'appareil spécifique, vous pouvez vous immerger davantage dans l'expérience en montrant les composants matériels 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.
La story pour ordinateur a également été améliorée. Grâce à la fonctionnalité de zoom du mode Appareil, vous pouvez émuler des écrans d'ordinateur de bureau plus grands que l'écran sur lequel vous travaillez, comme un écran 4K (3 840 x 2 160 pixels).
Vous pouvez limiter le réseau directement depuis l'interface utilisateur du mode Appareil, au lieu de basculer vers le panneau "Réseau".
Différences entre les sources
Lorsque vous itérez le style d'un site, vous pouvez facilement perdre de vue les modifications. Pour résoudre ce problème, les outils de développement vont utiliser des repères visuels dans la marge du numéro de ligne du panneau "Sources" pour vous aider à suivre vos modifications. Les lignes supprimées sont signalées par une ligne rouge, les lignes modifiées en violet et les nouvelles lignes surlignées 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 vos règles CSS. De plus, lorsque vous cliquez sur une propriété CSS dans le volet "Styles", l'onglet "Source rapide" accède automatiquement à la définition et la met en surbrillance dans la source.
Activez l'expérience sur les diff. sources dans Chrome Canary pour l'essayer dès aujourd'hui.
Montage Live Sass
Voici un aperçu des améliorations majeures à venir apportées au workflow de montage Sass. Ces fonctionnalités n'en sont qu'au début de la phase de test. Nous vous recontacterons dans un post lorsque vous pourrez les essayer.
En gros, les outils de développement vont vous permettre d'afficher et de modifier les variables Sass comme vous l'avez toujours espéré. Cliquez sur une valeur compilée à partir d'une variable Sass. Le nouvel onglet "Quick Sources" (Sources rapides) vous redirige vers 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 pas seulement la propriété individuelle que vous avez sélectionnée.
Progressive web apps
Si vous consultez la liste des discussions sur le Web et Chrome lors de la conférence Google I/O 2016, vous constaterez qu'un thème important émerge dans le monde du développement Web: les progressive web apps.
Avec l'émergence du modèle des progressive web apps, les outils de développement évoluent rapidement afin de fournir aux développeurs les outils dont ils ont besoin pour créer d'excellentes progressive web apps. Nous avons réalisé que la création et le débogage de ces applications modernes s'accompagnent souvent d'exigences uniques. C'est pourquoi les outils de développement ont consacré un panel entier au développement de progressive web apps. Ouvrez Chrome Canary. Vous verrez que le panneau "Ressources" a été remplacé par le panneau "Application". Toutes les fonctionnalités précédentes du panneau "Ressources" sont toujours présentes. Il existe quelques nouveaux volets spécialement conçus pour le développement de progressive web apps:
Le volet "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 le service worker enregistré pour la page actuelle et d'interagir avec celui-ci.
Enfin, le volet "Vider l'espace de stockage" vous permet d'effacer toutes sortes de données afin d'afficher une page propre.
JavaScript
Traverser la frontière entre l'interface 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, cela signifie que vous avez atteint la limite d'utilité des outils de développement. Vous devez donc modifier les contextes et lancer votre environnement de développement backend pour déboguer le problème.
Toutefois, avec les backends écrits en Node.js, les limites entre l'interface et le backend commencent à s'estomper. Comme Node.js s'exécute sur le moteur JavaScript V8 (le même moteur que Google Chrome), nous voulions qu'il soit possible de déboguer Node.js à partir des outils de développement. 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 des outils de développement pour introduire une application Node.js. Cette fonctionnalité est déjà disponible dans les builds nocturnes de Node.js, bien que l'intégration des outils de développement soit encore en cours d'amélioration avant d'être intégrée dans une version majeure. Un jour, pour déboguer votre application Node.js à partir des outils de développement, il vous suffira de transmettre node --inspect app.js et de vous connecter depuis les outils de développement dans n'importe quelle fenêtre Chrome.
Bien que des outils existants comme Node Inspector offrent des expériences de débogage basées sur l'IUG, la nouvelle intégration des outils pour les développeurs Node.js restera à jour avec les dernières fonctionnalités de débogage de ces outils, telles que le débogage de pile asynchrone, le Blackboxing et la compatibilité avec ES6.