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

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 les valeurs CSS

Lors de l'ajout de 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 CSS valeurs. 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 saisir la valeur, et la saisie semi-automatique devrait vous aider à trouver le nom que vous recherchez.

Après avoir saisi "gras" la saisie semi-automatique du volet "Styles" prend la valeur "font-weight: bold".

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

Le panneau "Network" avait auparavant un problème de convivialité où des options telles que le menu de limitation étaient inaccessible lorsque la fenêtre "DevTools" é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 vers les nouveaux paramètres réseau volet.

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: Utiliser des lignes de requête volumineuses, Grouper par Frame, Show Overview (Afficher la présentation) et Capture Screenshots (Faire des captures d'écran). La figure 3 mappe les anciens établissements au nouveau. uns.

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" 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 souligné 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 à la nouvelle fonctionnalité Tout exporter au format HAR avec contenu. et importer un fichier HAR . Importation et exportation de fichiers HAR existent dans les outils de développement depuis un certain temps. 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. La partie inférieure du panneau "Memory" (Mémoire) indique que la page utilise 43,4 Mo de mémoire en 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 contrôler les services d'arrière-plan de récupération et de 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, ce ne serait pas très utile si les outils de développement n'enregistrent Événements de récupération et de synchronisation en arrière-plan alors que les outils de développement étaient ouverts. 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 si vous fermez l'onglet. même après la fermeture 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 Record (Enregistrer) pour commencer la journalisation. é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 le 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 l'exécution de node example.js, Firefox s'ouvre et le texte page est inséré dans le champ de recherche. sur le 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 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 vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > 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.