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 du 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 à la fois rouge et verte, comme la ligne 3 de la capture d'écran ci-dessus, signifie qu'une partie seulement du code de cette ligne a été exécutée. 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 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 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

Ignorer l'attente asynchrone

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, et le code setInterval() vous interromprait. Désormais, lorsque vous exécutez du code asynchrone tel que test(), DevTools passe 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 canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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 élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.