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

Voici les nouvelles fonctionnalités et les principales modifications apportées aux outils de développement 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" (Réseau)

La colonne Initiateur du panneau Réseau indique pourquoi une ressource a été demandée. Par exemple, si JavaScript entraîne la récupération 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 n'était pas très utile. Toutes les requêtes réseau pointaient vers la même ligne de code wrapper.

Ce que vous voulez vraiment dans ce scénario, c'est voir le code d'application qui est à l'origine de la requête. C'est maintenant 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 le script à la liste des éléments à ignorer. La colonne Initiator (Initiateur) masque désormais tous les appels du script que vous avez ignoré.

"requests.js" est ignoré.

Figure 1 : requests.js ignorée

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

Pour en savoir plus, consultez Ignorer un script ou un modèle de scripts.

Impression élégante dans les onglets "Preview" (Aperçu) et "Response" (Réponse)

L'onglet Preview (Aperçu) du panneau Network affiche désormais correctement les ressources par défaut lorsqu'il détecte que celles-ci ont été réduites.

Onglet "Aperçu" affichant par défaut le contenu d'analytics.js

Figure 2 : Onglet Preview (Aperçu) affichant par défaut le contenu de analytics.js

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

Imprimez manuellement le contenu d'analytics.js via le 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, et un aperçu du code HTML dans d'autres. L'onglet Aperçu affiche désormais toujours le code HTML de base. Il ne s'agit pas d'un navigateur complet. Il se peut donc qu'il n'affiche pas le code 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 Open in Sources (Ouvrir dans le panneau des sources).

Prévisualisation du code HTML dans l'onglet "Aperçu"

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

Régler automatiquement le zoom en mode Appareil

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 figurait dans l'impossibilité de 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 l'élément 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 modifiez la déclaration font-weight via le volet Style des outils de développement, les remplacements locaux ne suivront pas la modification. En d'autres termes, lors de la prochaine actualisation, le style reviendra à font-weight: bold. Mais dans Chrome 66, ces modifications sont désormais conservées lors des chargements de page.

Astuce: Ignorer les scripts du framework pour améliorer l'utilité des points d'arrêt de l'écouteur d'événements

Lorsque j'ai créé la vidéo Get Started With Debugging JavaScript (Premiers pas avec le débogage de JavaScript), certains spectateurs ont commenté que les points d'arrêt des écouteurs d'événements ne sont pas utiles pour les applications basées sur des frameworks, car ces écouteurs 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 s'arrêtent automatiquement dans la première ligne du code de l'écouteur. Dans ce cas, il est mis en pause dans le code 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 se met en pause dans le code du wrapper Vue.js.

Comme le script Vue.js se trouve dans un fichier distinct, je peux l'ignorer dans 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 "Pile d'appel".

Figure 7 : Ignorer le script Vue.js dans le volet Call Stack (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'arrête sur la première ligne de code dans l'écouteur de mon application, c'est là que je voulais vraiment faire une pause.

Le point d'arrêt de clic s'interrompt désormais au niveau du code de l'écouteur de l'application.

Figure 8 : Le point d'arrêt click s'interrompt désormais dans le code de l'écouteur de l'application.

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

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59