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

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
• Exécution fiable du code avec les workers et le code asynchrone

Lisez la suite ou visionnez 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 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. Locale Les remplacements 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 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 le fichier réseau ressource.

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 la fenêtre d'affichage, cliquez sur Allow (Autoriser) pour accorder aux outils de développement un accès en lecture et en écriture à la .

6. 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 le code HTML dans panneau Sources.
• Si vous modifiez le code CSS dans le volet Styles et que la source de ce fichier CSS est un fichier HTML, les outils de développement ne enregistrez 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 une modification dans les outils de développement, cette modification 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.

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. Examinez le rapport de contraste des éléments textuels dans le sélecteur de couleur accessibles aux utilisateurs souffrant d’une déficience visuelle ou d’une déficience 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 sélectionné.

Figure 4. Le volet Accessibilité affiche les attributs ARIA et les propriétés calculées pour actuellement sélectionné dans l'arborescence DOM du panneau Éléments, ainsi que ses 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. Augmenter le contraste le ratio d'éléments de texte rend votre site plus accessible aux utilisateurs ayant une déficience visuelle ou la vision des couleurs. Pour en savoir plus sur le rapport de contraste, consultez Couleur et 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. Dans d'autres termes, si votre texte est gris avec un arrière-plan blanc, il est difficile à lire pour quiconque.

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 la norme optimisée rapport de contraste recommandé (AAA). S'il ne comportait qu'une seule coche, cela signifie qu'il répondait aux critères rapport de contraste minimal recommandé (AA).

Cliquez sur Afficher plus pour développer la section Contraste Ratio. La ligne blanche dans la boîte Spectre de couleurs représente la limite entre les couleurs. qui correspondent au rapport de contraste recommandé et ceux qui ne le sont pas. Par exemple, étant donné que la couleur grise dans La figure 6 respecte les recommandations, ce qui signifie que toutes les couleurs situées sous la ligne blanche respectent également recommandations.

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

Fonctionnalités associées

Le panneau Audits dispose d'un audit d'accessibilité automatisé permettant de s'assurer que chaque élément de texte sur 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 apprendre à utiliser le Audits pour tester l'accessibilité

Nouveaux audits

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

Nouveaux audits SEO

Assurez-vous que vos pages réussissent chacun des audits de la nouvelle catégorie SEO pour vous aider à améliorer votre le classement des 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 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 que Mynet a multiplié par quatre la vitesse de chargement de ses pages, les utilisateurs ont passé 43% de temps en plus sur le a consulté 34% de pages supplémentaires, les taux de rebond ont chuté de 24 % et le chiffre d'affaires a augmenté de 25% par article une page vue. 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 attribuez une URL, et vous obtenez un rapport détaillé sur de nombreuses pour 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, il n'est plus pris en compte indice 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 à la fonctionnalité Step Into lors de l'ouverture le code qui transmet les messages entre les threads, et le code asynchrone. Si vous souhaitez que l'étape précédente vous pouvez utiliser la nouvelle étape .

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 se mettent en pause dans onmessage. dans le thread de nœud de calcul. Le gestionnaire onmessage lui-même publie un message sur le thread. L'accès à l'appel that met en veille les outils de développement dans le thread principal.

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

Dans les versions précédentes de Chrome, lorsque vous écriviez du code comme celui-ci, main-thread-côté du code, comme illustré dans la Figure 9.

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 à présent que vous souhaitez interrompre le processus 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 qui mène à ce stade en arrière-plan, puis se met en pause dans la fonction transmise à setTimeout()

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

Lorsque vous avez commencé à écrire du code comme celui-ci dans Chrome 63, les outils de développement se sont arrêtés dans le code. exécuté, comme illustré 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 de sauvegarder temporairement jusqu'à cinq enregistrements. Les enregistrements sont supprimés lorsque vous fermez la fenêtre des outils de développement. Consultez la section Premiers pas avec l'analyse de l'environnement d'exécution Performances pour vous familiariser avec 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 s'affiche. Vous pouvez utiliser Puppeteer pour automatiser de nombreuses tâches qui n'étaient auparavant disponibles que via les outils de développement, par exemple en effectuant des 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 explicitement en ouvrant 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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement