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

Kayce Basques
Kayce Basques
X GitHub

Voici les nouvelles fonctionnalités et les principaux changements apportés aux outils pour les développeurs dans Chrome 66 :

Lisez la suite ou regardez la version vidéo des notes de version ci-dessous.

Ignorer le script dans le panneau "Network"

La colonne Initiateur du panneau Réseau vous indique pourquoi une ressource a été demandée. Par exemple, si JavaScript provoque la récupération d'une image, la colonne Initiateur vous indique la ligne de code JavaScript qui a provoqué la requête.

Auparavant, si votre framework encapsulait les requêtes réseau dans un wrapper, la colonne Initiateur n'était pas très utile. Toutes les requêtes réseau pointaient vers la même ligne de code wrapper.

Dans ce scénario, vous souhaitez en réalité voir le code d'application qui provoque la requête. Voici ce qui est désormais possible :

  1. Pointez sur la colonne Initiateur. La pile d'appel à l'origine de la requête s'affiche dans un pop-up.
  2. Effectuez un clic droit sur l'appel que vous souhaitez masquer dans les résultats de l'initiateur.
  3. Sélectionnez Ajouter un script à la liste des éléments à ignorer. La colonne Initiateur masque désormais tous les appels du script que vous avez ignorés.

Ignorer "requests.js".

Figure 1 : Ignorer requests.js

Gérez vos scripts ignorés depuis l'onglet Liste des éléments à ignorer dans Paramètres.

Pour en savoir plus sur l'ignorance des scripts, consultez Ignorer un script ou un modèle de scripts.

Mise en forme dans les onglets "Aperçu" et "Réponse"

L'onglet Aperçu du panneau Réseau affiche désormais les ressources dans un format lisible par défaut lorsqu'il détecte qu'elles ont été minimisées.

L'onglet "Aperçu" affiche par défaut le contenu de analytics.js dans un format lisible.

Figure 2 : L'onglet Aperçu affiche par défaut le contenu de analytics.js dans un format lisible.

Pour afficher la version non minifiée d'une ressource, utilisez l'onglet Réponse. Vous pouvez également mettre en forme manuellement les ressources de l'onglet Réponse à l'aide du nouveau bouton Format.

Mise en forme manuelle du contenu d'analytics.js à l'aide du bouton "Format".

Figure 3. Mise en forme manuelle du contenu de analytics.js à l'aide du bouton Format

Prévisualiser le contenu HTML dans l'onglet "Aperçu"

Auparavant, l'onglet Aperçu du panneau Réseau affichait le code d'une ressource HTML dans certaines situations, tout en affichant un aperçu du code HTML dans d'autres. L'onglet Prévisualisation effectue désormais toujours un rendu de base du code HTML. Il n'est pas conçu pour être un navigateur complet. Il est donc possible qu'il n'affiche pas le code HTML exactement comme vous l'attendez. Si vous souhaitez afficher le code HTML, cliquez sur l'onglet Réponse ou effectuez un clic droit sur une ressource, puis sélectionnez Ouvrir dans le panneau "Sources".

Aperçu du code HTML dans l'onglet "Aperçu".

Figure 4. Prévisualiser le code HTML dans l'onglet Aperçu

Réglage automatique du zoom en mode Appareil

En mode Appareil, ouvrez le menu déroulant Zoom et sélectionnez Réglage automatique du zoom pour redimensionner automatiquement la fenêtre d'affichage chaque fois que vous changez l'orientation de l'appareil.

Les remplacements locaux fonctionnent désormais avec certains styles définis en HTML

Lorsque les remplacements locaux ont été lancés dans Chrome 65, une limite était qu'ils ne pouvaient pas suivre les modifications apportées aux styles définis dans le code HTML. Par exemple, dans la Figure 7, une règle de style dans le head du document déclare font-weight: bold pour les éléments h1.

Exemple de styles définis dans le code HTML

Figure 5. Exemple de styles définis dans le code HTML

Dans Chrome 65, si vous modifiiez la déclaration font-weight dans le volet Style des outils de développement, les remplacements locaux ne suivaient pas la modification. En d'autres termes, au prochain rechargement, le style reviendrait à font-weight: bold. Toutefois, dans Chrome 66, les modifications de ce type sont désormais conservées lors des chargements de page.

Conseil bonus : Ignorez les scripts de framework pour rendre les points d'arrêt de l'écouteur d'événements plus utiles

Lorsque j'ai créé la vidéo Premiers pas avec le débogage JavaScript, certains spectateurs ont commenté que les points d'arrêt des écouteurs d'événements n'étaient pas utiles pour les applications basées sur des frameworks, car les écouteurs d'événements sont souvent encapsulés dans le code du framework. Par exemple, dans la Figure 8, j'ai configuré un point d'arrêt click dans les outils de développement. Lorsque je clique sur le bouton de la démo, les outils de développement s'interrompent automatiquement à la première ligne du code de l'écouteur. Dans ce cas, il s'arrête dans le code wrapper de Vue.js à la ligne 1802, ce qui n'est pas très utile.

Le point d'arrêt du clic s'interrompt dans le code du wrapper de Vue.js.

Figure 6. Le point d'arrêt click s'interrompt dans le code wrapper de Vue.js

Étant donné que le script Vue.js se trouve dans un fichier distinct, je peux l'ignorer dans le volet Pile d'appel pour rendre ce point d'arrêt click plus utile.

Ignorer le script Vue.js dans le volet "Pile d'appel".

Figure 7 : Ignorer le script Vue.js dans le volet Pile d'appel

La prochaine fois que je cliquerai sur le bouton et déclencherai le point d'arrêt click, le code Vue.js s'exécutera sans s'y arrêter, puis s'arrêtera sur la première ligne de code de mon écouteur d'application, qui est l'endroit où je voulais vraiment m'arrêter depuis le début.

Le point d'arrêt de clic s'interrompt maintenant sur le code de l'écouteur de l'application.

Figure 8. Le point d'arrêt click met désormais en pause le code de l'écouteur de l'application.

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.