introduction
Les navigateurs modernes ont des outils de développement intégrés pour travailler avec JavaScript et d’autres technologies Web. Ces outils incluent la console, qui est similaire à une interface de shell, ainsi que des outils permettant d’inspecter le DOM, de déboguer et d’analyser l’activité du réseau.
La console peut être utilisée pour enregistrer des informations dans le cadre du processus de développement JavaScript, ainsi que pour vous permettre d’interagir avec une page Web en exécutant des expressions JavaScript dans le contexte de la page. Pour l’essentiel, la console vous permet d’écrire, de gérer et de surveiller JavaScript à la demande.
Ce didacticiel explique comment utiliser la console en JavaScript dans le contexte d’un navigateur et fournit une vue d’ensemble des autres outils de développement intégrés que vous pouvez utiliser dans le cadre de votre processus de développement Web.
Travailler avec la console dans un navigateur
La plupart des navigateurs Web modernes prenant en charge les langages HTML et XHTML basés sur des normes vous donneront accès à une console de développeur sur laquelle vous pourrez travailler avec JavaScript dans une interface similaire à un terminal. Nous verrons comment accéder à la console dans Firefox et Chrome.
Firefox
Pour ouvrir la console Web dans FireFox, vous pouvez accéder au menu ☰ situé dans le coin supérieur droit, à côté de la barre d’adresse.
De là, cliquez sur le bouton Développeur symbolisé par l’icône représentant une clé, ce qui ouvrira le menu Développeur Web. Cela étant ouvert, cliquez sur l’élément de menu de la console Web.
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-menu.png [Élément de menu de la console Web Firefox]
Une fois que vous le ferez, un plateau s’ouvrira au bas de la fenêtre de votre navigateur:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-tray.png [Élément de la barre de la console Web de Firefox]
Vous pouvez également entrer dans la console Web avec le raccourci clavier + CTRL + + + SHIFT + + + K + sous Linux et Windows, ou + COMMAND + + + + + OPTION + + + K + `sous macOS.
Maintenant que nous avons accédé à la console, nous pouvons commencer à y travailler en JavaScript.
Chrome
Pour ouvrir la Console JavaScript dans Chrome, vous pouvez naviguer dans le menu situé en haut à droite de la fenêtre de votre navigateur, indiquée par trois points verticaux. dans une rangée. À partir de là, vous pouvez sélectionner Autres outils, puis Outils de développement.
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/chrome-developer-tools-menu.png [Élément de menu des outils de développement Chrome]
Cela ouvrira un panneau où vous pourrez cliquer sur * Console * dans la barre de menus supérieure pour afficher la console JavaScript si elle n’est pas déjà mise en surbrillance:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/chrome-console-tray.png [Élément de menu des outils du développeur Chrome]
Vous pouvez également accéder à la console JavaScript en utilisant le raccourci clavier + CTRL + + + SHIFT + + + J + sous Linux ou Windows, ou + COMMAND + + + + + + + + J + sous macOS, ce qui mettra immédiatement l’accent sur la console.
Maintenant que nous avons accédé à la console, nous pouvons commencer à y travailler en JavaScript.
Travailler dans la console
Dans la console, vous pouvez saisir du code JavaScript.
Commençons par une alerte qui affiche la chaîne + Hello, World! +:
alert("Hello, World!");Une fois que vous avez appuyé sur la touche + ENTER + suivant votre ligne de JavaScript, vous devriez voir apparaître l’alerte suivante dans votre navigateur:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Exemple d’alerte JavaScript par la console]
Notez que la console affichera également le résultat de l’évaluation d’une expression, qui se lira comme suit: «+ undefined +» lorsque l’expression ne retourne pas explicitement quelque chose.
Plutôt que d’avoir des alertes contextuelles sur lesquelles nous devons continuer à cliquer, nous pouvons utiliser JavaScript en le connectant à la console avec + console.log +.
Pour imprimer la chaîne + Hello, World! +, Nous pouvons taper ce qui suit dans la console:
console.log("Hello, World!");Dans la console, vous recevrez le résultat suivant:
OutputHello, World!Nous pouvons également utiliser JavaScript pour effectuer des calculs dans la console:
console.log(2 + 6);Output8Vous pouvez également essayer des calculs plus compliqués:
console.log(34348.2342343403285953845 * 4310.23409128534);Output148048930.17230788De plus, nous pouvons travailler sur plusieurs lignes avec des variables:
let d = new Date();
console.log("Today's date is " + d);OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)Si vous devez modifier une commande que vous avez passée via la console, vous pouvez taper la touche flèche haut ↑ de votre clavier pour récupérer la commande précédente. Cela vous permettra d’éditer la commande et de l’envoyer à nouveau.
La console JavaScript vous fournit un espace pour tester le code JavaScript en temps réel en vous permettant d’utiliser un environnement similaire à une interface terminal shell.
Travailler avec un fichier HTML
Vous pouvez également travailler dans le contexte d’un fichier HTML ou d’une page à rendu dynamique dans la console. Cela vous permet d’expérimenter du code JavaScript dans le contexte de HTML, CSS et JavaScript existants.
N’oubliez pas que dès que vous rechargerez une page après l’avoir modifiée avec la console, elle reviendra à son état antérieur à la modification du document. Veillez donc à enregistrer toutes les modifications que vous souhaitez conserver ailleurs.
Prenons un document HTML vierge, tel que le fichier + index.html + suivant pour comprendre comment utiliser la console pour le modifier:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>Si vous enregistrez le fichier HTML ci-dessus et le chargez dans le navigateur de votre choix, vous devriez voir une page vierge avec le titre de la page: + date du jour +.
Vous pouvez ensuite ouvrir la console et commencer à utiliser JavaScript pour modifier la page. Nous allons commencer par utiliser JavaScript pour insérer un en-tête dans le code HTML.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"Vous recevrez le résultat suivant sur la console:
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"Et à ce stade, votre page devrait ressembler à ceci:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-plain.png [Exemple de date standard sur la console JavaScript]
Nous pouvons également modifier le style de la page, comme la couleur de fond:
document.body.style.backgroundColor = "lightblue";Output"lightblue"Ainsi que la couleur du texte sur la page:
document.body.style.color = "white";Output"white"Maintenant, votre page ressemblera à quelque chose comme ça:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-style.png [Exemple de date de style de console JavaScript]
À partir de là, vous pouvez créer un élément de paragraphe + <p> +:
let p = document.createElement("P");Avec cet élément créé, vous pouvez ensuite créer un nœud de texte que nous pourrons ensuite ajouter au paragraphe:
let t = document.createTextNode("Paragraph text.");Nous allons ajouter le noeud de texte en l’ajoutant à la variable + p +:
p.appendChild(t);Et enfin, ajoutez + p + avec son paragraphe + <p> + et son noeud de texte ajouté au document:
document.body.appendChild(p);Une fois ces étapes terminées, votre page HTML + index.html + ressemblera à ceci:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-with- paragraph.png [Date de la console JavaScript avec un exemple de paragraphe]
La console vous fournit un espace pour expérimenter la modification de pages HTML, mais il est important de garder à l’esprit que vous ne modifiez pas le document HTML lorsque vous effectuez des opérations dans la console. Dans ce cas, une fois la page rechargée, un document vierge apparaîtra.
Comprendre les autres outils de développement
En fonction des outils de développement du navigateur que vous utilisez, vous pourrez utiliser d’autres outils pour vous aider dans votre processus de développement Web. Examinons quelques-uns de ces outils.
DOM - Modèle d’objet de document
Chaque fois qu’une page Web est chargée, le navigateur dans lequel il se trouve crée un document D ocument O objet M odel ou * DOM * de la page.
Le DOM est une arborescence d’objets et affiche les éléments HTML dans une vue hiérarchique. L’arborescence DOM peut être visualisée dans le panneau * https: //developer.mozilla.org/en-US/docs/Tools/Page_Inspector [Inspector] * de Firefox ou dans le * https: //developers.google.com/web. / tools / chrome-devtools / inspect-styles / [Elements] * dans Chrome.
Ces outils vous permettent d’inspecter et d’éditer des éléments DOM, mais également d’identifier le code HTML associé à un aspect d’une page donnée. Le DOM peut vous indiquer si un extrait de texte ou une image possède un attribut ID et peut vous permettre de déterminer la valeur de cet attribut.
La page que nous avons modifiée ci-dessus aurait une vue DOM similaire à celle-ci avant de recharger la page:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-dom-example.png [Exemple de JavaScript DOM]
De plus, vous verrez les styles CSS dans un panneau latéral ou sous le panneau DOM, ce qui vous permettra de voir quels styles sont utilisés dans le document HTML ou via une feuille de style CSS. Voici à quoi ressemble notre exemple de style de corps ci-dessus dans l’inspecteur de Firefox:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-css-example.png [Exemple de JavaScript CSS]
Pour éditer en direct un nœud DOM, double-cliquez sur un élément sélectionné et apportez les modifications. Pour commencer, par exemple, vous pouvez modifier une balise + <h1> + et en faire une balise + <h2> +.
Comme avec la console, si vous rechargez la page, vous revenez à l’état enregistré du document HTML.
Réseau
L’onglet * Réseau * des outils de développement intégrés à votre navigateur permet de surveiller et d’enregistrer les requêtes réseau. Cet onglet vous indique les requêtes réseau du navigateur, notamment lors du chargement d’une page, la durée de chaque requête et fournit les détails de chacune de ces requêtes. Cela peut être utilisé pour optimiser les performances de chargement de page et les problèmes de demande de débogage.
Vous pouvez utiliser l’onglet Réseau à côté de la console JavaScript. En d’autres termes, vous pouvez commencer à déboguer une page avec la console, puis basculer sur l’onglet Réseau pour voir l’activité du réseau sans recharger la page.
Pour en savoir plus sur l’utilisation de l’onglet Réseau, consultez working avec le Moniteur réseau de Firefox ou https://developers.google. com / web / outils / chrome-devtools / performance réseau / [commencer à analyser les performances réseau avec les outils de développement de Chrome].
Conception sensible
Lorsque les sites Web sont réactifs, ils sont conçus et développés pour ressembler et fonctionner correctement sur une gamme d’appareils différents: téléphones mobiles, tablettes, ordinateurs de bureau et ordinateurs portables. La taille de l’écran, la densité de pixels et le toucher tactile sont des facteurs à prendre en compte lors du développement d’un périphérique à l’autre. En tant que développeur Web, il est important de garder à l’esprit les principes de conception réactive afin que vos sites Web soient entièrement accessibles aux internautes, quel que soit le périphérique auquel ils ont accès.
Firefox et Chrome fournissent tous deux des modes permettant de s’assurer que les principes de conception réactive sont pris en compte lorsque vous créez et développez des sites et des applications pour le Web. Ces modes émulent différents périphériques que vous pouvez étudier et analyser dans le cadre de votre processus de développement.
En savoir plus sur Responsive Design Mode de Firefox ou https://developers.google.com/web/tools/chrome-devtools/device- de Chrome sur Chrome mode / [Mode appareil] pour en savoir plus sur la manière d’utiliser ces outils pour assurer un accès plus équitable aux technologies Web.
Conclusion
Ce tutoriel fournit une vue d’ensemble de l’utilisation d’une console JavaScript dans les navigateurs Web modernes, ainsi que des informations sur d’autres outils de développement que vous pouvez utiliser dans votre flux de travail.
Pour en savoir plus sur JavaScript, consultez les types data ou https://www.digitalocean.com/. communauté / tutoriels / une-introduction-à-jquery [jQuery] ou https://www.digitalocean.com/community/tutorials/how-to-make-a-bar-chart-with-javascript-and-the-d3 -Bibliothèques [D3].