Share
Dans cette troisième partie de notre série d’outils pour les développeurs Chrome, nous verrons comment modifier et déboguer JavaScript. L'optimisation est une partie importante du processus de développement, en particulier pour les applications critiques en termes de performances. Nous discuterons également des techniques d'identification des goulots d'étranglement potentiels dans notre code..
Comme dans les deux articles précédents, je vais me concentrer sur les fonctionnalités de la version de Chrome Canary (version 26.0, à la date de rédaction de ce document). Je couvrirai les panneaux Sources et Timeline.
Le Panneau de sources est l'endroit idéal pour le débogage de JavaScript. Ce panneau, associé au panneau de la console, constitue un outil extrêmement puissant! C'est une interface de type pointer-cliquer qui vous permet de suspendre l'exécution de JavaScript et d'inspecter toutes les variables et tous les objets de la portée actuelle..
Vous trouverez peut-être utile de modifier votre code CSS et JavaScript dans les outils de développement..
Accentsconagua
ce mot-clé aux différentes étapes d’un programme JavaScript, vous pouvez regarder la ce mot-clé pour voir ses différentes valeurs dans le temps. Cliquez sur le bouton Ajouter pour ajouter une expression. Si une expression ne se met pas à jour, cliquez sur le petit bouton d'actualisation situé à côté du bouton Ajouter..L'onglet sources répertorie les ressources regroupées par sous-domaine à partir duquel elles sont servies. Chaque ressource a un menu contextuel (révélé par un clic droit sur la ressource) avec un ensemble d’options communes. Une option est cependant très intéressante: Modifications locales, que nous examinerons plus tard.
Remarque: vous pouvez afficher la liste des fichiers source sous forme de liste simple (c'est-à-dire qu'elle ne figure pas dans les dossiers regroupés par sous-domaine) en décochant l'option 'Afficher les dossiers' dans Paramètres> Général.
Un clic sur une ressource l'affiche dans le volet de contenu principal. N'oubliez pas d'activer le joli mode d'impression pour les ressources réduites, car certains minificateurs renomment des variables pour rendre le code plus difficile à comprendre. Espérons que davantage de développeurs généreront des cartes source à l'avenir, ce qui facilitera l'utilisation de code réduit..
Vous pouvez modifier la plupart des fichiers dans le volet de contenu principal. Ces modifications sont immédiatement reflétées dans le navigateur. Une fois les modifications apportées à une ressource, le menu contextuel vous offre la possibilité d’enregistrer (mais pas de manière permanente) ou d’enregistrer en tant que (sauvegarde locale d’une nouvelle version). Lorsque vous travaillez avec vos propres sites locaux, vous trouverez peut-être utile de modifier votre code CSS et votre code JavaScript dans les outils de développement plutôt que dans votre environnement de développement. L'enregistrement des modifications, dans ce cas, modifie le fichier source réel. Des outils tels que Tincr ou chrome-devtools-autosave peuvent vous aider à automatiser ce flux de travail..
Le menu contextuel de la ressource offre également la possibilité de révéler la ressource dans le panneau de réseau..
Une révision est un nouveau point dans la vie d'une ressource, sur lequel elle a été modifiée. La modification et l'enregistrement du code à partir du panneau des sources créent une nouvelle révision et les modifications de style apportées dans le panneau des éléments déclenchent une nouvelle révision.!
Une fois que vous avez apporté quelques modifications, vous pouvez cliquer avec le bouton droit de la souris sur la ressource et sélectionner Modifications locales. Cela ouvre un nouveau volet Modifications locales qui contient un diff des fichiers d'origine et modifiés. Dans le volet Modifications locales, nous pouvons annuler intégralement un fichier source modifié (utile lorsque vous avez effectué un grand nombre de modifications non souhaitées) en cliquant sur "Revenir" en regard du nom du fichier.
Developer Tools est assez aimable pour nous alerter des optimisations potentielles.
Le volet de contenu principal contient de nombreuses fonctionnalités que vous retrouveriez dans les éditeurs de code de base: numéros de ligne, mise en surbrillance de la syntaxe, possibilité de créer des onglets et fonctionnalité "annuler". Bien qu'il ne corresponde pas à un IDE à part entière, ce n'est pas mauvais pour un montage rapide.
Les points d'arrêt nous permettent d'interrompre l'exécution du code JavaScript et d'inspecter l'environnement actuel. Par exemple: supposons que nous ayons un simple pour boucle qui pousse les éléments sur un tableau. Notre objectif est de comprendre précisément le fonctionnement interne de chaque itération de la boucle. Nous pourrions très facilement utiliser console.log enregistrer les variables que nous voulons inspecter. Bien que cette technique puisse vous donner les résultats souhaités, ce n’est certainement pas la technique de débogage la plus efficace. En utilisant des points d'arrêt, nous pouvons suspendre l'exécution du code à l'intérieur du pour boucle et inspecte toutes les variables dans la portée du contexte.
var arr = []; pour (var i = 0; i < 3; i++) var num = i; arr.push(num);
Pour ajouter un point d'arrêt, cliquez sur le numéro de ligne. vous pouvez également cliquer avec le bouton droit sur le numéro de ligne et choisir l'option "Ajouter un point d'arrêt". Après avoir défini votre point d'arrêt, actualisez la page et notez que des points d'arrêt persistent entre les chargements de page. Si le code n'a pas encore été exécuté (par exemple, le point d'arrêt a été défini dans un gestionnaire d'événements click), vous pouvez alors lancer l'exécution du code sans actualisation de la page..
Vous pouvez coder en dur un point d'arrêt dans votre code en utilisant le débogueur; déclaration dans votre code. Les outils de développement (et la plupart des débogueurs JavaScript) reconnaissent cela comme un point d'arrêt.
Lorsque vous atteignez un point d'arrêt, la page est grisée et la ligne de code est bleue. À ce stade, nous pouvons appuyer sur la touche Échap pour afficher le panneau de la console. Ce qui est intéressant, c'est que le code écrit et exécuté dans la console (en pause sur un point d'arrêt) s'exécute réellement dans le contexte actuellement en pause! Typiquement, le ce mot clé se réfère au global la fenêtre objet; alors que regarder ce dans un Cliquez sur gestionnaire d'événement affiche la valeur en tant que cible d'événement (un élément).
Dans la capture d'écran ci-dessus, la partie grise représente le document lui-même et les outils de développement ont mis en surbrillance la ligne actuelle de JavaScript. Dans la console, vous voyez les résultats de l'inspection de quelques variables. Et à droite du volet contenu se trouve le volet "Variables d'étendue", où vous pouvez inspecter toutes les variables et tous les objets de l'étendue actuelle..
Les points d'arrêt conditionnels vous permettent de faire une pause lorsqu'une certaine condition est vraie.
Dans le volet de droite du panneau Sources, vous remarquerez l'onglet Points d'arrêt XHR. Cliquez sur "Ajouter un point d'arrêt XHR" sur votre site favori compatible Ajax. Laisser le champ "URL contient" vide les pauses toute XHR demande.
Cela présente aux développeurs de nouvelles et puissantes opportunités. Nous pouvons naviguer vers un site que nous n’avons pas encore construit, ni impliquer, et simplement commencer à déboguer du code en fonction de certains événements et critères. Donc, faire une pause sur les demandes Ajax est bien, mais quels autres événements pouvons-nous interrompre?
Le panneau des sources comporte une interface pointer-cliquer permettant de définir des points d'arrêt correspondant à certains écouteurs d'événement. Notez que l'interruption d'un événement particulier ne fonctionne que lorsque la page en question est à l'écoute de cet événement. Si on se casse le Contrôle> Redimensionner event, le code suivant garantit que le code est rompu lorsque l'événement est déclenché:
window.onresize = function (e) console.log (e); ;
Alors, quand est utile de casser des événements particuliers?
Les points d'arrêt persistent entre les chargements de page.
L'onglet Points d'arrêt DOM affiche les points d'arrêt du DOM. Un moyen simple de voir cela en action est de trouver un élément qui, par exemple, a un déclic lorsque vous cliquez dessus. nom du cours la propriété a changé. Recherchez l’élément dans le panneau Eléments, cliquez dessus avec le bouton droit de la souris et accédez à Break On> Attributes Modifications. Le code sera maintenant cassé lorsque les valeurs des attributs de cet élément changent.
document.querySelector ('# bouton'). onclick = function () this.setAttribute ('un peu', 'chose'); ; le sur clic Le gestionnaire d'événement ci-dessus compte comme une modification d'attribut, qui présente quelque chose de similaire à ceci:
Les autres options incluent:
element.remove ().Remarque: Chrome semble avoir implémenté la méthode remove (). Certains navigateurs ne supportent pas cette méthode. Donc, removeChild () devra être utilisé à la place.
Le panneau Montage vous permet d'analyser les problèmes de performances de votre application Web. Le principal objectif du panneau Montage est (au moment de la rédaction) d'afficher des informations, par opposition aux autres panneaux vous permettant d'effectuer des actions destructrices sur la page..
Les moments où vous souhaiterez peut-être utiliser le panneau Montage comprennent:
Vous pouvez coder en dur un point d'arrêt dans votre code en utilisant le
débogueur;déclaration dans votre code.
Dans la partie 2, vous pouvez rappeler comment nous avons commencé à enregistrer les informations réseau avant le chargement de la page afin de capturer autant de requêtes réseau que possible. Nous ne faisons pas cela dans le panneau Timeline; il vaut mieux enregistrer des événements courts et spécifiques. Nous n'avons pas nécessairement à * faire * quoi que ce soit. Nous pourrions laisser l'enregistrement enregistrer pour voir ce qui se passe lorsque l'utilisateur est inactif ou si des minuteries sont en cours d'exécution en arrière-plan.
Les onglets Evénements, Cadres et Mémoire sont renseignés lors de l'enregistrement. alors, veillez à les parcourir pour trouver les données dont vous avez besoin. La section Mémoire peut vous aider à détecter les fuites de mémoire potentielles..
Les enregistrements sont affichés pendant et après les enregistrements. Une quantité non négligeable de données est capturée dans les enregistrements, comme indiqué dans l'image suivante..
Cette capture d'écran montre des requêtes réseau (bleu) et quelques "styles de recalcul" (violet). Les recalculs de style peuvent avoir lieu pour un certain nombre de raisons. Les enregistrements jaunes sont des scripts et le vert représente le rendu de la page..
Cliquer ou survoler un enregistrement affiche plus d'informations. Par exemple, survoler un enregistrement 'paint' peut vous montrer la partie de la page qui a été peinte.
Les outils de développement relient parfois un enregistrement à un autre panneau. Par exemple, le lien d’une image vous dirige vers le panneau Ressources ayant cette image en surbrillance et un enregistrement XHR peut être lié à l’entrée correspondante dans le panneau Réseau..
Developer Tools est assez aimable pour nous avertir des optimisations potentielles. Remarquez la petite icône de notification située à droite de certains des enregistrements dans l'image suivante. Si elle est estompée, vous devrez explorer en profondeur pour localiser l’enregistrement contenant les informations utiles..
Les popovers contiennent parfois un lien vers la ligne de code qui a provoqué l'affichage de l'enregistrement. Mais un avertissement: de jolies impressions ne serviront pas toujours, surtout quand on regarde un code tiers. Une option consiste à définir un point d'arrêt sur la ligne sur laquelle vous vous dirigez. Une fois le débogueur en pause, vous pouvez afficher le contenu de la variable pour mieux comprendre l'intention du code..
Si vous êtes comme moi, vous finissez toujours par capturer plus de données que nécessaire, mais vous pouvez créer une sélection sur les barres verticales (cadres) qui affiche uniquement les enregistrements correspondant à la partie sélectionnée..
Si vous ne vous souciez que des enregistrements longs, définissez un filtre pour afficher uniquement ces enregistrements longs. Vous pouvez le faire en bas du panneau de la timeline.
Si le défilement n'est pas aussi fluide qu'il devrait l'être, envisagez d'exclure le "Chargement" (par exemple, les enregistrements réseau). Cela étant dit, si vous savez que les requêtes réseau sont utilisées pour charger des données dans une page où les utilisateurs défilent à l'infini, gardez l'option 'Chargement' cochée..
N'appliquez pas de filtrage simplement parce que les données semblent trop intenses au début. Prenez le temps de comprendre et d'analyser ce que les outils de développement vous montrent. Vous voudrez utiliser la chronologie pour confirmer l'endroit où les ralentissements se produisent et viser à rendre ces barres verticales aussi vides que possible (espace blanc / temps mort).
Le volet de contenu principal présente de nombreuses fonctionnalités que vous retrouveriez dans les éditeurs de code de base..
Connaissez-vous d'autres ressources utiles? Mentionnez-le dans les commentaires!
