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

Kayce Basques

Bonjour ! Voici les nouveautés des outils pour les développeurs Chrome dans Chrome 76.

Saisie semi-automatique avec des valeurs CSS

Lorsque vous ajoutez des déclarations de style à un nœud DOM, il est parfois plus facile de se souvenir de la valeur de la déclaration que de son nom. Par exemple, lorsque vous mettez en gras un nœud <p>, la valeur bold peut être plus facile à retenir que le nom font-weight. L'interface utilisateur de saisie semi-automatique du volet "Style" est désormais compatible avec les valeurs CSS. Si vous vous souvenez de la valeur de mot clé que vous souhaitez, mais pas du nom de la propriété, essayez de saisir la valeur. La saisie semi-automatique devrait vous aider à trouver le nom que vous recherchez.

Figure 1. Après avoir saisi bold, le volet "Styles" se complète automatiquement par font-weight: bold.

Envoyez vos commentaires sur cette nouvelle fonctionnalité dans le problème Chromium 931145.

Nouvelle interface utilisateur pour les paramètres réseau

Le panneau "Réseau" présentait auparavant un problème d'usabilité : les options telles que le menu de limitation du débit étaient inaccessibles lorsque la fenêtre des outils de développement était étroite. Pour résoudre ce problème et désencombrer le panneau "Réseau", quelques options moins utilisées ont été déplacées derrière le nouveau volet Paramètres réseau .

Figure 2. Paramètres du réseau.

Les options suivantes ont été déplacées vers Paramètres réseau : Utiliser de grandes lignes de requête, Regrouper par frame, Afficher l'aperçu et Capturer des captures d'écran. La figure 3 mappe les anciens emplacements sur les nouveaux.

Figure 3 : Mappez les anciens établissements sur les nouveaux.

Envoyez vos commentaires sur cette modification de l'UI à l'issue 892969 de Chromium.

Messages WebSocket dans les exportations HAR

Lorsque vous exportez un fichier HAR depuis le panneau "Réseau" pour partager les journaux réseau avec vos collègues, votre fichier HAR inclut désormais les messages WebSocket. La propriété _webSocketMessages commence par un trait de soulignement pour indiquer qu'il s'agit d'un champ personnalisé.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Envoyez vos commentaires sur cette nouvelle fonctionnalité dans le problème Chromium 496006.

Boutons d'importation et d'exportation HAR

Partagez plus facilement les journaux réseau avec vos collègues grâce aux nouveaux boutons Tout enregistrer en tant que fichier HAR avec contenu et Importer le fichier HAR . L'importation et l'exportation de fichiers HAR existent dans les outils de développement depuis un certain temps. Les boutons plus visibles sont la nouvelle modification.

Figure 4 : Nouveaux boutons HAR.

Envoyez vos commentaires sur cette modification de l'UI dans le problème Chromium 904585.

Utilisation totale de la mémoire en temps réel

Le panneau "Mémoire" affiche désormais l'utilisation totale de la mémoire en temps réel.

Figure 5. En bas du panneau "Mémoire", vous pouvez voir que la page utilise 43,4 Mo de mémoire au total. 209 Ko/s indique que l'utilisation totale de la mémoire augmente de 209 Ko par seconde.

Consultez également le Moniteur de performances pour suivre l'utilisation de la mémoire en temps réel.

Envoyez vos commentaires sur cette nouvelle fonctionnalité dans le problème Chromium n° 958177.

Numéros de port d'enregistrement des service workers

Le volet Service Workers inclut désormais les numéros de port dans ses titres pour vous aider à suivre le service worker que vous déboguez.

Figure 6. Ports de service worker.

Envoyez vos commentaires sur cette modification de l'UI à l'adresse Chromium issue #601286.

Inspecter les événements de récupération et de synchronisation en arrière-plan

Utilisez la nouvelle section Services d'arrière-plan du panneau Application pour surveiller les événements Récupération en arrière-plan et Synchronisation en arrière-plan. Étant donné que les événements Background Fetch et Background Sync se produisent en arrière-plan, il ne serait pas très utile que les outils de développement n'enregistrent ces événements que lorsqu'ils sont ouverts. Ainsi, une fois l'enregistrement démarré, les événements de récupération en arrière-plan et de synchronisation en arrière-plan continueront d'être enregistrés, même après la fermeture de l'onglet et de Chrome.

Accédez au panneau Application, ouvrez l'onglet Récupération en arrière-plan ou Synchronisation en arrière-plan, puis cliquez sur Enregistrer pour commencer à enregistrer les événements. Cliquez sur un événement pour en savoir plus.

Figure 7. Volet "Récupération de l'arrière-plan". Démonstration par Maxim Salnikov.

Figure 8 : Volet "Synchronisation en arrière-plan".

Envoyez vos commentaires sur ces nouvelles fonctionnalités à l'outil de suivi des problèmes Chromium n° 927726.

Puppeteer pour Firefox

Puppeteer pour Firefox est un nouveau projet expérimental qui vous permet d'automatiser Firefox avec l'API Puppeteer. En d'autres termes, vous pouvez désormais automatiser Firefox et Chromium avec la même API Node, comme le montre la vidéo ci-dessous.

Après l'exécution de node example.js, Firefox s'ouvre et le texte page est inséré dans le champ de recherche du site de documentation de Puppeteer. La même tâche est ensuite répétée dans Chromium.

Pour en savoir plus sur Puppeteer et Puppeteer pour Firefox, regardez la présentation de Joel et Andrey sur Puppeteer lors de la conférence Google I/O 2019. L'annonce de Firefox a lieu vers 4:05.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.