Share
Dans cette série de didacticiels en deux parties, nous examinerons l’écriture et le débogage de code JavaScript à l’aide d’outils modernes tels que Chrome DevTools..
Dans la première partie, vous découvrirez les différents panneaux de l'outil de développement et les flux de travail auxquels ils conviennent. L'accent sera également mis sur l'écriture et l'exécution de code JavaScript via le navigateur plutôt que sur un éditeur de code..
Les outils de développement sont des fonctionnalités fournies par les navigateurs contenant un ensemble d’utilitaires permettant d’inspecter, d’interagir et de déboguer des pages Web. Navigateur DevTools sont généralement fournis avec tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Opera et Internet Explorer. Ce didacticiel se concentrera spécifiquement sur la partie DevTools de Chrome Canary, mais toutes les fonctionnalités répertoriées ici feront probablement partie de Chrome Stable..
La plate-forme Web ouverte vous permet de Clic droit> Inspecter l'élément sur n'importe quelle page Web et découvrez ses éléments internes, mais JavaScript a toujours été un peu plus inaccessible que CSS (Cascading Style Sheets). Bien que DevTools regorge de fonctionnalités liées au style de la page, il existe également de nombreuses fonctionnalités moins connues qui vous permettent d'afficher, d'écrire et de déboguer JavaScript de différentes manières, que ce soit sur votre propre page ou sur une troisième. site tiers.
Si vous êtes un développeur Web front-end, il est recommandé de connaître au moins les utilitaires JavaScript proposés par DevTools. Les fonctionnalités de haut niveau incluent:
Cette section couvrira les éléments d'interface utilisateur de DevTools, en particulier le panneau Sources et le panneau Console, car ce sont les deux panneaux qui seront utilisés pour la suite de ce didacticiel..
Prenez note de quelques caractéristiques de mise en page:
Le panneau Sources fournit un éditeur de code et prend en charge la coloration syntaxique de nombreux formats de fichiers courants tels que HTML, CSS, JavaScript, CoffeeScript, LESS et Sass. L'éditeur de code est présent dans le volet principal. Juste au-dessus du volet principal, vous pouvez voir les onglets correspondant à vos fichiers ouverts..
Dans le volet Sources de la barre latérale gauche, une arborescence de fichiers indique généralement les actifs que la page actuellement inspectée a chargés. Les actifs sont regroupés par domaine et les dossiers peuvent être développés ou réduits. Si vous cliquez sur un élément, il s'ouvrira dans l'éditeur de code..
La barre latérale de droite contient les commandes de débogage JavaScript et chaque volet peut afficher un état développé ou réduit. Différents niveaux de sortie sont affichés ici lorsque JavaScript est suspendu à un point d'arrêt.
Le panneau de la console vous permet d’afficher la sortie produite par la journalisation des diagnostics (telle que console.log déclarations), mais aussi d’écrire et d’évaluer JavaScript dans le contexte de la page actuellement inspectée. Le panneau de la console prend en charge l’API de console et l’API de ligne de commande. Voici quelques fonctions exposées par chaque API, avec une description de leur sortie.
Accentsconagua
// Une instruction de journal simple, consignant une chaîne, un tableau et un objet console.log ('Hi', [1,2,3], this);
// Identique à console.log mais formaté en rouge pour indiquer une erreur console.error ('Une erreur est survenue');
clés (fenêtre); // Récupère les propriétés d'un objet
0 $; // Récupérer l'élément actuellement sélectionné dans le panneau des éléments
La partie supérieure du panneau de la console contient quelques commandes, comme indiqué ci-dessous..
clair(), qui fait partie de l'API de ligne de commande.Le panneau de console est l'un des rares panneaux que vous pouvez superposer à d'autres panneaux dans les outils de développement (Elements, Network, Sources) afin d'améliorer le flux de travail. Si vous revenez régulièrement sur le panneau de la console, ouvrez le tiroir de la console en appuyant sur le bouton Échapper clé.
Cette section se concentrera sur l’utilisation de DevTools pour afficher les ressources JavaScript utilisées par un site. Avant de continuer, il est recommandé de désactiver le cache du navigateur via DevTools. Pour ce faire, accédez à Paramètres> Général et activez la case à cocher intitulée Désactiver le cache (lorsque DevTools est ouvert). Cela garantit que vous obtenez toujours une nouvelle version d'un actif.
Accédez à HTML5Please.com, un site expliquant la disponibilité des fonctionnalités de la plate-forme Web. Ouvrez les outils de développement à l'aide de Commande-Maj-I ou en sélectionnant Inspecter l'élément dans le menu contextuel de la page. Dirigez vous vers le Panneau de sources et prenez note de l’arborescence de fichiers indiquée dans la barre latérale gauche. Il n’est pas rare que des sites Web stockent leur code JavaScript dans des dossiers tels que "js" ou "scripts", de sorte que vous savez déjà où chercher. Ouvrez le script.js déposer dans le js dossier. Notez quelques fonctionnalités de l'éditeur de code qui peuvent s'avérer utiles lorsque vous affichez ou modifiez du code JavaScript:
Utilisez la fonctionnalité de définition pour trouver ou découvrir rapidement des méthodes ou des fonctions JavaScript. Vous pouvez ouvrir la fenêtre modale de définition go-to via le raccourci Commande-Maj-P. Si vous connaissez le nom de la méthode ou de la fonction que vous recherchez, saisissez-le dans le champ de recherche de définition go-to; au fur et à mesure que vous tapez, les résultats seront mis à jour en temps réel. Chaque résultat contient le nom de la méthode correspondante (s'il en existe un) et le numéro de ligne où il est défini. Utilisation Entrer pour sélectionner un résultat de recherche et vous atterrissez ensuite sur la ligne de code où la fonction est définie.
Ouvert modernizr-2.0.min.js dans le js / libs dossier. Le fait que ce fichier soit minifié rend la visualisation plus difficile. Sélectionner Jolie impression Pour que DevTools applique une mise en forme plus intuitive au fichier, en utilisant des sauts de ligne et des indentations. La fonctionnalité Pretty Print fonctionne à la fois pour CSS et JavaScript.
Chaque fichier JavaScript de l’arborescence de fichiers comporte un menu contextuel. Ouvrez-le à l’aide de clic-droit. Notez quelques options utiles pour mettre le fichier hors ligne pour une utilisation ultérieure.
Le panneau de réseau, en plus de vous montrer simplement quelles ressources une page a été chargée, affichera également d'autres informations et données..
En utilisant HTML5Please.com comme exemple de site Web, suivez les étapes ci-dessous:
Le premier script, modernizr-2.0.min.js, a la valeur de html5please.com/:17 pour l'initiateur. Cela suggère que c'est une ressource HTML qui a initié le téléchargement du script (plutôt qu'un chargeur de script, par exemple). Cliquez sur l'initiateur pour accéder à la ligne de code du panneau Sources qui fait référence au fichier:
Dans le cas où un script est inséré dynamiquement (avec un chargeur de script par exemple), la colonne initiateur du panneau de réseau peut fournir une pile d'appels JavaScript concernant les appels qui ont eu lieu jusqu'au point où le script a été inséré dynamiquement. dans le DOM.
Vous pouvez cliquer sur chaque appel dans une pile d'appels pour accéder à la partie de code correspondante dans le panneau Sources..
Dans la section "Affichage de JavaScript à l'aide de DevTools", j'ai expliqué comment afficher des informations, des métadonnées et du code source sur des actifs JavaScript. Cette section examinera les façons dont vous pouvez écrire du code JavaScript à l’aide de DevTools..
Utilisez le panneau de la console pour écrire des lignes simples JavaScript avec des résultats immédiats. JavaScript est exécuté avec le contexte de la page actuellement inspectée. Exécutez du JavaScript dans le panneau de la console en appuyant sur Entrer après avoir entré du code.
Reportez-vous à l’API de la console et à l’API de ligne de commande pour obtenir une liste des méthodes et fonctions disponibles..
Bien que le panneau de la console soit relativement simple, voici quelques conseils pour améliorer votre flux de travail:
clés (fenêtre) détecter des variables globales sur la page en cours.$ _ assistant pour récupérer le dernier résultat d'une commande précédente.Vous constaterez peut-être que le panneau de console est un bon candidat pour expérimenter rapidement JavaScript afin de déterminer le résultat de certaines expressions. Cependant, lorsque vous commencez à écrire du code JavaScript plus complexe, vous pouvez facilement rencontrer des limitations:
La Console Panel n’a pas l’intention de remplacer ni de remplacer un éditeur de code. Voici une liste de cas où le panneau de console peut être utile:
appel() et appliquer() méthodes en les exécutant en ligne et en observant les résultatsLe volet principal du panneau Sources contient un éditeur de code doté de fonctionnalités d’édition de base..
L'éditeur lui-même est alimenté par CodeMirror, un éditeur de texte puissant implémenté à l'aide de JavaScript. DevTools importe l'éditeur CodeMirror dans sa propre base de code et active sélectivement diverses fonctionnalités qui sont ensuite mises à la disposition de tout utilisateur de Chrome..
Lors de la modification de JavaScript (parmi d'autres langues prises en charge), l'éditeur de panneau Sources contient un certain nombre d'utilitaires tels que:
document n'est pas suggéré après avoir tapé docu à moins qu'il y ait déjà au moins une occurrence du mot document dans le même dossier.Cette fonctionnalité, mieux connue sous le nom de Live Edit, vous permet d’éditer le code JavaScript d’une page via DevTools et d’appliquer immédiatement les modifications à la page sans actualisation de la page. Il n'y a pas d'interface utilisateur particulière pour utiliser cela; il vous suffit de réécrire une partie du code JavaScript et d'appuyer sur Command-S pour le sauver.
La manière dont cela fonctionne en coulisse est expliquée ci-dessous, mais prenons d’abord les conditions préalables suivantes (indépendantes de Live Edit):
script.js charge dans Chrome via une page Web.script.js est analysé, évalué et compilé en code machine via le moteur JavaScript V8.Voici ce qui se passe dans les coulisses de la fonctionnalité Live Edit, en tenant compte des points précédents:
script.js dans l'éditeur de code DevTools. Supposons qu’il existe un bouton sur la page Web actuelle. Lors d’un clic sur un bouton, un écouteur d’événements click exécute une fonction anonyme..console.log déclaration et enregistrer le fichier.script.js sont réinjectés dans le moteur V8 pour traitement.script.js et le vieux. Les suppressions, les ajouts et les modifications sont stockés.script.js avec les changements compilés.Live Edit fonctionne mieux avec des modifications mineures que de créer des fichiers JavaScript entiers pour votre application. Les scénarios de débogage fonctionnent bien avec Live Edit.
Les espaces de travail ne constituent pas un composant essentiel du débogage JavaScript via DevTools. Toutefois, en fonction de vos besoins, cela peut accélérer votre processus de débogage. Les espaces de travail sont une fonctionnalité de DevTools qui vous permet de modifier le contenu d'un dossier sur le système de fichiers en apportant des modifications de code dans DevTools..
Si vous parcourez un projet qui est servi localement via un serveur Web, tel que http: // localhost: 3000 / et le projet existe sur votre système de fichiers à ~ / développement / projet, Par exemple, vous pouvez expliquer à DevTools le mappage entre les deux et utiliser les fonctionnalités Live Edit avec les fonctionnalités de sauvegarde sur disque. Les espaces de travail activent le flux de travail suivant:
A l'étape 3, la sauvegarde écrase le fichier source d'origine..
Les cartes source résolvent un problème courant lorsqu’il s’agit de code source traité ou compilé en quelque chose d’autre. Les exemples comprennent:
Le problème est le suivant: lors du débogage d'une version traitée du code, il peut être difficile de comprendre comment le code source d'origine est mappé sur ce que vous visualisez pendant le débogage. Si vous obtenez une erreur dans la console DevTools pour un site Web de production, vous finirez généralement par devoir déboguer une version simplifiée et concaténée du code JavaScript, qui ressemble peu aux fichiers source que vous avez créés..
Une carte source est un fichier généré généré dans le cadre d'un processus de compilation disponible pour les cas d'utilisation répertoriés précédemment. DevTools peut lire un fichier Map Map pour comprendre comment un fichier compilé est mappé sur le fichier d'origine..
Les deux extraits de code (Source File-app.js et Transpiled file-compiled.js) illustrent un code adapté au débogueur de carte source..
Exemple 1. Fichier source-app.js
for (var élément de [1, 2, 3]) console.log (element);
Notez que le app.js Le fichier source utilise une fonctionnalité compatible Ecmascript 6 appelée itérateur de tableau..
Exemple 2. Fichier compilé.js
"use strict"; for (var $ __ 0 = [1, 2, 3] [Symbol.iterator] (), $ __ 1;! ($ __ 1 = $ __ 0.next ()). done;) var element = $ __ 1.value; console.log (element); // # sourceMappingURL = app.js.map
Notez que compiled.js est référencé par une balise de script sur une page HTML, avec le runtime Traceur, et est finalement ouvert dans un navigateur.
Même le JavaScript compilé a le console.log déclaration sur la ligne 6. DevTools est capable de montrer exactement oùconsole.log Cette instruction existe dans le fichier source d'origine (débogage de la mappe source), à la ligne 2. Les points d'arrêt fonctionnent comme prévu. Dans les coulisses, le code JavaScript compilé est évalué et exécuté, mais DevTools présente un actif différent à la place de la version évaluée du navigateur..
La fonctionnalité Snippets de DevTools fournit un moyen rapide d'écrire du code JavaScript divers et de l'exécuter. Tout le JavaScript exécuté via des extraits est exécuté dans le contexte de la page en cours. L'exécution d'un extrait de DevTools est similaire à l'exécution d'un Bookmarklet sur une page. Vous trouverez peut-être préférable d'écrire certains scripts JavaScript dans des extraits de code plutôt que dans le panneau de la console pour des raisons liées à un meilleur environnement d'édition de code. Vos extraits sont sauvegardés dans le stockage local de DevTools.
Pour utiliser des extraits:
console.log ('Bonjour'); dans l'éditeur de code.Vous pouvez trouver un certain nombre d'extraits de code déjà écrits dans ce référentiel d'extraits de DevTools..
Voilà pour la première partie d'une expérience de débogage moderne. Dans la deuxième partie, nous examinerons quelques fonctionnalités de débogage, ainsi que quelques extensions pouvant vous aider..
