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

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

Kayce Basques

Les nouvelles fonctionnalités suivantes seront disponibles dans les outils de développement dans Chrome 65:

Remplacements locaux
Nouveaux outils d'accessibilité
Onglet Modifications
Nouveaux audits SEO et de performances
Plusieurs enregistrements dans le panneau Performances
Déploiement de code fiable avec les workers et le code asynchrone

Lisez la suite ou visionnez la version vidéo de ces notes de version ci-dessous.

Remarque:Vérifiez la version de Chrome que vous utilisez sur chrome://version. Si vous utilisez une version antérieure, ces fonctionnalités n'existeront pas. Si vous exécutez une version ultérieure, ces fonctionnalités peuvent avoir changé. Une nouvelle version majeure de Chrome est mise à jour automatiquement toutes les six semaines environ.

Remplacements locaux

Les remplacements locaux vous permettent d'apporter des modifications dans les outils de développement et de les conserver d'un chargement à l'autre. Auparavant, toutes les modifications apportées dans les outils de développement étaient perdues lors de l'actualisation de la page. Les remplacements locaux fonctionnent pour la plupart des types de fichiers, à quelques exceptions près. Consultez la section Limites.

Conserver une modification CSS lors des chargements de page avec des remplacements locaux.

Figure 1 : Conserver une modification CSS lors des chargements de page avec les remplacements locaux

Fonctionnement :

Vous spécifiez un répertoire dans lequel les outils de développement doivent enregistrer les modifications.
Lorsque vous apportez des modifications dans les outils de développement, ils enregistrent une copie du fichier modifié dans votre répertoire.
Lorsque vous actualisez la page, les outils de développement diffusent le fichier local modifié plutôt que la ressource réseau.

Pour configurer les remplacements locaux:

Ouvrez le panneau Sources.
Ouvrez l'onglet Remplacements.

Figure 2 : Onglet Remplacements
Cliquez sur Configurer les remplacements.
Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications.
En haut de la fenêtre d'affichage, cliquez sur Allow (Autoriser) pour accorder aux outils de développement un accès en lecture et en écriture au répertoire.
Apportez les modifications souhaitées.

Limites

Les outils de développement n'enregistrent pas les modifications apportées dans l'arborescence DOM du panneau Éléments. Modifiez plutôt le code HTML dans le panneau Sources.
Si vous modifiez le code CSS dans le volet Styles et que la source de ce CSS est un fichier HTML, les outils de développement n'enregistrent pas la modification. Modifiez plutôt le fichier HTML dans le panneau Sources.

Espaces de travail : Les outils de développement mappent automatiquement les ressources réseau à un dépôt local. Chaque fois que vous apportez une modification dans les outils de développement, elle est également enregistrée dans votre dépôt local.

Onglet "Modifications"

Suivez les modifications que vous apportez localement dans les outils de développement via le nouvel onglet Modifications.

Onglet "Modifications"

Image 3. Onglet Modifications

Utilisez le nouveau volet Accessibilité pour inspecter les propriétés d'accessibilité d'un élément et inspecter le rapport de contraste des éléments de texte dans le sélecteur de couleur pour vous assurer qu'ils sont accessibles aux utilisateurs souffrant de déficience visuelle.

Utilisez le volet Accessibilité du panneau Éléments pour examiner les propriétés d'accessibilité de l'élément actuellement sélectionné.

Volet Accessibilité

Figure 4. Le volet Accessibility (Accessibilité) affiche les attributs ARIA et les propriétés calculées pour l'élément actuellement sélectionné dans l'arborescence DOM du panneau Elements, ainsi que sa position dans l'arborescence d'accessibilité.

Consultez l'article A11ycast de Rob Dodson sur l'étiquetage ci-dessous pour voir le volet Accessibility (Accessibilité) en action.

Rapport de contraste dans le sélecteur de couleur

Le sélecteur de couleur affiche à présent le rapport de contraste des éléments textuels. En augmentant le rapport de contraste des éléments de texte, vous rendez votre site plus accessible aux utilisateurs souffrant de déficience visuelle ou de la vision des couleurs. Consultez la section Couleur et contraste pour en savoir plus sur la façon dont le rapport de contraste affecte l'accessibilité.

En améliorant le contraste des couleurs de vos éléments textuels, vous rendez votre site plus facile à utiliser pour tous les utilisateurs. En d'autres termes, si votre texte est gris avec un arrière-plan blanc, il est difficile à lire pour quiconque.

Inspecter le rapport de contraste de l'élément H1 en surbrillance.

Figure 5. Inspecter le rapport de contraste de l'élément h1 mis en surbrillance

Dans la Figure 5, les deux coches à côté de 4.61 signifient que cet élément respecte le rapport de contraste amélioré (AAA). S'il ne comporte qu'une seule coche, cela signifie qu'il respecte le rapport de contraste minimal recommandé (AA).

Cliquez sur Show More (Afficher plus) pour développer la section Contrast ratio (Rapport de contraste). La ligne blanche dans la zone Color Spectrum (Spectre de couleurs) représente la limite entre les couleurs qui correspondent au rapport de contraste recommandé et celles qui ne le sont pas. Par exemple, étant donné que la couleur grise de la Figure 6 respecte les recommandations, toutes les couleurs situées sous la ligne blanche sont également conformes à ces recommandations.

Section "Rapport de contraste" développée

Figure 6. Section Contrast Ratio (Rapport de contraste) développée

Le panneau Audits propose un audit d'accessibilité automatisé permettant de s'assurer que chaque élément textuel d'une page a un rapport de contraste suffisant.

Consultez Exécuter Lighthouse dans les outils pour les développeurs Chrome ou regardez l'A11ycast ci-dessous pour découvrir comment tester l'accessibilité à l'aide du panneau Audits.

Nouveaux audits

Chrome 65 propose une toute nouvelle catégorie d'audits SEO, ainsi que de nombreux nouveaux audits de performances.

Nouveaux audits SEO

Vous pouvez améliorer le classement de vos pages dans les moteurs de recherche en vous assurant que vos pages réussissent chacun des audits de la nouvelle catégorie SEO.

Nouvelle catégorie d'audits SEO

Figure 7 : La nouvelle catégorie d'audits SEO

Nouveaux audits de performances

Chrome 65 est également livré avec de nombreux nouveaux audits de performances:

Le démarrage de JavaScript est long
Utilise une règle de cache inefficace sur les éléments statiques
Évite les redirections de page
Le document utilise des plug-ins
Réduire la taille des ressources CSS
Réduire la taille des ressources JavaScript

Les performances, ça compte ! Après avoir quadruplé la vitesse de chargement de ses pages, les utilisateurs ont passé 43% de temps en plus sur le site, ont consulté 34% de pages en plus, ont baissé de 24 % et leurs revenus ont augmenté de 25% par page vue d'article. En savoir plus

Astuce Si vous souhaitez améliorer les performances de chargement de vos pages, mais que vous ne savez pas par où commencer, essayez le panneau Audits. Vous lui attribuez une URL, et vous obtenez un rapport détaillé sur de nombreuses façons d'améliorer cette page. Pour commencer, cliquez ici.

Autres actualités

Nouveaux audits manuels de l'accessibilité
Modifications apportées à l'audit WebP pour l'inclure davantage dans les autres formats d'image nouvelle génération
Refonte du score d'accessibilité
Si un audit d'accessibilité n'est pas applicable à une page, cet audit n'est plus pris en compte dans le score d'accessibilité.
La section "Performances" s'affiche désormais en haut des rapports

Déploiement fiable de code avec les workers et le code asynchrone

Chrome 65 apporte des mises à jour au bouton Entrer lors de l'exécution de code qui transmet des messages entre les threads, ainsi qu'au code asynchrone. Si vous souhaitez obtenir le comportement d'étapes précédent, vous pouvez utiliser le nouveau bouton Étape à la place.

L'entrée dans du code qui transmet les messages entre les threads

Lorsque vous entrez dans du code qui transmet des messages entre les threads, les outils de développement vous montrent désormais ce qui se passe dans chaque thread.

Par exemple, l'application de la figure 8 transmet un message entre le thread principal et le thread de travail. Après avoir effectué l'appel postMessage() sur le thread principal, les outils de développement s'interrompent dans le gestionnaire onmessage du thread de nœud de calcul. Le gestionnaire onmessage lui-même publie un message dans le thread principal. L'accès à l'appel that met en veille les outils de développement dans le thread principal.

Accès au code de transmission de messages dans Chrome 65.

Figure 8 : Accès au code de transmission de messages dans Chrome 65

Lorsque vous êtes intervenu dans du code comme celui-ci dans des versions antérieures de Chrome, Chrome ne vous a montré que le côté thread principal du code, comme vous pouvez le voir dans la Figure 9.

Accès au code de transmission de messages dans Chrome 63.

Figure 9. Accès au code de transmission de messages dans Chrome 63

Passer au code asynchrone

Lors de l'exécution du code asynchrone, les outils de développement supposent maintenant que vous souhaitez interrompre l'exécution du code asynchrone qui finit par s'exécuter.

Par exemple, dans la Figure 10, après avoir accédé à setTimeout(), les outils de développement exécutent tout le code menant à ce point en arrière-plan, puis s'arrêtent dans la fonction transmise à setTimeout().

Accès au code asynchrone dans Chrome 65.

Figure 10 : Accès au code asynchrone dans Chrome 65

Lorsque vous êtes entré dans du code comme celui-ci dans Chrome 63, les outils de développement se sont arrêtés dans le code pendant son exécution chronologique, comme vous pouvez le voir dans la Figure 11.

Accès au code asynchrone dans Chrome 63.

Figure 11 : Accès au code asynchrone dans Chrome 63

Plusieurs enregistrements dans le panneau "Performances"

Le panneau Performances vous permet désormais de sauvegarder temporairement jusqu'à cinq enregistrements. Les enregistrements sont supprimés lorsque vous fermez la fenêtre des outils de développement. Consultez Premiers pas avec l'analyse des performances d'exécution pour vous familiariser avec le panneau Performance.

Choisir entre plusieurs enregistrements dans le panneau "Performances"

Figure 12. Choisir entre plusieurs enregistrements dans le panneau Performances

Bonus: Automatiser les actions des outils de développement avec Puppeteer 1.0

La version 1.0 de Puppeteer, un outil d'automatisation du navigateur géré par l'équipe des outils pour les développeurs Chrome, est désormais disponible. Vous pouvez utiliser Puppeteer pour automatiser de nombreuses tâches qui n'étaient auparavant disponibles que via les outils de développement, telles que la capture de captures d'écran:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Il dispose également d'API pour de nombreuses tâches d'automatisation généralement utiles, telles que la génération de PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Pour en savoir plus, consultez l'article Démarrage rapide.

Vous pouvez également utiliser Puppeteer pour exposer les fonctionnalités des outils de développement lors de la navigation sans jamais ouvrir explicitement les outils de développement. Pour obtenir un exemple, consultez la section Utiliser les fonctionnalités des outils de développement sans ouvrir les outils de développement.

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.