Installation de Chrome ou Firefox pour les systèmes MacOS et Linux
On va passer maintenant à l’installation d’un navigateur adapté au développement web et mobile. Firefox et Chrome sont les deux navigateurs les plus utilisés dans ce domaine ; personnellement je préfère Chrome, parce qu’il est plus simple et plus performant et c’est avec lui que je ferai toutes les démo par la suite. Si vous avez un Mac, le navigateur par défaut c’est Safari, mais il est moins adapté au dev et je vous conseille d’installer Chrome ; si vous êtes sous Linux, Firefox est déjà préinstallé, mais vous pouvez aussi installer Chrome
Je vous laisse trouver sur Internet la page d’installation du navigateur que vous choisirez
On utilisera souvent les ‘devtools’, qui s’activent avec la touche F12 (demo) Une fenêtre de devtool est relative à une page d’onglet en particulier. Les différents onglets permettent d’examiner le contenu de la page (demo), l’activité réseau (demo), d’avoir accès à l’interpréteur Javascript. Par exemple on peut faire un calcul (1+1) ou appeler une fonction (“les trois mots”.split(" “)) ou interagir avec le contenu de la page (document.title =”ma page“) ou (document.documentElement.textContent =”Hello World!")
Faire du développement front-end, c’est commander avec le langage javascript cette machine que constitue le navigateur. Cette machine dispose de dispositifs de stockage, d’un moteur de rendu 3D, elle a accès au micro, à la caméra etc. de façon de plus en plus normalisée.
On peut ajouter des extensions à Chrome ou Firefox ; pour voir la liste des extensions installées dans Chrome, … Plus -> Plus d’outils -> Extensions (demo)
On va maintenant installer une extension pour Vue3. Pour ça, il faut aller dans le Chrome Web Store :
https://chrome.google.com/webstore/category/extensions?hl=fr
Dans la barre de recherche, taper ‘vuejs devtools’ et choisir la version la plus récente, adaptée à Vue3
