Nouveautés des outils de développement (Chrome 63)

Kayce Basques

Bienvenue ! Les nouvelles fonctionnalités suivantes seront disponibles dans les outils de développement dans Chrome 63:

Lisez la suite ou regardez la vidéo ci-dessous pour en savoir plus.

Prise en charge du débogage à distance multicompte

Si vous avez déjà essayé de déboguer une application à partir d'un IDE comme VS Code ou WebStorm, vous avez probablement nous avons constaté que l'ouverture des outils de développement entraînait une dysfonctionnement de votre session de débogage. Ce problème rendait également utiliser les outils de développement pour déboguer les tests WebDriver ;

À partir de Chrome 63, les outils de développement sont compatibles par défaut avec plusieurs clients de débogage distant. configuration requise.

Le débogage à distance multiclient était le problème numéro 1 des outils de développement le plus populaire sur crbug.com. pour l'ensemble du projet Chromium. Le support multicompte permet également des opportunités intéressantes d'intégrer d'autres outils aux outils de développement ou de les utiliser dans de nouvelles de différentes manières. Exemple :

  • Les clients de protocole tels que ChromeDriver ou les extensions de débogage Chrome pour VS Code et Webstorm, et les clients WebSocket tels que Puppeteer, peuvent désormais s'exécuter en même temps que les outils de développement.
  • Deux clients de protocole WebSocket distincts, tels que Puppeteer ou chrome-remote-interface peuvent désormais se connecter simultanément au même onglet.
  • Les extensions Chrome utilisant l'API chrome.debugger peuvent désormais s'exécuter en même temps que les outils de développement.
  • Plusieurs extensions Chrome peuvent désormais utiliser l'API chrome.debugger dans le même onglet simultanément.

Espaces de travail 2.0

Les espaces de travail existent depuis un certain temps dans les outils de développement. Cette fonctionnalité vous permet d'utiliser les outils de développement votre IDE. Lorsque vous apportez des modifications à votre code source dans les outils de développement, celles-ci sont appliquées la version locale de votre projet sur votre système de fichiers.

Workspace 2.0 s'appuie sur la version 1.0 pour offrir une expérience utilisateur plus utile et améliorer le mappage automatique des transpilations. du code source. Le lancement de cette fonctionnalité était initialement prévu peu après le Chrome Developer Summit (CDS) 2016, mais l'équipe l'a reportée afin de régler certains problèmes.

Consultez la section "Création" partie (vers 14h28) de la présentation sur les outils de développement de la conférence CDS 2016 pour découvrir les espaces de travail 2.0 en action.

Quatre nouveaux audits

Dans Chrome 63, le panneau Audits comporte quatre nouveaux audits:

  • Diffuser des images au format WebP
  • Utilisez des images au format approprié.
  • Évitez les bibliothèques JavaScript d'interface présentant des failles de sécurité connues.
  • Les erreurs liées au navigateur ont été consignées dans la console.

Consultez Exécuter Lighthouse dans les outils pour les développeurs Chrome pour découvrir comment utiliser le panneau Audits afin d'améliorer la qualité de vos pages.

Consultez Lighthouse pour en savoir plus sur le projet qui alimente le panneau Audits.

Simuler des notifications push avec des données personnalisées

La simulation de notifications push existe depuis un certain temps dans les outils de développement, avec une limite : n'a pas pu envoyer de données personnalisées. En revanche, la nouvelle zone de texte Push va être intégrée au volet Service worker. dans Chrome 63, c'est désormais possible. Essayez maintenant :

  1. Accédez à la page Démonstration du mode Push simple.
  2. Cliquez sur Activer les notifications push.
  3. Cliquez sur Autoriser lorsque Chrome vous invite à autoriser les notifications.
  4. Ouvrez les outils de développement.
  5. Accédez au volet Service workers.

  6. Saisissez votre texte dans la zone de texte Envoyer.

    Simuler une notification push avec des données personnalisées

    Figure 1 : Simuler une notification push avec des données personnalisées via la zone de texte Push du Volet Service worker

  7. Cliquez sur Push pour envoyer la notification.

    Notification push simulée

    Figure 2 : Notification push simulée

Déclencher des événements de synchronisation en arrière-plan à l'aide de tags personnalisés

Le déclenchement d'événements de synchronisation en arrière-plan figure également dans le volet Service workers depuis un certain temps, mais vous pouvez envoyer des tags personnalisés:

  1. Ouvrez les outils de développement.
  2. Accédez au volet Service workers.
  3. Saisissez du texte dans la zone de texte Sync (Synchroniser).
  4. Cliquez sur Synchroniser.

Déclencher un événement de synchronisation en arrière-plan personnalisé

Figure 3. Après avoir cliqué sur Sync (Synchroniser), les outils de développement envoient un événement de synchronisation en arrière-plan avec le tag personnalisé. update-content au service worker

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

  • Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème dans les outils de développement.
  • Tweetez à l'adresse @ChromeDevTools.
  • Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement