Quoi de neuf dans DevTools (Chrome 65)

Besoin d'améliorer votre visibilité?

Votre site internet ne décolle pas, ou vous souhaitez obtenir des conseils d'optimisation, notre expert vous répond gratuitement du lundi au samedi et de 9h à 19h:

Envoyer un message

Les nouvelles fonctionnalités de DevTools dans Chrome 65 incluent :

Continuez à lire ou regardez la version vidéo de ces notes de version ci-dessous.

Noter: Vérifiez la version de Chrome que vous utilisez chrome://version. Si vous utilisez une version antérieure, ces fonctionnalités n’existeront pas. Si vous utilisez une version ultérieure, ces fonctionnalités peuvent avoir changé. Chrome se met automatiquement à jour vers une nouvelle version majeure toutes les 6 semaines environ.

# Remplacements locaux

Dérogations locales vous permet d’apporter des modifications dans DevTools et de conserver ces modifications d’un chargement de page à l’autre. Auparavant, toutes les modifications apportées dans DevTools étaient perdues lorsque vous rechargez la page. Dérogations locales fonctionnent pour la plupart des types de fichiers, à quelques exceptions près. Voir Limites.

Quoi de neuf dans DevTools (Chrome 65)

Figure 1. Persistance d’un changement CSS à travers les chargements de page avec Dérogations locales

Comment ça fonctionne:

  • Vous spécifiez un répertoire où DevTools doit enregistrer les modifications.
  • Lorsque vous apportez des modifications dans DevTools, DevTools enregistre une copie du fichier modifié dans votre répertoire.
  • Lorsque vous rechargez la page, DevTools sert le fichier local modifié, plutôt que la ressource réseau.

Installer Dérogations locales:

  1. Ouvrez le Sources panneau.

  2. Ouvrez le Dérogations languette.

    Quoi de neuf dans DevTools (Chrome 65)

    Figure 2. Les Dérogations languette

  3. Cliquez sur Remplacements de configuration.

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

  5. En haut de votre fenêtre, cliquez sur Permettre pour donner à DevTools un accès en lecture et en écriture au répertoire.

  6. Faites vos modifications.

# Limites

  • DevTools n’enregistre pas les modifications apportées dans le Arbre DOM du Éléments panneau. Modifiez le HTML dans le Sources panneau à la place.
  • Si vous modifiez CSS dans le modes volet, et la source de ce CSS est un fichier HTML, DevTools n’enregistrera pas la modification. Modifiez le fichier HTML dans le Sources panneau à la place.
  • Espaces de travail. DevTools mappe automatiquement les ressources réseau vers un référentiel local. Chaque fois que vous apportez une modification dans DevTools, cette modification est également enregistrée dans votre référentiel local.

# L’onglet Modifications

Suivez les modifications que vous apportez localement dans DevTools via le nouveau Changements languette.

Quoi de neuf dans DevTools (Chrome 65)

figure 3. Les Changements languette

# Nouveaux outils d’accessibilité

Utilisez le nouveau Accessibilité volet 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 Pipette à couleurs pour s’assurer qu’ils sont accessibles aux utilisateurs ayant des déficiences visuelles ou des déficiences de la vision des couleurs.

# Volet d’accessibilité

Utilisez le Accessibilité volet sur le Éléments panneau pour étudier les propriétés d’accessibilité de l’élément actuellement sélectionné.

Quoi de neuf dans DevTools (Chrome 65)

Figure 4. Les Accessibilité Le volet affiche les attributs ARIA et les propriétés calculées de l’élément actuellement sélectionné dans le Arbre DOM sur le Éléments panneau, ainsi que sa position dans l’arborescence d’accessibilité

Découvrez A11ycast de Rob Dodson sur l’étiquetage ci-dessous pour voir le Accessibilité volet en action.

# Rapport de contraste dans le sélecteur de couleurs

Le sélecteur de couleurs vous montre maintenant le rapport de contraste des éléments de texte. L’augmentation du rapport de contraste des éléments de texte rend votre site plus accessible aux utilisateurs malvoyants ou malvoyants. Voir Couleur et contraste pour en savoir plus sur la façon dont le rapport de contraste affecte l’accessibilité.

L’amélioration du contraste des couleurs de vos éléments de texte rend votre site plus utilisable pour tous utilisateurs. En d’autres termes, si votre texte est gris avec un fond blanc, c’est difficile à lire pour quiconque.

Quoi de neuf dans DevTools (Chrome 65)

Figure 5. Inspection du taux de contraste de la mise en évidence h1 élément

Dans Figure 5, les deux coches à côté de 4.61 signifie que cet élément répond au rapport de contraste amélioré (AAA). S’il n’y avait qu’une seule coche, cela signifierait qu’il a atteint le rapport de contraste minimum recommandé (AA).

Cliquez sur Montre plus Quoi de neuf dans DevTools (Chrome 65) pour étendre le Rapport de contraste section. La ligne blanche dans le Spectre de couleurs box représente la limite entre les couleurs qui respectent le rapport de contraste recommandé et celles qui ne le font pas. Par exemple, puisque la couleur grise dans Figure 6 répond aux recommandations, ce qui signifie que toutes les couleurs sous la ligne blanche répondent également aux recommandations.

Quoi de neuf dans DevTools (Chrome 65)

Figure 6. Le élargi Rapport de contraste section

Les Audits panel dispose d’un audit d’accessibilité automatisé pour s’assurer que tous élément de texte sur une page a un rapport de contraste suffisant.

Voir Exécuter Lighthouse dans Chrome DevTools, ou regardez le A11ycast ci-dessous, pour apprendre à utiliser le Audits panneau pour tester l’accessibilité.

# Nouveaux audits

Chrome 65 est livré avec une toute nouvelle catégorie d’audits SEO et de nombreux nouveaux audits de performance.

Noter: Les Audits panneau est alimenté par Lighthouse. Chrome 64 exécute Lighthouse version 2.5. Chrome 65 exécute Lighthouse version 2.8. Cette section est donc simplement un résumé des mises à jour Lighthouse de 2.6, 2.7 et 2.8.

# Nouveaux audits SEO

S’assurer que vos pages passent chacun des audits dans le nouveau Référencement catégorie peut aider à améliorer votre classement dans les moteurs de recherche.

Quoi de neuf dans DevTools (Chrome 65)

Figure 7. Le nouveau Référencement catégorie d’audits

# Nouveaux audits de performance

Chrome 65 est également livré avec de nombreux nouveaux audits de performances :

  • Le temps de démarrage de JavaScript est élevé
  • Utilise une politique de cache inefficace sur les actifs statiques
  • Évite les redirections de pages
  • Le document utilise des plugins
  • Minifier CSS
  • Minifier JavaScript

Les performances comptent ! Après que Mynet a multiplié par 4 la vitesse de chargement de ses pages, les utilisateurs ont passé 43 % de temps en plus sur le site, consulté 34 % de pages en plus, les taux de rebond ont chuté de 24 % et les revenus ont augmenté de 25 % par page d’article consultée. Apprendre encore plus.

Conseil! Si vous souhaitez améliorer les performances de chargement de vos pages, mais ne savez pas par où commencer, essayez le Audits panneau. Vous lui donnez une URL, et cela vous donne un rapport détaillé sur de nombreuses manières différentes d’améliorer cette page. Commencer.

# Autres mises à jour

# Pas de code fiable avec des travailleurs et du code asynchrone

Chrome 65 apporte des mises à jour au Entrer dans Quoi de neuf dans DevTools (Chrome 65) lorsque vous entrez dans le code qui transmet les messages entre les threads et le code asynchrone. Si vous voulez le comportement pas à pas précédent, vous pouvez utiliser le nouveau Étape Quoi de neuf dans DevTools (Chrome 65) bouton, à la place.

# Entrer dans le code qui transmet les messages entre les threads

Lorsque vous entrez dans le code qui transmet des messages entre les threads, DevTools vous montre maintenant ce qui se passe dans chaque thread.

Par exemple, l’application dans Figure 8 passe un message entre le thread principal et le thread de travail. Après être entré dans le postMessage() appel sur le thread principal, DevTools fait une pause dans le onmessage gestionnaire dans le thread de travail. Les onmessage le gestionnaire lui-même envoie un message au fil principal. Entrer dans cette call met DevTools en pause dans le thread principal.

Quoi de neuf dans DevTools (Chrome 65)

Figure 8. Entrer dans le code de transmission de messages dans Chrome 65

Lorsque vous êtes entré dans un code comme celui-ci dans les versions antérieures de Chrome, Chrome ne vous a montré que le côté thread principal du code, comme vous pouvez le voir dans Figure 9.

Quoi de neuf dans DevTools (Chrome 65)

Figure 9. Entrer dans le code de transmission de messages dans Chrome 63

# Entrer dans le code asynchrone

Lorsque vous entrez dans du code asynchrone, DevTools suppose maintenant que vous souhaitez suspendre le code asynchrone qui s’exécute finalement.

Par exemple, dans Figure 10 après être entré dans setTimeout(), DevTools exécute tout le code menant à ce point dans les coulisses, puis fait une pause dans la fonction qui est passée à setTimeout().

Quoi de neuf dans DevTools (Chrome 65)

Figure 10. Entrer dans le code asynchrone dans Chrome 65

Lorsque vous êtes entré dans un code comme celui-ci dans Chrome 63, DevTools a fait une pause dans le code pendant son exécution chronologique, comme vous pouvez le voir dans Figure 11.

Quoi de neuf dans DevTools (Chrome 65)

Figure 11. Entrer dans le code asynchrone dans Chrome 63

# Plusieurs enregistrements dans le panneau Performance

Les Performance Le panneau vous permet désormais de sauvegarder temporairement jusqu’à 5 enregistrements. Les enregistrements sont supprimés lorsque vous fermez votre fenêtre DevTools. Voir Prise en main de l’analyse des performances d’exécution pour vous familiariser avec les Performance panneau.

Quoi de neuf dans DevTools (Chrome 65)

Figure 12. Sélection entre plusieurs enregistrements dans le Performance panneau

# Bonus : Automatisez les actions DevTools avec Puppeteer 1.0

Noter: Cette section n’est pas liée à Chrome 65.

La version 1.0 de Puppeteer, un outil d’automatisation de navigateur maintenu par l’équipe Chrome DevTools, est maintenant disponible. Vous pouvez utiliser Puppeteer pour automatiser de nombreuses tâches qui n’étaient auparavant disponibles que via DevTools, 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();
})();

Voir Démarrage rapide pour en savoir plus.

Vous pouvez également utiliser Puppeteer pour exposer les fonctionnalités de DevTools lors de la navigation sans jamais ouvrir explicitement DevTools. Voir Utilisation des fonctionnalités de DevTools sans ouvrir DevTools pour un exemple.

# Téléchargez les chaînes en avant-première

Pensez à utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, testent des API de plate-forme Web de pointe et détectent les problèmes sur votre site avant vos utilisateurs !

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications de la publication, ou de tout autre élément lié à DevTools.

  • Soumettez-nous une suggestion ou un commentaire via crbug.com.
  • Signaler un problème de DevTools à l’aide du Plus d’options Quoi de neuf dans DevTools (Chrome 65) > Aider > Signaler un problème de DevTools dans DevTools.
  • Tweeter sur @ChromeDevTools.
  • Laissez des commentaires sur nos vidéos YouTube Quoi de neuf dans DevTools.

# Quoi de neuf dans DevTools

Une liste de tout ce qui a été couvert dans la série Quoi de neuf dans DevTools.

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

# 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




Article traduis depuis:
Source link