Cet article populaire a été mis à jour en 2020. Pour en savoir plus sur l’amélioration de votre flux de travail de développement avec des outils, lisez Developer Essentials: Tools sur SitePoint Premium.
la journée typique d’un développeur web consiste à créer des pages Web HTML avec CSS et JavaScript associés dans leur éditeur préféré. Le workflow:
- ouvrez la page hébergée localement dans un navigateur.
- le Jure.
- ouvrez DevTools pour étudier les problèmes de mise en page et de fonctionnalité.,
- modifiez les éléments HTML, les propriétés CSS et le code JavaScript pour résoudre les problèmes.
- recopiez ces modifications dans l’éditeur et revenez à l’étape #1.
alors que des outils tels que le rechargement en direct ont facilité ce processus, de nombreux développeurs continuent à modifier le code à la fois dans DevTools et dans 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 soit actualisé lorsque des modifications de fichier se produisent).,
Étape 1: Lancez Developer Tools
ouvrez Chrome, chargez une page à partir de votre système de fichiers/serveur local et ouvrez Developer Tools à partir du menu plus d’outils ou appuyez sur F12 ou Ctrl / Cmd + Maj + I en fonction de votre système. Accédez à L’onglet Sources pour examiner l’Explorateur de fichiers:
Vous pouvez ouvrir et modifier des fichiers CSS et JavaScript dans cette vue, mais toute modification sera perdue 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 sur votre système, qui peut être ouvert avec un seul clic:
Étape 3: Modifier et Enregistrer Votre Code
Vous pouvez maintenant sauter dans et modifier votre code. Les modifications non enregistrées sont marquées d’un astérisque dans l’onglet Fichier.
les modifications CSS sont mises à jour instantanément 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 actualiser le navigateur.,
Notez que vous pouvez aussi cliquer à droite sur l’onglet fichier et sélectionnez Enregistrer sous… pour enregistrer une copie du fichier ailleurs.
Etape 4: Examen et d’Annuler les Modifications
Pour examiner les modifications, cliquez droit sur un fichier et choisissez l’onglet modifications Locales… dans le menu contextuel:
Un type diff vue s’affiche. L’icône de flèche en bas à gauche du volet annulera toutes les modifications et rétablira le fichier dans son état d’origine.,
Les outils de développement de Chrome ne remplaceront jamais complètement votre éditeur préféré, mais ils peuvent être utiles lorsque vous effectuez des modifications rapides ou travaillez à partir d’un autre PC sur lequel votre éditeur peut ne pas être installé.