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

Kayce Basques

Voici les nouvelles fonctionnalités qui seront disponibles dans les outils pour les développeurs de Chrome 65:

• Forcer des valeurs locales
• Nouveaux outils d'accessibilité
• Onglet Modifications
• Nouveaux audits SEO et de performances
• Plusieurs enregistrements dans le panneau Performances
• Exécution fiable du code avec les nœuds de calcul et le code asynchrone

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

Remplacements locaux

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

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

Fonctionnement :

• Vous spécifiez un répertoire dans lequel DevTools doit enregistrer les modifications.
• Lorsque vous apportez des modifications dans DevTools, une copie du fichier modifié est enregistrée 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:

1. Ouvrez le panneau Sources.

2. Ouvrez l'onglet Remplacements.

   

   Figure 2 : Onglet Remplacements

3. Cliquez sur Configurer les remplacements.

4. Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications.

5. En haut de votre vue, cliquez sur Autoriser pour accorder à DevTools un accès en lecture et en écriture au répertoire.

6. Apportez les modifications souhaitées.

Limites

• DevTools n'enregistre 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 code CSS est un fichier HTML, DevTools n'enregistrera pas la modification. Modifiez plutôt le fichier HTML dans le panneau Sources.

Fonctionnalités associées

• 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 DevTools, elle est également enregistrée dans votre dépôt local.

Onglet "Modifications"

Suivez les modifications que vous apportez localement dans DevTools via le nouvel onglet Modifications.

Figure 3. Onglet Modifications

Nouveaux outils d'accessibilité

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 d'une déficience visuelle.

Volet "Accessibilité"

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

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é.

Regardez l'A11ycast de Rob Dodson sur le libellé ci-dessous pour voir le volet Accessibilité en action.

Rapport de contraste dans le sélecteur de couleur

Le sélecteur de couleur affiche désormais le rapport de contraste des éléments de texte. 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 l'impact du rapport de contraste sur l'accessibilité.

Améliorer le contraste des couleurs de vos éléments textuels rend votre site plus utilisable pour tous les utilisateurs. En d'autres termes, si votre texte est gris sur un arrière-plan blanc, il sera difficile à lire pour tout le monde.

Figure 5. Inspection du 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 n'y avait qu'une seule coche, cela signifie qu'il répondait au rapport de contraste minimal recommandé (AA).

Cliquez sur Afficher plus pour développer la section Taux 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, comme la couleur grise de la figure 6 respecte les recommandations, cela signifie que toutes les couleurs situées sous la ligne blanche respectent également les recommandations.

Figure 6. Section Rapport de contraste développée

Fonctionnalités associées

Le panneau Audits contient un audit d'accessibilité automatisé qui permet de s'assurer que chaque élément textuel d'une page présente 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 est livré avec une toute nouvelle catégorie d'audits SEO et de nombreux nouveaux audits de performances.

Nouveaux audits SEO

En vous assurant que vos pages passent chacun des audits de la nouvelle catégorie SEO, vous pouvez améliorer leur classement dans les moteurs de recherche.

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 stratégie de mise en cache inefficace sur les composants statiques
• Éviter 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 sont importantes ! Après que Mynet a multiplié par quatre 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

Conseil : 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 fournissez une URL, et il vous fournit 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 de l'accessibilité n'est pas applicable à une page, il n'est plus pris en compte dans le score d'accessibilité.
• La section "Performances" est désormais en haut des rapports

Étapes de code fiables avec des workers et du code asynchrone

Chrome 65 apporte des mises à jour au bouton Step Into (Entrer) lors de l'exécution de code qui transmet des messages entre les threads, ainsi qu'au code asynchrone. Si vous souhaitez conserver l'ancien comportement de défilement, vous pouvez utiliser le nouveau bouton Étape .

Exécuter le code qui transmet des messages entre les threads

Lorsque vous effectuez un pas à pas dans le code qui transmet des messages entre les threads, DevTools vous montre 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 accédé à l'appel postMessage() sur le thread principal, DevTools se met en pause dans le gestionnaire onmessage du thread de travail. Le gestionnaire onmessage lui-même publie un message dans le thread principal. L'étape dans cet appel met en pause DevTools dans le thread principal.

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

Lorsque vous effectuiez un pas dans un code comme celui-ci dans les versions précédentes de Chrome, Chrome n'affiche que le côté du thread principal du code, comme illustré dans la figure 9.

Figure 9. Étapes à suivre pour accéder au code de transmission de messages dans Chrome 63

Exécuter du code asynchrone

Lorsque vous effectuez un pas à pas dans du code asynchrone, DevTools suppose désormais que vous souhaitez suspendre le code asynchrone qui s'exécute à terme.

Par exemple, dans la figure 10, après l'étape dans setTimeout(), DevTools exécute tout le code menant à ce point en arrière-plan, puis s'arrête dans la fonction transmise à setTimeout().

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.

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

Plusieurs enregistrements dans le panneau "Performances"

Le panneau Performances vous permet désormais d'enregistrer 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 Performances.

Figure 12. Sélectionner parmi plusieurs enregistrements dans le panneau Performances

Bonus: Automatiser les actions DevTools avec Puppeteer 1.0

La version 1.0 de Puppeteer, un outil d'automatisation du navigateur géré par l'équipe Chrome DevTools, 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 le guide de 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 Utiliser les fonctionnalités des outils de développement sans les ouvrir.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.