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

Kayce Basques

Bienvenue dans un nouvel article sur les notes de version des outils de développement. Regardez la vidéo ci-dessous ou lisez la suite pour découvrir les nouveautés de Chrome DevTools dans Chrome 59.

Sélection

Nouvelles fonctionnalités

Couverture du code CSS et JS

Le nouvel onglet Couverture vous permet de trouver le code CSS et JavaScript inutilisé. Lorsque vous chargez ou exécutez une page, l'onglet indique la quantité de code utilisée par rapport à la quantité chargée. Vous pouvez réduire la taille de vos pages en n'envoyant que le code dont vous avez besoin.

Onglet "Couverture"

Cliquez sur une URL pour afficher ce fichier dans le panneau Sources, avec une répartition des lignes de code exécutées.

Répartition de la couverture de code dans le panneau "Sources"

Chaque ligne de code est associée à un code couleur:

  • Le vert fixe signifie que la ligne de code a été exécutée.
  • Le rouge fixe signifie qu'il n'a pas été exécuté.
  • Une ligne de code qui est à la fois rouge et verte, comme la ligne 3 de la capture d'écran ci-dessus, signifie que seul un code de cette ligne a été exécuté. Par exemple, une expression ternaire telle que var b = (a > 0) ? a : 0 est de couleur rouge et verte.

Pour ouvrir l'onglet Couverture:

  1. Ouvrez le menu Command (Commande).
  2. Commencez à saisir Coverage, puis sélectionnez Afficher la couverture.

Captures d'écran de toute la page

Regardez la vidéo ci-dessous pour découvrir comment prendre une capture d'écran du haut de la page jusqu'en bas.

Bloquer des requêtes

Vous souhaitez voir comment votre page se comporte lorsqu'un script, une feuille de style ou une autre ressource spécifique n'est pas disponible ? Effectuez un clic droit sur la requête dans le panneau Réseau, puis sélectionnez Bloquer l'URL de la requête. Un nouvel onglet Blocage des requêtes s'affiche dans le panneau latéral, qui vous permet de gérer les requêtes bloquées.

Bloquer l'URL de la requête

Passer la commande "async await"

Jusqu'à présent, essayer d'exécuter le code tel que l'extrait ci-dessous était un casse-tête. Vous vous trouveriez au milieu de test(), en sautant une ligne, puis vous seriez interrompu par le code setInterval(). Désormais, lorsque vous parcourez du code asynchrone comme test(), les outils de développement passent de la première à la dernière ligne de manière cohérente.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

P.S. – Vous souhaitez améliorer vos compétences de débogage ? Consultez ces documents récents:

Modifications

Menu de commandes unifié

Lorsque vous ouvrez le menu Command (Commande) maintenant, vous remarquerez qu'un caractère supérieur à (>) est ajouté au début de votre commande. En effet, le menu Command a été unifié avec le menu Open File (Ouvrir un fichier), qui s'obtient avec Command+O (Mac) ou Ctrl+O (Windows, Linux).

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 versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plate-forme 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, des mises à jour ou de tout autre sujet lié aux outils de développement.

Nouveautés des outils pour les développeurs

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