Fermer

mars 13, 2019

Comment utiliser Chrome en tant qu'EDI


Chrome DevTools a parcouru un long chemin et au fil du temps, il a développé les capacités d’un environnement de développement intégré à part entière. Voyez comment vous pouvez commencer à l'utiliser comme un IDE pratique.

Au fil des années, Chrome DevTools est passé de la simple inspection des fichiers DOM, CSS et JavaScript à un environnement de développement intégré doté d'un accès en écriture aux fichiers de projet locaux. Dans cet article, nous allons montrer comment vous pouvez facilement utiliser Chrome en tant qu'EDI. Nous allons créer des fichiers de projet locaux, les ajouter à Chrome Workspace et éditer nos fichiers de projet pour que les modifications locales soient effectuées à partir du navigateur.

Configuration des fichiers de projet

Pour les besoins de cette démonstration, créons un dossier de projet avec un Fichier HTML, un fichier CSS et un fichier JavaScript. Pour cela, vous pouvez créer le répertoire du projet et les fichiers en exécutant les commandes suivantes:

 // créer un dossier  dans  le Bureau
$  mkdir  Chrome-Dev-IDE

// change dans le dossier créé
$  cd  Chrome-Dev-IDE

// crée un autre dossier  'src' 
$  mkdir  src

// crée un autre dossier  'img'   pour les images 
$  mkdir  img

// changement dans le dossier  'src' 
$  cd  src

// Crée trois fichiers de projet
$  touch  index.js
$  touch  index.html
$  touch  index.css

Nous utiliserons VSCode pour héberger localement nos fichiers de projet; Cependant, nous allons interagir avec Google Chrome. À présent, lorsque nous ouvrirons le dossier de projet en VSCode, sa structure sera la suivante:

À des fins de démonstration, mettons à jour ces fichiers avec des extraits de code de démonstration. Ouvrez le fichier index.html et mettez-le à jour avec le code ci-dessous:

 
  < html > 
  < head > 
  < meta   name  =  " viewport "    content  =  " Largeur = Largeur du périphérique, échelle initiale = 1  " > 
  < link   rel  = "  feuille de style  "   href  =  " index.css "  > 
  </  head > 
  < corps > 
  < br > 
  < div   class  =  " rangée "  > 
  <
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link