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

Bonjour ! Voici les nouveautés concernant les 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 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é souhaitée, mais que vous ne vous souvenez plus du nom de la propriété, essayez de la saisir. La saisie semi-automatique devrait vous aider à trouver le nom que vous recherchez.

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

Figure 1. Après avoir saisi bold, le volet "Styles" s'affiche automatiquement en font-weight: bold.

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

Nouvelle interface utilisateur pour les paramètres réseau

Auparavant, le panneau "Network" rencontrait un problème d'usabilité : des options telles que le menu de limitation étaient inaccessibles lorsque la fenêtre "Outils de développement" était étroite. Pour résoudre ce problème et désencombrer le panneau "Network" (Réseau), quelques options moins utilisées ont été déplacées dans le nouveau volet Network Settings (Paramètres réseau) Bouton &quot;Paramètres réseau&quot;.

Paramètres des réseaux

Figure 2. Paramètres du réseau.

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

Mappage des anciens emplacements vers les nouveaux.

Figure 3. Mappage des anciens emplacements vers les nouveaux.

Envoyez vos commentaires sur cette modification de l'interface utilisateur concernant le problème Chromium n° 892969.

Messages WebSocket dans les exportations au format 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é au problème Chromium n° 496006.

Boutons d'importation et d'exportation HAR

Partagez plus facilement vos journaux réseau avec vos collègues grâce aux nouveaux boutons Export All As HAR With Content (Exporter tout en tant que HAR) Exporter et Import HAR File (Importer un fichier HAR) Import. L'importation et l'exportation de fichiers HAR existent dans les outils de développement depuis un certain temps. Les boutons plus visibles sont les nouveaux changements.

Nouveaux boutons HAR

Figure 4. Nouveaux boutons HAR

Envoyez vos commentaires sur cette modification de l'interface utilisateur concernant le problème Chromium n° 904585.

Utilisation totale de mémoire en temps réel

Le panneau "Memory" (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'outil Performance Monitor pour suivre l'utilisation de la mémoire en temps réel.

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

Numéros de port d'enregistrement des service workers

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

Ports de service worker

Figure 6. Ports de service worker

Envoyez vos commentaires sur cette modification de l'interface utilisateur concernant le problème Chromium n° 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 de récupération en arrière-plan 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, il ne serait pas très utile que les outils de développement n'enregistraient que les événements de récupération et de synchronisation en arrière-plan lorsque les outils de développement étaient ouverts. Ainsi, une fois que vous commencez à enregistrer, 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 la fermeture de l'onglet et même après la fermeture 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) Enregistrer pour commencer 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 &quot;Synchronisation en arrière-plan&quot;

Figure 8. Volet "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 maintenant 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 la conférence Google I/O 2019 pour en savoir plus sur Puppeteer et Puppeteer pour Firefox. L'annonce Firefox a lieu vers 4 h 05.

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

  • Envoyez-nous une suggestion ou des commentaires via crbug.com.
  • Signalez un problème dans les outils de développement via Plus d'options   More > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
  • Envoyez un tweet à @ChromeDevTools.
  • Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59