Partager via

Résolution des problèmes liés à l’extension DevTools

  • Article

Contrôle de la modification miroir CSS

Par défaut, la case à cocher CSS miroir modification est cochée sous l’onglet Styles de l’outil Éléments de l’onglet DevTools Edge. Si vous modifiez les valeurs CSS à l’aide de DevTools, mais que DevTools ne trouve pas de fichier correspondant dans un espace de travail (dossier) ouvert dans Visual Studio Code, des messages d’erreur sur le mappage aux fichiers sources pour CSS miroir modification s’affichent.

Si vous modifiez CSS dans DevTools, soit :

  • Cochez la case CSS miroir modification et ouvrez un dossier qui contient les fichiers sources correspondant à la page web que vous inspectez avec DevTools.

  • Ou décochez la case CSS miroir modification pour empêcher ces messages d’erreur.

Voir aussi :

Redémarrage de DevTools

Un moyen efficace de redémarrer DevTools consiste à fermer et rouvrir le dossier :

  1. Dans Visual Studio Code, sélectionnez Fichier>Fermer le dossier.

  2. Si vous avez démarré un serveur web à l’aide de Terminal dans Visual Studio Code, redémarrez le serveur web, par exemple en exécutant npx http-server. Au lieu de cela, vous pouvez démarrer le serveur web à partir d’une invite de commandes en dehors de Visual Studio Code pour qu’il continue à s’exécuter. Pour plus d’informations, consultez Étape 6 : Configurer un serveur localhost dans Installation de l’extension DevTools pour Visual Studio Code.

  3. Dans Visual Studio Code, sélectionnez Fichier>Ouvrir récent, puis ouvrez un dossier qui contient les fichiers sources de page web.

Fermeture de toutes les instances de DevTools

Normalement, la fermeture des deux onglets DevTools ferme toutes les instances de DevTools et du navigateur DevTools. Si la barre d’outils Déboguer est ouverte, cliquez sur le bouton Arrêter .

Pour réinitialiser l’état de DevTools, fermez toutes les instances de DevTools. Assurez-vous que le bouton Lancer l’instance s’affiche dans la barre> latérale desoutils Microsoft Edge de Visual Studio Code>. Cela indique qu’aucune instance de DevTools n’est en cours d’exécution.

Si nécessaire, fermez toutes les instances de Visual Studio Code, puis ouvrez Visual Studio Code et assurez-vous que le bouton Lancer l’instance est affiché dans barre> d’activité OutilsMicrosoft Edge Side Bar.

Messages d’erreur

La solution pour la plupart des messages d’erreur consiste à ouvrir DevTools de l’une des manières recommandées. Vérifiez qu’un dossier ouvert contient des fichiers sources de page web que DevTools peut mapper au chemin d’accès ou à l’URL du fichier que le navigateur DevTools utilise.

Le navigateur DevTools utilise l’URL ou le chemin d’accès au fichier que vous spécifiez de différentes manières :

Mode d’ouverture de DevTools Où le chemin d’accès ou l’URL du fichier est spécifié
Cliquez sur le bouton Lancer l’instance . Url ou chemin d’accès au fichier que vous spécifiez dans la barre d’adresse du navigateur DevTools.
Cliquez avec le bouton droit sur un .html fichier. Chemin du .html fichier sur lequel vous cliquez avec le bouton droit.
Cliquez sur le bouton Lancer le projet . URL ou chemin d’accès de fichier que vous spécifiez dans launch.json.

Si vous entrez une URL ou un chemin d’accès de fichier différent dans la barre d’adresses du navigateur DevTools, pour que DevTools fournisse automatiquement css miroir modification des fichiers sources locaux, vous devez également ouvrir un dossier qui contient des fichiers qui correspondent à la page web (chemin de fichier ou URL) que vous spécifiez dans le navigateur DevTools.

Supposons que vous cliquez sur le bouton Lancer l’instance , puis collez une URL localhost dans la barre d’adresses, par http://localhost:8080exemple , mais que le dossier des fichiers sources locaux n’est pas ouvert. Ensuite, sous l’onglet Styles de l’outil Éléments, essayez de modifier une valeur CSS. Des messages d’erreur peuvent s’afficher, tels que :

  • Erreur lors de la mise en miroir du contenu css dans le document. Impossible de miroir les modifications css apportées au document. Aucun mappage d’espace de travail n’a été trouvé.

  • Impossible d’ouvrir le fichier dans l’éditeur.

  • Erreur lors de l’ouverture du fichier dans l’éditeur.

  • Erreur lors de l’extraction.

  • Impossible d’attacher à main cible.

  • Erreur lors de la récupération de la liste des cibles disponibles. Aucune cible disponible à attacher.

Aucun mappage d’espace de travail

Si vous obtenez des erreurs lors de la tentative de pointage vers un chemin d’accès de fichier, au lieu d’utiliser un launch.json fichier, essayez de cliquer avec le bouton droit sur le fichier à la .html place :

Impossible d’attacher à main cible

Consultez Ouverture de DevTools et du navigateur DevTools.

Suppression ou recréation de launch.json

En plus de fermer un dossier de réouverture, si vous souhaitez réinitialiser un projet à utiliser avec DevTools, vous pouvez supprimer et éventuellement recréer launch.json. launch.json définit les configurations de débogage.

Le fichier suivant launch.json est trop court pour l’extension DevTools. Il a été créé par Visual Studio Code sans utiliser l’extension DevTools. Le dépôt Demos n’a launch.json pas dans demo-to-do. Vous pouvez donc supprimer le fichier :

Suppression d’un fichier launch.json incorrect

Pour recréer un nouveau launch.json fichier pour DevTools :

  1. Effectuez une copie de sauvegarde du launch.json fichier.

  2. Dans la barre> d’activité de Visual Studio Code >Explorer, cliquez avec le bouton droit sur launch.json>Supprimer.

    Barre >d’activitéLes outils Microsoft Edge affichent désormais un bouton Lancer l’instance et un bouton Générer launch.json.

  3. Si vous souhaitez utiliser un launch.json fichier pour DevTools, vérifiez que le dossier souhaité est ouvert dans la barre> d’activité de Visual Studio Code >Explorer, puis cliquez sur le bouton Générer launch.json. Consultez Ouverture de DevTools en cliquant sur le bouton Lancer le projet dans Ouverture de DevTools et du navigateur DevTools.

launch.json nécessite un JSON bien formé

Si la barre> d’activitéMicrosoft Edge Tools contient un bouton Configurer launch.json au lieu du bouton Lancer le projet attendu lorsqu’un fichier généré par launch.json DevTools existe dans le dossier ouvert, cela peut être dû à l’ajout d’une ligne avec une virgule manquante ou des guillemets vides. Assurez-vous que launch.json contient un JSON bien formé.

Voir aussi