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

Recherchez le code CSS et JavaScript inutilisé dans le nouvel onglet Couverture. 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'exportant 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 rouge et verte, comme la ligne 3 dans la capture d'écran ci-dessus, signifie que seul une partie du code de cette ligne est 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 faire 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 demande dans le panneau Network (Réseau), puis sélectionnez Block Request URL (Bloquer l'URL de la requête). Un nouvel onglet Blocage des demandes s'affiche dans le panneau, ce qui vous permet de gérer les requêtes bloquées.

Bloquer l'URL de la requête

Ignorer l'attente asynchrone

Jusqu'à présent, essayer de parcourir du code comme dans l'extrait ci-dessous des maux de tête. Vous vous trouvez au milieu de test(), à ne pas dépasser une ligne, puis vous risquez d'être interrompu par le code setInterval(). Maintenant, lorsque vous parcourez code asynchrone comme test(), les outils de développement passent de la première à la dernière ligne avec la cohérence.

  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 en 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 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.

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