Afficher ou modifier des fichiers sources à l’aide de l’outil source rapide

Utilisez l’outil Source rapide pour afficher ou modifier des fichiers sources en même temps que l’affichage d’un outil autre que l’outil Sources . L’outil Source rapide affiche toujours les mêmes fichiers ouverts dans l’outil Sources.

L’emplacement principal pour afficher les fichiers sources dans DevTools se trouve dans l’outil Sources . Mais parfois, vous devez accéder à d’autres outils, tels que des éléments ou une console, lors de l’affichage ou de la modification de vos fichiers sources. Utilisez l’outil Source rapide , qui s’ouvre par défaut dans le panneau Affichage rapide en bas de DevTools.

Utiliser l’outil Source rapide conjointement avec l’outil Sources

Pour afficher l’outil Source rapide dans l’affichage rapide en bas de DevTools, un outil autre que l’outil Sources doit être ouvert dans la barre d’activité en haut de DevTools.

L’outil Source rapide fournit un autre affichage des fichiers ouverts dans l’outil Sources . L’outil Source rapide possède un sous-ensemble de fonctionnalités. Pour obtenir toutes les fonctionnalités, utilisez l’outil Sources .

Si vous ouvrez ou fermez un fichier dans un outil, le fichier est ouvert ou fermé dans l’autre outil. Dans les deux outils, il existe un onglet pour chaque fichier ouvert.

Modifier les fichiers sources locaux dans DevTools en sélectionnant un dossier Espace de travail

Il s’agit d’un tutoriel de bout en bout de toutes les étapes pour illustrer l’outil Source rapide , à l’aide de l’application web ToDo dans le dépôt MicrosoftEdge/Demos .

En sélectionnant un dossier local en tant qu’espace de travail dans l’outil Sources , vous pouvez ensuite modifier des fichiers à partir de l’outil Source rapide en même temps que l’affichage d’un autre outil et les enregistrer sur votre lecteur local. De cette façon, vous pouvez modifier des fichiers dans l’outil Source rapide tout en utilisant un autre outil, tel que Elements ou Network, et faire en sorte que vos modifications soient enregistrées dans le fichier source correspondant sur votre lecteur local.

Pour modifier les fichiers sources dans l’outil Source rapide , procédez comme suit :

1. Avoir accès aux fichiers sources de la page web localement, tels qu’un dépôt cloné.

2. Sous l’onglet Espace de travail de l’outil Sources (), ajoutez un dossier local de fichiers sources.

3. Sous l’onglet Espace de travail , ouvrez un fichier, tel qu’un .js fichier.

4. Dans la barre d’activité, sélectionnez un outil autre que l’outil Sources , tel que l’outil Éléments .

5. Dans le panneau Affichage rapide en bas de DevTools, ouvrez l’outil Source rapide . Le fichier ouvert .js est affiché dans un éditeur simplifié et l’outil Éléments est toujours affiché.

Ces étapes sont détaillées dans le tutoriel ci-dessous.

Avoir des fichiers sources locaux, tels qu’un référentiel cloné

Pour utiliser l’outil Source rapide afin d’enregistrer les modifications localement, vous devez disposer de fichiers sources locaux qui correspondent aux fichiers du serveur web. Assurez-vous qu’il existe des fichiers sources sur votre lecteur local, qui correspondent aux fichiers temporaires retournés par le serveur web.

Par exemple, si ce n’est déjà fait, clonez le dépôt MicrosoftEdge/Demos sur votre lecteur local, comme suit :

1. Si ce n’est pas déjà fait, téléchargez git et installez-le.

2. Si ce n’est pas déjà fait, installez une version à jour de Node.js et npm à partir de Node.js.

3. Accédez à MicrosoftEdge / Démonstrations dans une nouvelle fenêtre ou un nouvel onglet.

4. Cliquez sur le bouton déroulant Code .

5. Cliquez sur le bouton Copier l’URL dans le Presse-papiers .

   

   L’URL est copiée dans le Presse-papiers : https://github.com/MicrosoftEdge/Demos.git

   Ou, si GitHub Desktop est installé, cliquez sur Ouvrir avec GitHub Desktop pour cloner le dépôt, puis ignorez l’étape d’invite de commandes ci-dessous.

   Vous pouvez également utiliser le volet Contrôle de code source de Visual Studio Code pour cloner le dépôt et ignorer l’étape d’invite de commandes ci-dessous.

6. En supposant que git soit installé, ouvrez une invite de commandes.

7. Clonez le référentiel sur votre lecteur local, en entrant la chaîne d’URL que vous avez copiée à partir du dépôt GitHub. Si vous utilisez une invite de commandes :

   # example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

   Pour plus d’informations sur le clonage d’un dépôt, consultez :

   • Clonez le dépôt Demos Edge sur votre lecteur dans Exemple de code pour DevTools.
   • Clonez le référentiel WebView2Samples dans Configurer votre environnement de développement pour WebView2. Affiche un autre exemple de dépôt, mais montre les étapes de plusieurs outils.
   • Clonage d’un dépôt - Documentation GitHub.

Vous disposez maintenant d’un dossier local de fichiers sources (comme /demo-to-do/) qui correspondent aux fichiers sur le serveur web.

Passez à la section suivante.

Démarrer un serveur localhost

1. Accédez à une invite de commandes, telle que l’interpréteur de commandes git bash ou le volet Terminal dans Microsoft Visual Studio Code.

2. Accédez au répertoire cloné /demo-to-do/ , par C:\Users\localAccount\GitHub\Demos\demo-to-do\exemple .

   Si vous utilisez l’interpréteur de commandes git bash, il s’agit d’un interpréteur de commandes UNIX. Par conséquent, même sur Windows, vous devez encapsuler un chemin d’accès de répertoire comportant des barres obliques inverses entre guillemets, ou utiliser des barres obliques vers l’avant plutôt que des barres obliques inverses.

3. Créez une branche de travail nommée « test » et basculez vers celle-ci (pour éviter de modifier les fichiers de la démonstration dans la branche « main ») :

   git checkout -b test
   

   Cela équivaut à :

   git branch test
   git switch test
   

4. Exécutez l’une des commandes suivantes pour démarrer le serveur web :

   # Node.js option
   cd ~/GitHub/demos/demo-to-do
   npx http-server  # Node.js
   

   Pour plus d’informations et d’options, consultez Démarrer le serveur (npx http-server) dans Installation de l’extension DevTools pour Visual Studio Code.

   # Python 2 option
   cd ~/GitHub/demos/demo-to-do
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/GitHub/demos/demo-to-do
   python -m http.server  # Python 3
   

5. Ouvrez un onglet dans Microsoft Edge et accédez à la version hébergée localement du site. Vous devez pouvoir y accéder à l’aide de localhost:8080:

   

   Une autre URL équivalente courante est http://0.0.0.0:8080. Le numéro de port par défaut pour l’option de serveur Python est 8000. Le numéro de port exact peut être différent.

   La page web De démonstration des espaces de travail DevTools s’ouvre.

Voir aussi :

• Exécution d’un serveur HTTP local simple dans Comment configurer un serveur de test local ? sur MDN - affiche Python.

Passez à la section suivante.

Sélectionner un dossier local de fichiers sources comme espace de travail

1. Continuez à partir de ci-dessus, cliquez avec le bouton droit sur la page web de démonstration, puis sélectionnez Inspecter.

   DevTools s’ouvre.

2. Dans la barre d’activité en haut de DevTools, sélectionnez l’outil Sources (icône de ), sélectionnez l’onglet Espace de travail (regroupé avec l’onglet Page ), puis dans l’onglet Espace de travail , cliquez sur le bouton Ajouter un dossier .

   La boîte de dialogue Sélectionner un dossier s’ouvre.

3. Accédez à un dossier, tel que C:\Users\localAccount\GitHub\Demos\demo-to-do, puis cliquez sur le bouton Sélectionner un dossier .

   En haut de DevTools, un message indique que DevTools demande un accès complet au chemin d’accès<>.

4. Cliquez sur le bouton Autoriser .

   L’arborescence de demo-to-do fichiers apparaît sous l’onglet Espace de travail de l’outil Sources . Les fichiers HTML, JS et CSS ont un point vert « mappé ».

5. Sous l’onglet Espace de travail , développez l’arborescence de fichiers, puis cliquez sur un ou plusieurs fichiers, tels que to-do.js.

   Le fichier s’ouvre dans l’outil Sources :

   

Ouvrir l’outil Source rapide et modifier un fichier

Supposons que vous souhaitiez continuer à afficher l’outil Éléments , mais que vous souhaitiez afficher et modifier simultanément les fichiers sources qui ont été ouverts via l’outil Sources .

1. Pour poursuivre, dans la barre d’activité en haut de DevTools, sélectionnez un autre outil que l’outil Sources (icône de ), tel que l’outil Éléments ().

2. Si la barre d’outils Affichage rapide n’est pas affichée en bas de DevTools, appuyez sur Échap.

3. Dans la barre d’outils Affichage rapide en bas de DevTools, cliquez sur le bouton Plus d’outils , puis sélectionnez Source rapide.

   L’outil Source rapide s’ouvre dans l’affichage rapide en bas de DevTools :

   

   todo.js s’affiche, car ce fichier est ouvert dans l’outil Sources .

4. Dans la page web de démonstration To Do, supprimez toutes les tâches.

5. Cliquez sur le panneau Source rapide , puis appuyez sur Ctrl+F.

   Dans l’outil Source rapide , l’interface utilisateur Rechercher s’affiche.

6. Entrez aucune tâche, puis appuyez sur Entrée.

7. Dans la ligne de code, remplacez par no tasks0 tasks.

   Un astérisque apparaît sous l’onglet nom de fichier.

8. Appuyez sur Ctrl+S.

   L’astérisque est supprimé de l’onglet nom de fichier.

9. Actualisez la page web de démonstration (Ctrl+R).

10. Si la page web rendue ne passe pas de « Non » à « 0 » et qu’il n’y a plus de point vert « mappé » sous l’onglet Nom de fichier JS, cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualisation en dur (Ctrl+Maj+R).

    La page web rendue passe de « Non » à « 0 », et il y a un point vert « mappé » sous l’onglet Nom de fichier JS.

    

Désormais, lorsque vous modifiez les fichiers du dossier dans DevTools, les modifications ne sont pas seulement apportées au fichier temporaire retourné par le serveur, mais sont également enregistrées dans les fichiers sources sur votre lecteur local. Vous pouvez modifier le fichier à partir de l’outil Source rapide en même temps que l’affichage d’un autre outil (ou à partir de l’outil Sources ).

Il s’agit de la fin des étapes du didacticiel.

Voir aussi :

• Ajoutez un dossier local à l’espace de travail pour utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque dans Vue d’ensemble de l’outil Sources.
• Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources)
  • Étape 6 : Enregistrer une modification JavaScript sur le disque dans le didacticiel Espace de travail (onglet Espace de travail de l’outil Sources)

Ouvrir un fichier à l’aide du menu de commandes

L’ouverture d’un fichier à l’aide du menu Commandes ouvre ce fichier dans l’outil Source rapide et l’outil Sources .

Pour ouvrir le menu commande, effectuez l’une des opérations suivantes :

• Sélectionnez Personnaliser et contrôler la commande d’exécution DevTools>.

• Appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS).

• Cliquez sur le lien Exécuter la commande dans l’outil Source rapide (ou l’outil Sources ) vide.

Pour ouvrir un fichier à l’aide de l’invite Ouvrir un fichier du menu Commandes, effectuez l’une des opérations suivantes :

• Sélectionnez l’outil> SourcesPlus d’options (en regard de l’onglet Page) >Ouvrir un fichier.

• Sélectionnez Personnaliser et contrôler DevTools>Ouvrir le fichier.

• Appuyez sur Ctrl+P (Windows, Linux) ou Cmd+P (macOS).

• Lorsque l’outil Source rapide (ou l’outil Sources ) est vide, cliquez sur le lien Ouvrir un fichier dans les instructions de l’outil :

  

  L’invite Ouvrir un fichier du menu Commandes s’affiche.

  Pour afficher le lien Ouvrir un fichier dans les instructions du panneau, vous devrez peut-être faire défiler vers le bas ou faire glisser le séparateur Affichage rapide vers le haut pour agrandir le panneau Affichage rapide .

Raccourcis clavier dans l’outil Source rapide

L’outil Source rapide dispose d’une interface utilisateur simplifiée. Utilisez ces raccourcis clavier.

• Ctrl+F - Rechercher.

• Ctrl+S - Enregistrer. S’il n’existe plus de point vert « mappé » sur le nom de fichier HTML, JS ou CSS, cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualiser en dur (Ctrl+Maj+R).

• Ctrl+P : ouvrez un fichier à l’aide du menu Commandes. Cela revient à aller à l’outil Sources , puis à cliquer sur un fichier sous l’onglet Espace de travail .

Fermer un fichier

Pour fermer un fichier, cliquez sur le bouton x dans l’onglet du fichier.

Le fichier est fermé dans l’outil Source rapide et l’outil Sources .

Voir aussi

• Vue d’ensemble de l’outil Sources
  • Outil source rapide, pour afficher les fichiers sources lors de l’utilisation d’un autre outil dans Vue d’ensemble de l’outil Sources
  • Suivre les modifications apportées aux fichiers à l’aide de l’outil Modifications