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

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 arrive que la valeur de la déclaration soit 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.

Après avoir saisi &quot;gras&quot;, le volet &quot;Styles&quot; propose automatiquement &quot;font-weight: bold&quot;.

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 Bouton &quot;Paramètres des réseaux&quot; Paramètres réseau.

Paramètres des réseaux

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.

Mappage des anciens emplacements sur les nouveaux.

Figure 3. Mapper les 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 Exporter et Importer un fichier HAR Importer. L'importation et l'exportation de fichiers HAR existent depuis un certain temps dans DevTools. Les boutons plus visibles sont la nouvelle modification.

Nouveaux boutons de l&#39;enregistrement des requêtes HTTP

Figure 4. Nouveaux boutons de l'enregistrement des requêtes HTTP

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.

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.

Ports du service worker.

Figure 6. Ports du service worker.

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 en arrière-plan et de synchronisation en arrière-plan continuent d'être enregistrés, même après avoir fermé l'onglet et même après avoir fermé 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 Enregistrement pour commencer à consigner les événements. Cliquez sur un événement pour en savoir plus à son sujet.

Volet &quot;Récupération de l&#39;arrière-plan&quot;.

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

Volet &quot;Synchronisation en arrière-plan&quot;.

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 sur le site de documentation de Puppeteer. La même tâche est ensuite répétée dans Chromium.

Regardez la présentation 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

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.