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

Points forts

Couverture de code CSS et JS : Trouvez les CSS et JS inutilisés grâce au nouvel onglet "Couverture".
Captures d'écran pleine page. Faites une capture d'écran de la page entière, du haut jusqu'au bas de la fenêtre d'affichage.
Bloquer des demandes : Désactivez manuellement les requêtes individuelles dans le panneau "Network".
Step over async await : Parcourez les fonctions asynchrones de manière prévisible.
Menu de commandes unifiées. Exécutez des commandes et ouvrez des fichiers à partir du 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écutez une page, l'onglet vous indique la quantité de code utilisée par rapport à celle chargée. 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 ce fichier dans le panneau Sources, avec le détail 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ée. Par exemple, une expression ternaire 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 de haut 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, 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, parcourir du code comme dans l'extrait ci-dessous était un casse-tête. Vous vous trouvez au milieu de test(), vous survolez une ligne, puis vous êtes 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 cette nouvelle documentation:

Changements

Lorsque vous ouvrez le menu de commande, vous remarquerez que votre commande est précédée d'un caractère supérieur à (>). Cela est dû au fait que ce menu a été unifié avec le menu Ouvrir le fichier, à savoir Commande + O (Mac) ou Ctrl + O (Windows, 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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.