Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Olà ! Voici les nouveautés des Outils pour les développeurs Chrome dans Chrome 76.

Saisie semi-automatique avec les 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 un nœud <p> en gras, 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 que vous ne vous souvenez 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.

Une fois que vous avez saisi "gras", l'option "font-weight: bold" est saisie de manière semi-automatique dans le volet "Styles".

Figure 1. Après avoir saisi bold, la saisie semi-automatique du volet "Styles" affiche font-weight: bold.

Envoyez vos commentaires sur cette nouvelle fonctionnalité en répondant au problème Chromium n° 931145.

Nouvelle interface utilisateur pour les paramètres réseau

Auparavant, le panneau "Network" avait un problème d'usabilité : des options telles que le menu de limitation étaient inaccessibles lorsque la fenêtre "DevTools" était étroite. Pour résoudre ce problème et désencombrer le panneau "Network", quelques options moins utilisées ont été déplacées derrière le nouveau volet Paramètres des réseaux .

Paramètres des réseaux

Figure 2. Paramètres du réseau.

Les options suivantes ont été déplacées dans Paramètres réseau: Use Large Request Rows (Utiliser des lignes de requête volumineuses), Group by frame (Grouper par image), Show Overview (Afficher la présentation) et Capture Screenshots (Capturer des captures d'écran). La figure 3 mappe les anciens établissements aux nouveaux.

Mapper les anciens emplacements avec les nouveaux

Figure 3. Mapper les anciens emplacements avec les nouveaux

Envoyez vos commentaires sur cette modification de l'interface utilisateur à l'aide du problème Chromium n° 892969.

Messages WebSocket dans les exportations HAR

Lorsque vous exportez un fichier HAR à partir du panneau "Network" (Réseau) pour partager des 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é en répondant au problème Chromium n° 496006.

Boutons d'importation et d'exportation au format HAR

Partagez plus facilement les journaux réseau avec vos collègues grâce aux nouveaux boutons Export All As HAR With Content et Import HAR File . L'importation et l'exportation de fichiers HAR existent depuis longtemps dans les outils de développement. Les boutons les plus visibles correspondent à la nouvelle modification.

Nouveaux boutons HAR.

Figure 4. Nouveaux boutons HAR.

Envoyez vos commentaires sur cette modification de l'interface utilisateur à l'aide du problème Chromium n° 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.

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

Figure 5. Le bas du panneau "Memory" (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 l'article sur le moniteur des performances pour suivre l'utilisation de la mémoire en temps réel.

Envoyez vos commentaires sur cette nouvelle fonctionnalité en répondant au problème Chromium n° 958177.

Numéros de port d'enregistrement du service worker

Le volet Service workers inclut désormais les numéros de port dans ses titres pour faciliter le suivi du service worker que vous déboguez.

Ports des service workers.

Figure 6. Ports des service workers.

Envoyez vos commentaires sur cette modification de l'interface utilisateur à l'aide du problème Chromium n° 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 de récupération et de synchronisation en arrière-plan se produisent en arrière-plan, il ne serait pas très utile que les outils de développement n'enregistrent que les événements de récupération et de synchronisation en arrière-plan alors que les outils de développement étaient ouverts. Ainsi, une fois l'enregistrement lancé, les événements de récupération et de synchronisation en arrière-plan continuent à ê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.

Le volet Récupération en arrière-plan.

Figure 7. Le volet Récupération en arrière-plan. Démonstration de Maxim Salnikov

Volet de synchronisation en arrière-plan.

Figure 8. Volet de synchronisation en arrière-plan.

Envoyez vos commentaires sur ces nouvelles fonctionnalités au problème 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 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. Ensuite, la même tâche est 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 de Firefox a lieu vers 4 h 05.

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.