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

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

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

Remplacements locaux

Les forcements 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.

Persistance d'un changement CSS entre les chargements de page avec des forçages locaux.

Figure 1 : Maintenir une modification CSS entre les chargements de page à l'aide de 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.

    Onglet "Remplacements"

    Figure 2 : Onglet Remplacements

  3. Cliquez sur Configuration des forçages.

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

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 inspectez le rapport de contraste des éléments textuels dans le sélecteur de couleurs pour vous assurer qu'ils sont accessibles aux utilisateurs ayant une déficience visuelle ou des troubles de la vision des couleurs.

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

Volet "Accessibilité"

Figure 4. Le volet Accessibilité affiche les attributs ARIA et les propriétés calculées de l'élément actuellement sélectionné dans l'arborescence DOM du panneau Éléments, 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 textuels, vous rendez votre site plus accessible aux utilisateurs malvoyants ou ayant des problèmes de 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.

Inspection du rapport de contraste de l'élément H1 mis en surbrillance.

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 est conforme au rapport de contraste recommandé avancé (AAA). Si une seule coche est affichée, cela signifie qu'il répond au rapport de contraste minimal recommandé (AA).

Cliquez sur Afficher plus Afficher plus pour développer la section Taux de contraste. La ligne blanche dans le cadre Spectre de couleurs représente la limite entre les couleurs qui respectent le rapport de contraste recommandé et celles qui ne le font 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.

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

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

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 Chrome DevTools ou regardez l'A11ycast ci-dessous pour découvrir comment utiliser le panneau Audits pour tester l'accessibilité.

Nouveaux audits

Chrome 65 comprend 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 votre classement dans les moteurs de recherche.

Nouvelle catégorie d'audits SEO.

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

Nouveaux audits de performances

Chrome 65 inclut également de nombreux nouveaux audits de performances:

  • Le temps de démarrage de JavaScript est élevé
  • 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 avoir amélioré la vitesse de chargement des pages de 4 fois, Mynet a vu le temps passé sur le site augmenter de 43 %, le nombre de pages consultées augmenter de 34 %, le taux de rebond diminuer de 24 % et les revenus augmenter 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

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

Chrome 65 apporte des modifications au bouton Étape Déboguer ligne suivante lorsque vous accédez au code qui transmet des messages entre les threads et le code asynchrone. Si vous souhaitez conserver l'ancien comportement de défilement, vous pouvez utiliser le nouveau bouton Étape É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 nœud de calcul. 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.

Étape dans le code de transmission de messages dans Chrome 65.

Figure 8. Étape dans le code de transmission de messages dans Chrome 65

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

Étape dans le code de transmission de messages dans Chrome 63.

Figure 9. Étape dans le 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().

Étape dans le code asynchrone dans Chrome 65

Figure 10 : Étape dans le code asynchrone dans Chrome 65

Lorsque vous accédiez à un code comme celui-ci dans Chrome 63, DevTools s'arrêtait dans le code au fur et à mesure de son exécution chronologique, comme illustré dans la figure 11.

Étape dans le code asynchrone dans Chrome 63.

Figure 11 : Étape dans le 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.

Sélectionner entre plusieurs enregistrements dans 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, comme 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 propose également des API pour de nombreuses tâches d'automatisation généralement utiles, comme 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 pour les développeurs lors de la navigation sans jamais ouvrir explicitement les outils pour les développeurs. 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

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.