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, la valeur de déclaration est parfois plus facile à retenir que le nom de la déclaration. 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 du mot clé, 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" est complété 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 "Network" présentait auparavant un problème d'usabilité, car des options comme le menu de limitation de 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 des lignes de requêtes volumineuses, Grouper par frame, Afficher un aperçu et Capturer des captures d'écran. La figure 3 met en correspondance les anciennes zones géographiques avec les nouvelles.

Figure 3. Mappage des anciens emplacements sur les nouveaux.

Envoyez vos commentaires sur ce changement d'interface utilisateur dans le problème Chromium 892969.

Messages WebSocket dans les exportations HAR

Lorsque vous exportez un fichier HAR depuis le panneau "Réseau" pour partager des journaux réseau avec vos collègues, votre fichier HAR inclut désormais des 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 des fichiers HAR

Partagez plus facilement les journaux réseau avec vos collègues grâce aux nouveaux boutons Tout exporter au format HAR avec contenu et Importer un fichier HAR . L'importation et l'exportation de fichiers HAR existent depuis un certain temps dans DevTools. Les boutons plus visibles sont la nouvelle modification.

Figure 4. Nouveaux boutons de l'enregistrement HAR

Envoyez vos commentaires sur ce changement d'interface utilisateur 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. Le bas du panneau "Mémoire" indique 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 958177.

Numéros de port d'enregistrement des service workers

Le volet Service Workers inclut désormais des numéros de port dans ses titres pour vous permettre de suivre plus facilement le service worker que vous déboguez.

Figure 6. Ports des service workers.

Envoyez vos commentaires sur ce changement d'interface utilisateur dans le problème Chromium 601286.

Inspecter les événements de récupération en arrière-plan 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 de récupération en arrière-plan et de synchronisation en arrière-plan se produisent en arrière-plan, il ne serait pas très utile que DevTools n'enregistre que les événements de récupération en arrière-plan et de synchronisation en arrière-plan lorsque DevTools est ouvert. Ainsi, une fois l'enregistrement lancé, les événements de récupération et de synchronisation en arrière-plan continueront d'être enregistrés, même après la fermeture de l'onglet et même de Chrome.

Accédez au panneau Application, ouvrez l'onglet Background Fetch (Récupération en arrière-plan) ou Background Sync (Synchronisation en arrière-plan), puis cliquez sur Record (Enregistrer) pour démarrer la journalisation des événements. Cliquez sur un événement pour afficher plus d'informations à son sujet.

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

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

Envoyez vos commentaires sur ces nouvelles fonctionnalités dans le problème Chromium 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 illustré dans la vidéo ci-dessous.

Après avoir exécuté 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.

Regardez la conférence Puppeteer de Joel et Andrey lors de la conférence Google I/O 2019 pour en savoir plus sur Puppeteer et Puppeteer pour Firefox. L'annonce Firefox se produit vers 4:05.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en sélectionnant more_vert Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés dans les outils de développement ou sur les vidéos YouTube de conseils sur 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