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 qu’un outil autre que l’outil Sources . L’outil Source rapide affiche toujours les mêmes fichiers que ceux ouverts dans l’outil Sources .

L’emplacement principal pour afficher les fichiers sources dans DevTools est l’outil Sources . Mais parfois, vous devez accéder à d’autres outils, tels que Elements ou 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 Aperçu rapide en bas de DevTools.

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

Pour afficher l’outil Source rapide en mode Rapide au 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 offre un autre affichage des fichiers ouverts dans l’outil Sources . L’outil Source rapide comporte un sous-ensemble de fonctionnalités. Pour les fonctionnalités complètes, 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 y a un onglet pour chaque fichier ouvert.

Modifier des fichiers sources locaux dans DevTools en sélectionnant un dossier d’espace de travail

Il s’agit d’un tutoriel de bout en bout de toutes les étapes pour démontrer l’outil Quick Source , à l’aide de l’application web ToDo dans le référentiel MicrosoftEdge/Demos .

En sélectionnant un dossier local comme espace de travail dans l’outil Sources , vous pouvez modifier des fichiers à partir de l’outil Source rapide tout en affichant un autre outil, et enregistrer ces modifications sur votre disque local. De cette façon, vous pouvez modifier des fichiers dans l’outil Source rapide tout en utilisant un autre outil, tel que Éléments ou Réseau, et enregistrer vos modifications dans le fichier source correspondant sur votre disque local.

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

1. Accès local aux fichiers sources de la page web, tels qu’un référentiel cloné.

2. Dans l’onglet Espace de travail de l’outil Sources (icône de ), ajoutez un dossier local de fichiers sources.

3. Dans 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 Aperçu rapide au bas de DevTools, ouvrez l’outil Source rapide . Le fichier ouvert .js s’affiche dans un éditeur simplifié et l’outil Éléments reste présent.

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

Disposer de fichiers sources locaux, tels qu’un référentiel cloné

Pour enregistrer les modifications localement à l’aide de l’outil Source rapide , vous devez disposer de fichiers sources locaux qui correspondent aux fichiers du serveur web. Assurez-vous qu’il existe des fichiers sources sur votre disque local, qui correspondent aux fichiers transitoires renvoyés par le serveur web.

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

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

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

3. Accédez au référentiel MicrosoftEdge/Demos 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 référentiel, et sauter l’étape d’invite de commande ci-dessous.

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

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

7. Clonez le référentiel sur votre disque local, en entrant la chaîne d’URL que vous avez copiée à partir du référentiel 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 référentiel « MicrosoftEdge/Demos » sur votre lecteur dans Exemple de code pour DevTools.
   • Clonez le dépôt WebView2Samples dans Configurez 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 référentiel - Documents GitHub.

Vous disposez maintenant d’un dossier local de fichiers sources (par exemple /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/ , tel que C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   Si vous utilisez le shell git bash, c’est un shell UNIX, donc même sur Windows, vous devez encapsuler un chemin d’accès au répertoire qui a des barres obliques inverses entre guillemets, ou bien utiliser des barres obliques plutôt que des barres obliques inverses.

3. Créez une branche fonctionnelle nommée « test » et basculez vers celle-ci (pour éviter d’altérer les fichiers de démonstration dans la branche « principale ») :

   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émarrage du serveur (serveur http npx) 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 devriez pouvoir y accéder en utilisant localhost:8080:

   

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

   La page Web de démonstration DevTools Workspaces 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. Dans la continuité 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. Naviguez jusqu’à un dossier, par C:\Users\localAccount\GitHub\Demos\demo-to-doexemple, puis cliquez sur le bouton Sélectionner un dossier .

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

4. Cliquez sur le bouton Autoriser .

   L’arborescence des fichiers s’affiche dans l’onglet Espace de demo-to-dotravail 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 des fichiers, puis cliquez sur un ou plusieurs fichiers, par to-do.jsexemple .

   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 simultanément afficher et modifier les fichiers sources ouverts via l’outil Sources .

1. Dans la continuité ci-dessus, dans la barre d’activité en haut de DevTools, sélectionnez un outil autre que l’outil Sources (), 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 Aperçu rapide au bas de DevTools, cliquez sur le bouton Autres outils , puis sélectionnez Source rapide.

   L’outil Source rapide s’ouvre en mode Rapide au 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. Ne saisissez aucune tâche, puis appuyez sur Entrée.

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

   Un astérisque s’affiche sous l’onglet Nom du fichier.

8. Appuyez sur Ctrl+S.

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

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

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

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

    

Désormais, lorsque vous modifiez les fichiers du dossier dans DevTools, les modifications sont non seulement apportées au fichier transitoire renvoyé par le serveur, mais sont également enregistrées dans les fichiers sources sur votre disque local. Vous pouvez modifier le fichier à partir de l’outil Source rapide en même temps qu’un autre outil s’affiche (ou à partir de l’outil Sources ).

C’est la fin des étapes du didacticiel.

Voir aussi :

• Ajoutez un dossier local à l’espace de travail afin d’utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque dans la 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 l’espace de travail didacticiel (onglet Espace de travail de l’outil Sources)

Ouvrir un fichier à l’aide du menu de commande

L’ouverture d’un fichier à l’aide du menu de commande l’ouvre à la fois dans l’outil Source rapide et dans l’outil Sources .

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

• Sélectionnez Personnaliser et contrôler la commande Exécuter DevTools>.

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

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

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

• Outil >Sélectionner les sourcesAutres 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 de commande 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 augmenter la taille du panneau Affichage rapide .

Raccourcis clavier dans l’outil Source rapide

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

• Ctrl+F : rechercher.

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

• Ctrl+P - Ouvrez un fichier à l’aide du menu Commande. C’est la même chose que d’accéder à l’outil Sources , puis de cliquer sur un fichier dans 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 les outils Source rapide et 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 la vue d’ensemble de l’outil Sources
  • Suivre les modifications apportées aux fichiers à l’aide de l’outil Modifications