Les outils de développement web

Les panneaux des outils du navigateur et le symptôme que chacun éclaire, le gestionnaire de paquets et son fichier de dépendances, le serveur de développement, l'empaqueteur, le linter et le formateur.

  • 25 cartes
  • 4 thèmes
  • Gratuit

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation

Quelques cartes du deck

  • Outils de développement du navigateur : de quoi s'agit-il ?

    Voir la réponse

    Panneaux intégrés au navigateur pour inspecter une page : Éléments (le DOM et le CSS), Console (messages et erreurs), Réseau (requêtes), Sources (code et points d'arrêt), Performance (temps passé).

    Chaque panneau répond à un type de symptôme : choisir le bon évite de chercher au hasard.

  • Quelle commande ajoute D3 aux dépendances de package.json et l'installe ?

    • npm install d3
    • npm run d3
    • npm publish d3
    • npm start d3
    Voir la réponse

    npm install d3

    npm install <paquet> télécharge le paquet dans node_modules et l'inscrit dans package.json. run lance un script du projet, start démarre le projet et publish envoie son propre paquet au registre.

  • Le fichier … liste les dépendances d'un projet ; le dossier … contient leur code installé et ne se versionne pas.

    Voir la réponse

    Le fichier package.json liste les dépendances d'un projet ; le dossier node_modules contient leur code installé et ne se versionne pas.

    Un collègue clone le dépôt, lance npm install, et le dossier se reconstruit à partir du fichier : on ne copie pas des milliers de fichiers dans Git.

  • Point d'arrêt : de quoi s'agit-il ?

    Voir la réponse

    Marque posée sur une ligne de code qui suspend l'exécution juste avant cette ligne, pour inspecter les variables et avancer pas à pas.

    Il remplace une série de console.log : on voit toutes les valeurs au moment exact où le programme s'arrête.

  • Un collègue clone ton projet et obtient Error: Cannot find module 'd3' au lancement. D3 est bien listé dans package.json. Que faire ?

    • Lancer npm install dans le dossier : il recrée node_modules d'après package.json
    • Installer D3 en global avec npm install -g d3
    • Te demander de lui envoyer ton dossier node_modules
    • Lancer npm start, qui installe ce qui manque avant de démarrer
    Voir la réponse

    Lancer npm install dans le dossier : il recrée node_modules d'après package.json

    node_modules n'est pas dans le dépôt : sur sa machine, les dépendances n'ont jamais été installées, d'où MODULE_NOT_FOUND. package.json suffit à tout réinstaller. Une installation globale ne résout pas les imports du projet, et npm start lance le projet sans rien installer.