Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Bienvenue dans un autre épisode des notes de version des outils de développement. Regarder la vidéo ci-dessous ou poursuivez votre lecture pour découvrir les nouveautés des outils pour les développeurs Chrome dans Chrome 59.

Sélection

Couverture de code CSS et JS : Retrouvez les fichiers CSS et JS inutilisés le nouvel onglet "Couverture".
Captures d'écran pleine page. Prenez une capture d'écran de page entière, du haut vers le bas de la fenêtre d'affichage.
Bloquer des demandes : Désactivation manuelle d'une personne dans le panneau "Network".
Step over async await : Parcourez les fonctions asynchrones de manière prévisible.
Menu de commandes unifiées. Exécuter des commandes et ouvrir des fichiers dans le nouveau menu de commandes unifié.

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écuté sur une page, l'onglet indique la quantité de code utilisée par rapport à celle utilisée chargé. Pour réduire la taille de vos pages, n'envoyez que le code dont vous avez besoin.

Onglet "Couverture"

Cliquez sur une URL pour afficher le fichier en question 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 est exécutée.
Le rouge fixe signifie qu'elle n'a pas été exécutée.
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 sur cette ligne est exécuté. Par exemple, un ternaire Une expression telle que var b = (a > 0) ? a : 0 est colorée à la fois en rouge et en vert.

Pour ouvrir l'onglet Couverture:

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

Captures d'écran pleine page

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

Bloquer des requêtes

Vous souhaitez connaître le comportement de votre page lorsqu'un script, une feuille de style ou une autre ressource n'est pas disponible ? Effectuez un clic droit sur la requête dans le champ Réseau. panneau et sélectionnez Bloquer l'URL de la demande. 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

Passer la commande "async await"

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 cette nouvelle documentation:

Modifications

Lorsque vous ouvrez le menu Command (Commande) maintenant, notez que la commande est précédé d'un caractère supérieur à (>). En effet, la commande Le menu a été unifié avec le menu Ouvrir un fichier, Commande+O (Mac) ou Ctrl+O (Windows et Linux).

Télécharger les canaux de prévisualisation

Vous pouvez 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.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.