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

Kayce Basques
Kayce Basques
X GitHub

Voici quelques-unes des nouvelles fonctionnalités qui seront disponibles dans les outils pour les développeurs Chrome 65 :

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 lorsque vous rechargez la page. Auparavant, toutes les modifications que vous apportiez dans les Outils de développement étaient perdues lorsque vous actualisiez la page. Les remplacements locaux fonctionnent pour la plupart des types de fichiers, à quelques exceptions près. Consultez les limites.

Persister une modification CSS sur les chargements de page avec les remplacements locaux.

Figure 1 : Persister une modification CSS sur les 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é au lieu de 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 Remplacements de configuration.

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

  5. En haut de la fenêtre d'affichage, cliquez sur Autoriser pour accorder aux outils de développement un accès en lecture et en écriture au répertoire.

  6. Apportez les modifications souhaitées.

Limites

  • Les outils de développement n'enregistrent pas les modifications apportées à l'arborescence DOM du panneau Éléments. Modifiez 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, 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 grâce au 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 le rapport de contraste des éléments de texte dans le sélecteur de couleurs afin de vous assurer qu'ils sont accessibles aux utilisateurs souffrant de déficiences visuelles ou de déficiences 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 de l'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. Augmenter le rapport de contraste des éléments de texte rend votre site plus accessible aux utilisateurs souffrant d'une déficience visuelle ou d'une déficience de la vision des couleurs. Pour en savoir plus sur l'impact du rapport de contraste sur l'accessibilité, consultez Couleurs et contraste.

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

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

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 recommandé avancé (AAA). Si une seule coche s'affiche, cela signifie que le rapport de contraste est conforme à la recommandation minimale (AA).

Cliquez sur Afficher plus Afficher plus pour développer la section Rapport de contraste. La ligne blanche dans la zone Spectre de couleurs représente la limite entre les couleurs qui respectent le rapport de contraste recommandé et celles qui ne le respectent pas. Par exemple, étant donné que la couleur grise de la Figure 6 répond aux recommandations, cela signifie que toutes les couleurs situées sous la ligne blanche répondent également aux recommandations.

Section "Rapport de contraste" développée.

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

Le panneau Audits propose un audit d'accessibilité automatisé pour s'assurer que chaque élément de texte 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 utiliser le panneau Audits afin de tester l'accessibilité.

Nouveaux audits

Chrome 65 est fourni avec une toute nouvelle catégorie d'audits SEO et de nombreux nouveaux audits de performances.

Nouveaux audits SEO

S'assurer que vos pages réussissent chacun des audits de la nouvelle catégorie SEO peut vous aider à améliorer votre classement dans les moteurs de recherche.

Nouvelle catégorie d'audits SEO.

Figure 7 : 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 règle de cache inefficace sur les éléments statiques
  • Pas de 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 comptent ! Après avoir multiplié par quatre la vitesse de chargement de ses pages, Mynet a constaté que les utilisateurs passaient 43 % de temps en plus sur le site, consultaient 34 % de pages supplémentaires, que les taux de rebond avaient diminué de 24 % et que les revenus avaient 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 donne un rapport détaillé sur les nombreuses façons d'améliorer cette page. Pour commencer, cliquez ici.

Autres actualités

Débogage fiable du code avec des workers et du code asynchrone

Chrome 65 apporte des modifications au bouton Pas à pas détaillé Entrer lorsque vous parcourez le code qui transmet des messages entre les threads et le code asynchrone. Si vous souhaitez conserver le comportement de pas à pas précédent, vous pouvez utiliser le nouveau bouton Pas Étape.

Examiner le code qui transmet des messages entre les threads

Lorsque vous parcourez 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 nœud de calcul. Après avoir accédé à 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 sur le thread principal. L'exécution pas à pas dans cet appel met en pause les outils de développement dans le thread principal.

Passer au code de transfert de messages dans Chrome 65.

Figure 8. Passer au code de transmission de messages dans Chrome 65

Lorsque vous examiniez un code comme celui-ci dans les versions précédentes de Chrome, Chrome ne vous montrait que le côté du code du thread principal, comme vous pouvez le voir sur la figure 9.

Exécuter pas à pas le code de transfert de messages dans Chrome 63.

Figure 9. Parcourir le code de transfert de messages dans Chrome 63

Examiner le code asynchrone

Lorsque vous explorez du code asynchrone, les outils de développement partent désormais du principe que vous souhaitez mettre en pause le code asynchrone qui s'exécute finalement.

Par exemple, dans la figure 10, après être entré dans setTimeout(), les outils de développement exécutent en arrière-plan tout le code jusqu'à ce point, puis mettent en pause la fonction transmise à setTimeout().

Parcourir le code asynchrone dans Chrome 65.

Figure 10 : Parcourir le code asynchrone dans Chrome 65

Lorsque vous exécutiez un code comme celui-ci dans Chrome 63, les outils de développement mettaient le code en pause au fur et à mesure de son exécution chronologique, comme vous pouvez le voir sur la figure 11.

Parcourir le code asynchrone dans Chrome 63.

Figure 11 : Parcourir le code asynchrone dans Chrome 63

Enregistrements multiples 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 plusieurs enregistrements dans le panneau "Performances".

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

Bonus : Automatiser les actions DevTools avec Puppeteer 1.0

La version 1.0 de Puppeteer, un outil d'automatisation de 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 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, 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 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

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.