Cette page a été traduite par l'API Cloud Translation.

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 Aperçu et Réponse
Aperçu du contenu HTML dans l'onglet Aperçu
Remplacements locaux avec des styles dans le code HTML

Remarque:Vérifiez la version de Chrome que vous utilisez sur chrome://version. Si vous utilisez une version antérieure, ces fonctionnalités n'existeront pas. Si vous exécutez une version ultérieure, ces fonctionnalités peuvent avoir changé. Une nouvelle version majeure de Chrome est mise à jour automatiquement toutes les six semaines environ.

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. Par exemple, si JavaScript entraîne la récupération d'une image, la colonne Initiator 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 Initiator 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 devez avant tout voir le code d'application à l'origine de la requête. C'est désormais possible:

Pointez sur la colonne Initiateur. La pile d'appel à l'origine de la requête s'affiche dans un pop-up.
Effectuez un clic droit sur l'appel que vous souhaitez masquer dans les résultats de l'initiateur.
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.

"requests.js" ignoré.

Figure 1 : Ignorer requests.js

Gérez les scripts ignorés depuis l'onglet Liste des éléments à ignorer dans 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 à présent les ressources d'une manière similaire lorsqu'il détecte que celles-ci ont été réduites.

L'onglet "Aperçu" affiche par défaut le contenu d'analytics.js de manière élégante.

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 également imprimer manuellement des ressources depuis l'onglet Réponse, via le nouveau bouton Format.

Impression manuelle du contenu d'analytics.js à l'aide du bouton Format.

Image 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 certaines situations, tout en affichant un aperçu du code HTML dans d'autres. L'onglet Aperçu effectue désormais toujours un affichage de base du code HTML. Il n'est pas destiné à ê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. Aperçu du code HTML dans l'onglet Aperçu

Régler automatiquement le zoom en mode Appareil

Lorsque vous êtes en Mode Appareil, ouvrez le menu déroulant Zoom et 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 était qu'ils ne pouvaient pas suivre les modifications apportées aux styles définis dans le code HTML. Par exemple, la Figure 7 comporte une règle de style dans la section 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 modifiiez la déclaration font-weight via le volet Style des outils de développement, les remplacements locaux n'effectueront pas le suivi de la modification. En d'autres termes, lors de l'actualisation suivante, le style reviendra à 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 de JavaScript), certains utilisateurs ont souligné que les points d'arrêt des écouteurs d'événements ne sont 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 dans la démonstration, les outils de développement se mettent automatiquement en pause dans la première ligne du code de l'écouteur. Dans ce cas, il se met en pause 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 se met en pause dans le code wrapper de Vue.js.

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

Comme le script Vue.js se trouve dans un fichier distinct, je peux l'ignorer depuis le volet Call Stack (Pile d'appel) afin de rendre ce point d'arrêt click plus utile.

Le script Vue.js est ignoré dans le volet de la pile d'appel.

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 sans s'arrêter, puis s'interrompt sur la première ligne de code de l'écouteur de mon application, où je voulais vraiment faire une pause.

Le point d'arrêt de clic se met désormais en pause dans le code de l'écouteur de l'application.

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