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

Kayce Basques

Bienvenue ! Voici les nouvelles fonctionnalités qui seront disponibles dans les outils pour les développeurs de Chrome 63:

Pour en savoir plus, lisez la suite ou regardez la vidéo ci-dessous.

Prise en charge du débogage à distance multi-client

Si vous avez déjà essayé de déboguer une application à partir d'un IDE tel que VS Code ou WebStorm, vous avez probablement découvert que l'ouverture de DevTools perturbe votre session de débogage. Ce problème empêchait également d'utiliser les outils de développement pour déboguer les tests WebDriver.

À partir de Chrome 63, les outils pour les développeurs sont désormais compatibles avec plusieurs clients de débogage à distance par défaut, sans configuration requise.

Le débogage à distance multi-client était le problème DevTools le plus populaire sur crbug.com et le troisième dans l'ensemble du projet Chromium. La prise en charge multi-client ouvre également de nombreuses possibilités intéressantes pour intégrer d'autres outils aux outils pour les développeurs ou pour les utiliser de nouvelles manières. Exemple :

  • Les clients de protocole tels que ChromeDriver ou les extensions de débogage Chrome pour VS Code et Webstorm, ainsi que les clients WebSocket tels que Puppeteer, peuvent désormais s'exécuter en même temps que les outils pour les développeurs.
  • 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 qui utilisent l'API chrome.debugger peuvent désormais s'exécuter en même temps que DevTools.
  • Plusieurs extensions Chrome différentes peuvent désormais utiliser l'API chrome.debugger dans le même onglet simultanément.

Workspaces 2.0

Les espaces de travail existent depuis un certain temps dans DevTools. Cette fonctionnalité vous permet d'utiliser DevTools comme IDE. Vous apportez des modifications à votre code source dans DevTools, et les modifications persistent dans la version locale de votre projet sur votre système de fichiers.

Workspaces 2.0 s'appuie sur la version 1.0, en ajoutant une expérience utilisateur plus utile et en améliorant le mappage automatique du code transpilé. Cette fonctionnalité devait initialement être publiée peu de temps après le Chrome Developer Summit (CDS) 2016, mais l'équipe l'a reportée pour résoudre certains problèmes.

Pour voir Workspaces 2.0 en action, consultez la partie "Authoring" (environ 14:28) de la présentation DevTools de CDS 2016.

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 frontales présentant des failles de sécurité connues.
  • Les erreurs de navigateur sont enregistrées dans la console.

Consultez Exécuter Lighthouse dans Chrome DevTools 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 DevTools, avec une seule limite: vous ne pouviez pas envoyer de données personnalisées. Mais avec la nouvelle zone de texte Push qui apparaît dans le volet Service Worker de Chrome 63, vous pouvez désormais le faire. Essayez maintenant :

  1. Accédez à Simple Push Demo (Démonstration simple de la méthode push).
  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 (Service workers).

  6. Saisissez du texte dans la zone de texte Push.

    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 dans le 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 avec des balises personnalisées

Le déclenchement d'événements de synchronisation en arrière-plan est également disponible dans le volet Service Workers depuis un certain temps, mais vous pouvez désormais envoyer des balises personnalisées:

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

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

Figure 3. Après avoir cliqué sur Synchroniser, DevTools envoie un événement de synchronisation en arrière-plan avec la balise personnalisée update-content au service worker.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.