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

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 : Prenez une capture d'écran de la page entière, du haut vers le bas de la fenêtre d'affichage.
Bloquer des requêtes : Désactivez manuellement les requêtes individuelles dans le panneau "Network" (Réseau).
Étape d'attente asynchrone. Parcourir les fonctions asynchrones de manière prévisible
Menu de commandes unifié. Exécutez des commandes et ouvrez des fichiers à partir du nouveau menu de commandes unifié.

Nouvelles fonctionnalités

Couverture du code CSS et JS

Localisez le code CSS et JS inutilisés grâce au nouvel onglet Couverture. Lorsque vous chargez ou exécutez une page, cet onglet vous indique la quantité de code utilisée et non celle chargée. Vous pouvez réduire la taille de vos pages en n'expédiant que le code dont vous avez besoin.

Onglet "Couverture"

Cliquez sur une URL pour afficher le fichier dans le panneau Sources et afficher le détail des lignes de code exécutées.

Une vue détaillée de la couverture du code dans le panneau "Sources"

Chaque ligne de code est associée à un code couleur:

Un vert plein signifie que cette ligne de code a été exécutée.
Le rouge fixe signifie que l'opération ne s'est pas 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 s'exécute. 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:

Ouvrez le menu Commandes.
Commencez à saisir Coverage et sélectionnez Afficher la couverture.

Captures d'écran pleine 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 découvrir le comportement de votre page 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 et 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 était un casse-tête. Vous vous trouviez au milieu de test(), en passant par une ligne, puis vous étiez interrompu par le code setInterval(). Désormais, lorsque vous parcourez le code asynchrone comme test(), les outils de développement suivent la première à la dernière ligne avec 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 de débogage ? Consultez ces documents plus récents:

Changements

Lorsque vous ouvrez le menu de commande, notez que votre commande est précédée d'un caractère supérieur à (>), car le menu de commande a été unifié avec le menu Ouvrir un fichier, qui est Commande+O (Mac) ou Ctrl+O (Windows, Linux).

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.