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

Kayce Basques
Kayce Basques
X GitHub

Bienvenue dans une nouvelle édition des notes de version des outils de développement. Regardez la vidéo ci-dessous ou lisez la suite pour découvrir les nouveautés des outils pour les développeurs Chrome dans Chrome 59.

Sélection

Nouvelles fonctionnalités

Couverture du code CSS et JS

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

Onglet "Couverture"

En cliquant sur une URL, vous pouvez afficher le 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.
  • Si le voyant est rouge fixe, cela signifie que l'action n'a pas été exécutée.
  • Une ligne de code à la fois rouge et verte, comme la ligne 3 dans la capture d'écran ci-dessus, signifie que seul une partie du code de cette ligne a été exécutée. Par exemple, une expression ternaire telle que var b = (a > 0) ? a : 0 est colorée en rouge et en vert.

Pour ouvrir l'onglet Couverture :

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

Captures d'écran de pages entières

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

Bloquer les demandes

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 tiroir, ce qui vous permet de gérer les requêtes bloquées.

Bloquer l'URL de la requête

Pas à pas principal avec async/await

Jusqu'à présent, essayer de parcourir le code comme l'extrait ci-dessous était un véritable casse-tête. Vous seriez au milieu de test(), en train de passer 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 en débogage ? Consultez ces documents récents :

Modifications

Menu de commandes unifié

Lorsque vous ouvrez le menu Command (Commande), vous remarquez que votre commande est précédée d'un signe supérieur (>). En effet, le menu Command a été unifié avec le menu Open File (Ouvrir un fichier), qui est Cmd+O (Mac) ou Ctrl+O (Windows, Linux).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.