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

Voici quelques-unes des nouvelles fonctionnalités disponibles dans les outils de développement dans 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 lors des chargements de page. Auparavant, toutes les modifications que vous apportiez dans les outils de développement étaient perdues lorsque vous rechargeiez la page. Les remplacements locaux fonctionnent pour la plupart des types de fichiers, à quelques exceptions près. Consultez la section Limites.

Conserver les modifications CSS lors des chargements de page grâce aux remplacements locaux.

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

Fonctionnement :

  • Vous devez spécifier un répertoire dans lequel les outils de développement doivent enregistrer les modifications.
  • Lorsque vous effectuez des modifications dans les outils de développement, ceux-ci 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 des remplacements locaux:

  1. Ouvrez le panneau Sources.
  2. Ouvrez l'onglet Remplacements.

    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 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 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, les outils de développement n'enregistreront 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

Nouveaux outils d'accessibilité

Utilisez le nouveau volet Accessibility (Accessibilité) pour inspecter les propriétés d'accessibilité d'un élément et inspecter le rapport de contraste des éléments textuels dans le sélecteur de couleurs pour vous assurer qu'ils sont accessibles aux utilisateurs souffrant de déficiences visuelles ou visuelles.

Volet Accessibilité

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

Volet Accessibilité

Figure 4. Le volet 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 Éléments, ainsi que sa position dans l'arborescence d'accessibilité.

Consultez la vidéo A11ycast de Rob Dodson sur l'étiquetage 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 internautes souffrant de déficiences visuelles ou de déficience visuelle. Consultez Couleur et contraste pour en savoir plus sur la façon dont le rapport de contraste affecte l'accessibilité.

Améliorer le contraste des couleurs de vos éléments de texte rend 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 sera difficile à lire pour tous.

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

Figure 5. Inspecter le rapport de contraste de l'élément h1 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). Si elle ne comporte qu'une seule coche, cela signifie qu'elle a atteint le rapport de contraste minimal recommandé (AA).

Cliquez sur Show More (Afficher plus) Afficher plus pour développer la section Contrast ratio (Rapport de contraste). La ligne blanche dans la zone Spectre des couleurs représente la limite entre les couleurs qui répondent au rapport de contraste recommandé et celles qui ne le respectent pas. Par exemple, comme la couleur grise de la Figure 6 est conforme aux recommandations, toutes les couleurs sous la ligne blanche respectent également les recommandations.

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

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

Le panneau Audits dispose d'un audit d'accessibilité automatisé pour garantir que chaque élément textuel d'une page présente un rapport de contraste suffisant.

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

Nouveaux audits

Chrome 65 propose 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 avec succès chacun des audits de la nouvelle catégorie SEO, vous pouvez améliorer le classement de votre site dans les moteurs de recherche.

La nouvelle catégorie d'audits SEO.

Figure 7 : Nouvelle catégorie d'audit SEO

Nouveaux audits de performances

Chrome 65 inclut également 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 comptent ! Après que Mynet a quadruplé la vitesse de chargement de ses pages, les utilisateurs passaient 43% de temps en plus sur le site, ont consulté 34% de pages supplémentaires, les taux de rebond ont chuté de 24 % et les 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, consultez 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

Exécution de code fiable avec des nœuds de calcul et du code asynchrone

Chrome 65 apporte des mises à jour au bouton Step Into (Entrer) Descendez lors de la saisie de code qui transmet des messages entre les threads et du code asynchrone. Si vous souhaitez rétablir le comportement d'exécution précédent, vous pouvez utiliser le nouveau bouton Step (Étape) Step.

Intégrer 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 indiquent 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 dans le thread principal. Si vous entrez dans cet appel, les outils de développement reviennent dans le thread principal.

Passage au code de transmission de messages dans Chrome 65

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

Lorsque vous utilisiez ce type de code dans les versions précédentes de Chrome, seul le côté thread principal du code s'affichait, comme vous pouvez le voir dans la Figure 9.

Passage au code de transmission de messages dans Chrome 63.

Figure 9. Intégration du code dans Chrome 63 pour transmettre des messages

Entrer dans le code asynchrone

Lorsqu'ils passent au code asynchrone, les outils de développement supposent désormais que vous souhaitez faire une pause dans le code asynchrone qui s'exécute à terme.

Par exemple, dans la Figure 10, une fois que l'utilisateur est passé dans setTimeout(), les outils de développement exécute en arrière-plan tout le code menant à ce point, puis s'interrompt dans la fonction transmise à setTimeout().

Entrez dans le code asynchrone dans Chrome 65.

Figure 10 : Passer au code asynchrone dans Chrome 65

Lorsque vous êtes entré dans ce type de code dans Chrome 63, les outils de développement ont été mis en pause dans le code pendant son exécution chronologique, comme vous pouvez le voir dans la figure 11.

Entrez dans le code asynchrone dans Chrome 63.

Figure 11 : Passer 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 page Premiers pas avec l'analyse des performances d'exécution pour vous familiariser avec le panneau Performances.

en sélectionnant 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 des navigateurs 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 les 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 permettant de réaliser de nombreuses tâches d'automatisation très 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 la section Démarrage rapide.

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

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

  • Envoyez-nous une suggestion ou des commentaires via crbug.com.
  • Signalez un problème dans les outils de développement via Plus d'options   More > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
  • Envoyez un tweet à @ChromeDevTools.
  • Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59