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

Kayce Basques

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils de développement dans Chrome 66:

• Ignorer le script dans le panneau Réseau
• Réglage automatique du zoom en mode Appareil
• Mise en forme élégante dans les onglets Preview (Aperçu) et Response (Réponse)
• Aperçu du contenu HTML dans l'onglet Aperçu
• Remplacements locaux avec des styles dans le code HTML

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

Ignorer le script dans le panneau "Network" (Réseau)

La colonne Initiateur du panneau Réseau indique le motif de la demande de ressource. Pour Par exemple, si JavaScript provoque l'extraction d'une image, la colonne Initiator 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) ne serait pas très utile. Toutes les requêtes réseau pointaient vers la même ligne de code wrapper.

Dans ce scénario, vous devez avant tout voir le code d'application à l'origine de la requête. C'est dès maintenant:

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 maintenant les appels du script qui que vous avez ignorés.

Figure 1 : Ignorer requests.js

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

Pour savoir comment ignorer des scripts, consultez Ignorer un script ou un modèle de scripts.

Impression élégante dans les onglets "Aperçu" et "Réponse"

Par défaut, l'onglet Aperçu du panneau Réseau affiche les ressources d'une mise en page similaire lorsqu'il détecte que ces ressources ont été réduites.

Figure 2 : L'onglet Aperçu affiche par défaut le contenu de analytics.js de façon assez attrayante.

Pour afficher la version non réduite d'une ressource, utilisez l'onglet Réponse. Vous pouvez aussi mettre en forme les ressources de l'onglet Response (Réponse), via le nouveau bouton Format (Formater).

Figure 3. Impression manuelle du contenu de analytics.js via le bouton Format

Aperçu du contenu HTML dans l'onglet "Aperçu"

Auparavant, l'onglet Aperçu du panneau Réseau affichait le code d'une ressource HTML dans dans certaines situations, et dans d'autres, un aperçu du code HTML. Désormais, l'onglet Aperçu effectue un rendu de base du code HTML. Il ne s'agit pas d'un navigateur complet. Il est donc possible qu'il ne s'affiche pas HTML exactement comme prévu. Si vous souhaitez afficher le code HTML, cliquez sur l'onglet Response (Réponse), ou effectuez un clic droit sur une ressource, puis sélectionnez Ouvrir dans le panneau "Sources".

Figure 4. Aperçu du code HTML dans l'onglet Aperçu

Régler automatiquement le zoom en mode Appareil

En mode Appareil, ouvrez le menu déroulant Zoom, puis sélectionnez Ajuster automatiquement le zoom pour redimensionner automatiquement la fenêtre d'affichage chaque fois que vous modifiez l'orientation de l'appareil.

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

Lorsque les outils de développement ont lancé les remplacements locaux dans Chrome 65, l'une des limites impossible de suivre les modifications apportées aux styles définis dans le code HTML. Par exemple, la Figure 7 présente un style dans la head du document qui déclare font-weight: bold pour les éléments h1.

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 des outils de développement, Local La fonctionnalité de remplacement n'effectue pas le suivi des modifications. En d'autres termes, lors de l'actualisation suivante, le style sera rétabli retour à font-weight: bold. Mais dans Chrome 66, ce type de modification persiste entre les chargements de page.

Astuce supplémentaire: Ignorer les scripts du framework pour rendre les points d'arrêt de l'écouteur d'événements plus utiles

Lorsque j'ai créé la vidéo Get Started With Debugging JavaScript (Premiers pas avec le débogage JavaScript), certains internautes commentaient les points d'arrêt de l'écouteur d'événements ne sont pas utiles pour les applications basées sur des frameworks, car l'événement les écouteurs sont souvent encapsulés dans le code du framework. Par exemple, dans la Figure 8, j'ai configuré un click dans les outils de développement. Lorsque je clique sur le bouton dans la démo, les outils de développement se mettent automatiquement en pause première ligne du code de l'écouteur. Dans ce cas, il se met en pause dans le code wrapper de Vue.js à la ligne 1802, qui n'est pas très utile.

Figure 6. Le point d'arrêt click se met en pause dans Vue.js. code wrapper

Comme le script Vue.js se trouve dans un fichier distinct, je peux l'ignorer depuis la pile d'appels pour rendre ce point d'arrêt click plus utile.

Figure 7 : Ignorer le script Vue.js à partir du volet Pile d'appel

La prochaine fois que je clique sur le bouton et que je déclenche le point d'arrêt click, il exécute le code Vue.js. puis s'interrompt sur la première ligne de code dans l'écouteur de mon application, où je voulais vraiment faire une pause depuis le début.

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

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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement