Fermer

janvier 7, 2020

Comment modifier des fichiers source directement dans Chrome –


Cet article populaire a été mis à jour en 2020.

La journée type d'un développeur Web consiste à créer des pages Web HTML avec CSS et JavaScript associés dans son éditeur préféré. Le flux de travail:

  1. Ouvrez la page hébergée localement dans un navigateur.
  2. Jurez.
  3. Ouvrez DevTools pour étudier les problèmes de mise en page et de fonctionnalité.
  4. Ajustez les éléments HTML, les propriétés CSS et le code JavaScript pour corriger le
  5. Copiez ces modifications dans l'éditeur et revenez à l'étape 1.

Bien que des outils tels que le rechargement en direct aient facilité ce processus, de nombreux développeurs continuent de modifier le code dans DevTools et leur éditeur.

Cependant, il est possible d'ouvrir et de modifier des fichiers source directement dans Chrome. Toutes les modifications que vous apportez sont enregistrées dans le système de fichiers et mises à jour dans l'éditeur ( en supposant qu'il s'actualise lorsque des modifications de fichiers se produisent ).

Ouvrez Chrome, chargez une page à partir de votre système / serveur de fichiers local et ouvrez Outils de développement dans le menu Plus d'outils ou appuyez sur F12 ou Ctrl / Cmd + Décalage + I selon votre système. Accédez à l'onglet Sources pour examiner l'explorateur de fichiers:

 Sources Chrome DevTools

Vous pouvez ouvrir et modifier des fichiers CSS et JavaScript dans cette vue, mais toutes les modifications seront apportées perdu dès que vous actualisez la page.

Étape 2: associer un dossier à l'espace de travail

Cliquez sur l'onglet Système de fichiers puis cliquez sur + Ajouter un dossier à l'espace de travail . Vous serez invité à localiser votre dossier de travail et Chrome vous demandera de confirmer que vous autorisez l'accès. L'explorateur affiche les fichiers de votre système qui peuvent être ouverts en un seul clic:

 Système de fichiers Chrome DevTools

Étape 3: Modifier et enregistrer votre code

Vous pouvez maintenant accéder à votre code et le modifier. Les modifications non enregistrées sont marquées d'un astérisque sur l'onglet fichier.

Les modifications CSS sont instantanément mises à jour mais, dans le cas de HTML et JavaScript, vous devrez normalement appuyer sur Ctrl / Cmd + S pour enregistrer le fichier dans le système de fichiers, puis actualisez le navigateur.

 Édition de fichiers Chrome DevTools

Notez que vous pouvez également cliquer avec le bouton droit sur l'onglet fichier et sélectionner Enregistrer en tant que… pour enregistrer une copie du fichier ailleurs.

Étape 4: Vérifier et annuler les modifications

Pour revoir les modifications, cliquez avec le bouton droit sur un onglet de fichier et choisissez Modifications locales… dans le menu contextuel:

 Modifications de Chrome DevTools

Une vue semblable à un diff s'affiche. L'icône de flèche en bas à gauche du volet annulera toutes les modifications et ramènera le fichier à son état d'origine.

Les outils de développement de Chrome ne remplaceront jamais complètement votre éditeur préféré, mais cela peut être utile lorsque vous êtes apporter des modifications rapides ou travailler à partir d'un autre PC sur lequel votre éditeur peut ne pas être installé.




Source link