Le billet de François – J’écris mes première lignes de code avec Chrome

550 0

Aujourd’hui, tout un chacun peut apprendre à coder avec un ordinateur PC pour seul investissement, aussi modeste soit-il, en installant simplement le navigateur Google Chrome. En effet, cette interface que vous utilisez peut-être tous les jours en cache une seconde, les DevTools, qui donnent un accès total au moteur de l’application et à des outils de développement.

Pour y accéder, il y a bien sûr une entrée dans le menu, mais les habitués préfèrent le raccourci clavier Ctlr+Maj+C ou le clic droit + Inspecter pour ouvrir directement au niveau des lignes correspondant à la zone pointée. Les DevTools de Chrome contiennent de nombreux outils de visualisation, analyse, test et modification dont la console. Ils se présentent sous la forme d’une fenêtre détachable.
Tout le monde le sait dans la profession : la seule façon d’aborder la programmation, c’est de se jeter dedans ; alors, tout de suite une première démo :

Hello World dans la console

Vous pouvez faire cette manip sur n’importe quelle page, mais nous vous recommandons de la faire sur une nouvelle page afin d’être sûr de ne pas avoir de message d’erreur et de ne pas être perturbé par trop de code d’un coup.

Donc, dans une nouvelle page, il suffit de taper Ctlr+Maj+J pour ouvrir directement la console. Là, vous pouvez taper votre première instruction en JavaScript :

console.log("Hello from "+this.navigator.vendor);

Pour une fois, je ne vous recommande pas de faire un copier-coller dans ce cas, car cela vous empêcherait de découvrir la puissance des suggestions automatiques (auto-complétion). Il suffit de taper les lettres « c » et « o », et “console” est à quelques touches vers le bas et une frappe sur la touche Entrée. Je vous laisse voir. Allez doucement pour ne rien louper. Cette console est super puissante.

capture console chrome devtools: hello js sample

Plus d’informations (en Anglais) ici : https://developers.google.com/web/tools/chrome-devtools/console

Un espace de travail

Chrome est le roi du Web, c’est à dire qu’il maîtrise les technologies HTML, CSS et JavaScript, qui servent à faire des pages Web (bien sûr), mais aussi des extensions et plein d’autres choses. Ce sont donc ces technologies que vous pouvez apprendre avec votre navigateur préféré sans avoir à installer quoi que ce soit d’autre.

1. Créer un dossier de travail

N’importe où sur votre disque local, créez un dossier nommé “hello” par exemple.

2. Créer un espace de travail dans Chrome

Retournez dans Chrome ; dans les DevTools, cliquez sur l’onglet “Sources”.

capture chrome devtools: sources tab

Dans cet onglet, cliquez sur le sous-onglet “Filesystem”

capture chrome devtools: sources tab filesystem subtab

Là, cliquez sur “+ Add folder to workspace”, et sélectionnez le dossier créé à l’étape 1.

capture chrome devtools: demande autorisation création workspace

Il vous sera demandé d’autoriser l’accès à ce dossier ; et vous êtes prêt.

3. Créer un fichier

Avec un clic-droit sur le dossier nouvellement ajouté à votre workspace dans Chrome, vous pouvez créer un nouveau fichier.

capture chrome devtools: création d'un nouveau fichier

Nommez-le “hello.html” et collez le code ci-dessous dans l’espace à droite :

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
capture chrome devtools: code ajouté dans nouveau fichier, avant sauvegarde

N’oubliez pas de faire Ctrl+S pour sauvegarder. Dans la capture, il y a une astérix à côté du nom du fichier pour indiquer qu’il n’est pas sauvegardé.

4. Test et modification

Ouvrez le dossier créé à l’étape 1, vous y trouverez le fichier “hello.html” fraîchement créé. Faites un double-clic dessus pour l’ouvrir.

capture du résultat du code créé

Faites Ctrl+Maj+C pour ouvrir les DevTools sur cette page.

capture chrome devtools sur la page "hello" sur l'onglet par défaut : éléments

Cliquez sur l’onglet “Sources”, puis sur le sous-onglet “Page”.

capture chrome devtools: vue "sources - page" du fichier "hello"

Là, vous voyez votre fichier dans son dossier. La petite bulle verte indique que vous travaillez sur le vrai fichier, par opposition à sa copie en cache, et que vos modifications seront prises en compte si vous les sauvegardez.

Donc, ajoutez ce bout de code dans la balise “head” :

<style>
h1 {
    color: blue;
    font-size: 5em;
}
</style>

Après avoir sauvegardé (Ctrl+S) et rechargé (Ctlr+R), voilà le résultat :

capture chrome devtools: résultat après modification du code

En quatre étapes, vous avez créé, testé et modifié votre premier code HTML et CSS. Google propose une initiation (en Anglais) dans le même esprit, mais en un peu plus compliquée, ici : https://developers.google.com/web/tools/chrome-devtools/workspaces/.

A vous de jouer

Pendant une bonne partie de ma carrière, je codais avec ces langage (HTML, CSS, JavaScript) pour réaliser des pages web avec l’aide d’outils dédiés à ce genre de tâche, les IDE (Environnement de développement) comme DreamWeaver. Aujourd’hui, mon IDE, c’est Chrome, avec l’avantage d’avoir des outils de débuggage intégrés puissants et explicites ; des tonnes de raccourcis qui font gagner un temps fou, et des mises à jour toutes les six semaines.

Chrome, c’est le coeur de métier de Google, qui fournit les contenus, l’infrastructure technique, mais également les spécifications des technologies du Web présentes et à venir.

Si vous désirez aller plus loin, la première chose à faire est de vous mettre sérieusement à l’Anglais, car toute la communication, la documentation et même l’entraide sur les forum est dans cette langue. 

Vous trouverez ci-dessous quelques ressources en ligne que Google met à disposition des apprentis codeurs.

Si vous avez trouvé une faute d’orthographe, veuillez nous en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

François

François

Fondateur de l'agence de marketing web Baccon.net et du forum pour Les Usagers De Google En France (ludgef.com)

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :