Comment modifier les fichiers source directement dans Chrome

Modifier le code source de la page Web directement dans Chrome Browser, en disant au revoir à la boucle de modification fastidieuse - Refresh! Cet article vous guidera comment utiliser les outils de développeur Chrome pour modifier directement les fichiers HTML, CSS et JavaScript et itérer rapidement en développement.

Le flux de travail quotidien des développeurs Web est généralement: écrivez le code HTML, CSS et JavaScript dans l'éditeur, puis ouvrez la page du navigateur, utilisez les outils du développeur pour déboguer après avoir découvert des problèmes, modifier le code et le copier dans le éditeur, puis rechargeant la page… Alors que des outils comme le rechargement chaud simplifient le processus, de nombreux développeurs basculent toujours entre les outils de développeurs et les éditeurs. En fait, Chrome vous permet d'ouvrir et de modifier les fichiers source directement dans le navigateur.

Étape 1: Démarrez l'outil de développeur

Ouvrez Chrome, chargez la page sur le système ou serveur de fichiers local, puis ouvrez les outils du développeur via le menu More Tools, ou appuyez sur F12 ou CTRL / CMD Shift i (selon votre système d'exploitation). Passez à l'onglet Sources pour afficher l'explorateur de fichiers:

Vous pouvez ouvrir et modifier les fichiers CSS et JavaScript directement dans cette vue, mais sachez que ces modifications seront perdues après avoir rafraîchi la page.

Étape 2: Associez le dossier de l'espace de travail

Cliquez sur l'onglet "FileSSystem", puis cliquez sur "Ajouter un dossier à l'espace de travail". Vous serez invité à sélectionner un dossier de travail et il vous sera demandé de permettre à Chrome d'accéder au dossier. Explorer affichera les fichiers du système, vous pouvez cliquer pour ouvrir:

Étape 3: modifier et enregistrer le code

Maintenant, vous pouvez modifier directement le code. Les modifications non enregistrées sont marquées d'un astérisque (*) sur l'étiquette de fichiers.

Les modifications CSS sont mises à jour immédiatement, mais pour HTML et JavaScript, vous devez généralement appuyer sur CTRL / CMD S pour enregistrer le fichier dans le système de fichiers et actualiser le navigateur pour voir l'effet.

Vous pouvez également cliquer avec le bouton droit sur l'étiquette de fichier et sélectionner "Enregistrer sous ..." pour enregistrer une copie du fichier dans un autre emplacement.

Étape 4: Afficher et annuler les modifications

Pour afficher les modifications, cliquez avec le bouton droit sur l'étiquette de fichiers et sélectionnez "Modifications locales ..." dans le menu contextuel:

affichera une vue similaire à Diff. L'icône de flèche dans le coin inférieur gauche du volet annulera toutes les modifications et restaurera le fichier à son état d'origine.

L'outil de développeur de Chrome n'est pas un remplacement complet de votre éditeur de code couramment utilisé, mais c'est toujours un outil très utile pour apporter des modifications rapides ou travailler sur d'autres ordinateurs où l'éditeur n'est pas installé.

Les questions fréquemment posées pour Chrome pour modifier directement les fichiers source

Puis-je modifier le code source dans Chrome?

Oui, vous pouvez modifier directement le code source de la page Web à l'aide des outils de développement intégrés de Chrome. Ouvrez les outils du développeur (appuyez sur F12 ou CTRL Shift i) et accédez à l'onglet "Elements". Trouvez l'élément HTML que vous souhaitez modifier, cliquez avec le bouton droit et sélectionnez Modifier en tant que HTML ou double-cliquez sur le code. Après avoir apporté les modifications, appuyez sur Entrée pour appliquer les modifications et la page sera mise à jour immédiatement. N'oubliez pas que ces modifications sont temporaires et affectent uniquement la session actuelle du navigateur;

Quelles sont les touches de raccourci pour "Modifier en tant que HTML" dans Chrome?

Il n'y a pas de raccourcis spécifiquement pour "Modifier en tant que HTML" dans Chrome Developer Tools. Cependant, vous pouvez utiliser Ctrl Shift C (option CMD C sur Mac) pour activer le mode "Inspecter" et cliquer sur l'élément que vous souhaitez modifier pour obtenir les mêmes fonctionnalités.

Comment modifier les fichiers JS dans Chrome Developer Tools?

Ouvrez l'onglet Sources dans Chrome Developer Tools, recherchez le fichier JavaScript que vous souhaitez modifier, cliquez pour l'ouvrir dans le panneau de l'éditeur de code à droite et apportez des modifications. Une fois le montage terminé, appuyez sur CTRL S (CMD S sur Mac) pour enregistrer les modifications. N'oubliez pas que ces modifications sont temporaires et ne s'appliquent qu'à la session actuelle du navigateur. Pour modifier définitivement le fichier JavaScript d'un site Web, vous devez accéder au serveur hébergeant le fichier et pouvoir le modifier directement sur le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!