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

Kayce Basques

Voici les nouvelles fonctionnalités et les modifications majeures apportées 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 Initiator (Initiateur) du panneau Network (Réseau) indique pourquoi une ressource a été demandée. Par exemple, si JavaScript provoque l'extraction d'une image, la colonne Initiator (Initiateur) affiche la ligne de code JavaScript à l'origine de la requête.

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

Dans ce scénario, vous souhaitez vraiment voir le code d'application à l'origine de la requête. C'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 Initiator (Initiateur) masque désormais tous les appels du script que vous avez ignorés.

Ignorement de "requests.js".

Figure 1 : Ignorer requests.js

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

Pour en savoir plus sur l'ignorer 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 Preview (Aperçu) du panneau Network (Réseau) affiche désormais les ressources au format mis en forme par défaut lorsqu'il détecte qu'elles ont été minifiées.

L'onglet "Aperçu" affiche le contenu de analytics.js sous forme mise en forme par défaut.

Figure 2 : L'onglet Preview (Aperçu) affiche le contenu de analytics.js sous forme mise en forme par défaut

Pour afficher la version non minifiée d'une ressource, utilisez l'onglet Response (Réponse). Vous pouvez également afficher manuellement les ressources au format mis en forme à partir de l'onglet Réponse, via le nouveau bouton Format.

Affichage manuel du contenu de analytics.js via le bouton "Format".

Figure 3. Affichage manuel du contenu de analytics.js via le 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, tandis qu'il affichait un aperçu du code HTML dans d'autres. L'onglet Aperçu 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 prévu. 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

Ajustement automatique du zoom en mode Appareil

En mode Device (Mode appareil), ouvrez le menu déroulant Zoom et sélectionnez Auto-adjust zoom (Réglage automatique du zoom) pour redimensionner automatiquement le viewport chaque fois que vous modifiez l'orientation de l'appareil.

Les forçages locaux fonctionnent désormais avec certains styles définis en HTML

Lorsque DevTools a lancé les Forcements locaux dans Chrome 65, il ne pouvait 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 est définie dans le head du document qui 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 avez modifié la déclaration font-weight via le volet Style (Style) de DevTools, Local Overrides (Forcer localement) ne suivait pas la modification. En d'autres termes, lors du prochain rechargement, le style reviendra à font-weight: bold. Toutefois, dans Chrome 66, ces modifications persistent désormais entre les chargements de page.

Conseil supplémentaire: 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 indiqué 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 DevTools. Lorsque je clique sur le bouton de la démonstration, DevTools se met automatiquement en pause sur la première ligne du code de l'écouteur. Dans ce cas, il s'arrête dans le code du wrapper de Vue.js à la ligne 1802, ce qui n'est pas très utile.

Le point d'arrêt de clic est mis en pause dans le code du wrapper Vue.js.

Figure 6. Le point d'arrêt click est mis en pause dans le code du wrapper Vue.js

Étant donné que le script Vue.js se trouve dans un fichier distinct, je peux ignorer ce script dans le volet Call Stack (Pile d'appels) afin de rendre ce point d'arrêt click plus utile.

Ignorance du script Vue.js dans le volet "Call Stack" (Pile d'appels).

Figure 7 : Ignorer le script Vue.js dans le volet Call Stack (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'arrêter, puis s'arrêtera sur la première ligne de code de l'écouteur de mon application, où je voulais vraiment m'arrêter tout du long.

Le point d'arrêt de clic est maintenant mis en pause 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 Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 éléments abordés dans la série Nouveautés des outils pour les développeurs.