Freigeben über

Problembehandlung bei der DevTools-Erweiterung

  • Artikel

Steuern der CSS-Spiegel Bearbeitung

Standardmäßig ist das Kontrollkästchen CSS Spiegel Bearbeiten auf der Registerkarte Formatvorlagen im Tool Elemente auf der Registerkarte Edge DevTools aktiviert. Wenn Sie CSS-Werte mithilfe von DevTools ändern, DevTools jedoch keine übereinstimmende Datei in einem Arbeitsbereich (Ordner) findet, der in Visual Studio Code geöffnet ist, werden Fehlermeldungen zur Zuordnung zu Quelldateien für CSS-Spiegel Bearbeitung angezeigt.

Wenn Sie CSS in DevTools ändern, gehen Sie wie folgt vor:

  • Aktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten, und öffnen Sie einen Ordner, der Quelldateien enthält, die der Webseite entsprechen, die Sie mit DevTools untersuchen.

  • Oder deaktivieren Sie das Kontrollkästchen CSS Spiegel Bearbeiten, um solche Fehlermeldungen zu verhindern.

Siehe auch:

Neustarten von DevTools

Eine leistungsstarke Möglichkeit zum Neustarten von DevTools besteht darin, den Ordner zu schließen und erneut zu öffnen:

  1. Wählen Sie in Visual Studio Code Datei>ordner schließen aus.

  2. Wenn Sie einen Webserver mithilfe von Terminal in Visual Studio Code gestartet haben, starten Sie den Webserver neu, z. B. indem Sie ausführen npx http-server. Alternativ können Sie den Webserver über eine Eingabeaufforderung außerhalb von Visual Studio Code starten, damit er weiterhin ausgeführt wird. Weitere Informationen finden Sie unter Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.

  3. Wählen Sie in Visual Studio Code Datei>Zuletzt geöffnet aus, und öffnen Sie einen Ordner, der Webseitenquelldateien enthält.

Schließen aller Instanzen von DevTools

Normalerweise werden beim Schließen der beiden DevTools-Registerkarten alle Instanzen von DevTools und der DevTools-Browser geschlossen. Wenn die Symbolleiste Debuggen geöffnet ist, klicken Sie auf die Schaltfläche Beenden .

Um den Status von DevTools zurückzusetzen, schließen Sie alle Instanzen von DevTools. Stellen Sie sicher, dass die Schaltfläche Instanz starten in der Visual Studio Code-Aktivitätsleiste >>Microsoft Edge Tools Seitenleiste angezeigt wird. Dies bedeutet, dass keine instance von DevTools ausgeführt wird.

Schließen Sie bei Bedarf alle Visual Studio Code-Instanzen, öffnen Sie dann Visual Studio Code, und stellen Sie sicher, dass die Schaltfläche Instanz starten in der Aktivitätsleiste>der Microsoft Edge Tools-Seitenleiste angezeigt wird.

Fehlermeldungen

Die Lösung für die meisten Fehlermeldungen besteht darin, DevTools auf eine der empfohlenen Arten zu öffnen. Stellen Sie sicher, dass ein Ordner geöffnet ist, der Webseitenquelldateien enthält, die DevTools dem Dateipfad oder der URL zuordnen kann, die der DevTools-Browser verwendet.

Der DevTools-Browser verwendet die URL oder den Dateipfad, die Sie auf eine der verschiedenen Arten angeben:

Vorgehensweise zum Öffnen von DevTools Angabe des Dateipfads oder der URL
Klicken Sie auf die Schaltfläche Instanz starten . Die URL oder der Dateipfad, die Sie in der Adressleiste des DevTools-Browsers angeben.
Klicken Sie mit der rechten Maustaste auf eine .html Datei. Der Pfad der Datei, auf die .html Sie mit der rechten Maustaste klicken.
Klicken Sie auf die Schaltfläche Projekt starten . Die URL oder der Dateipfad, den Sie in launch.jsonangeben.

Wenn Sie eine andere URL oder einen anderen Dateipfad in die Adressleiste des DevTools-Browsers eingeben, müssen Sie auch einen Ordner öffnen Spiegel, der dateien enthält, die mit der Webseite (Dateipfad oder URL) übereinstimmen, die Sie im DevTools-Browser angeben.

Angenommen, Sie klicken auf die Schaltfläche Instanz starten und fügen dann eine localhost-URL in die Adressleiste ein, http://localhost:8080aber Sie haben den lokalen Ordner mit den Quelldateien nicht geöffnet. Versuchen Sie dann auf der Registerkarte Formatvorlagen des Tools Elemente, einen CSS-Wert zu ändern. Möglicherweise werden Fehlermeldungen angezeigt, z. B.:

  • Fehler beim Spiegeln von CSS-Inhalten im Dokument. Css-Änderungen am Dokument konnten nicht Spiegel. Es wurde keine Arbeitsbereichszuordnung gefunden.

  • Die Datei kann im Editor nicht geöffnet werden.

  • Fehler beim Öffnen der Datei im Editor.

  • Fehler beim Abrufen.

  • An Standard Ziel konnte nicht angefügt werden.

  • Fehler beim Abrufen der Liste der verfügbaren Ziele. Keine verfügbaren Ziele, die angefügt werden können.

Keine Arbeitsbereichszuordnung

Wenn beim Versuch, auf einen Dateipfad zu verweisen, Fehler auftreten, anstatt eine launch.json Datei zu verwenden, versuchen Sie stattdessen, mit der rechten Maustaste auf die .html Datei zu klicken:

An Standard Ziel konnte nicht angefügt werden.

Weitere Informationen finden Sie unter Öffnen von DevTools und dem DevTools-Browser.

Löschen oder erneutes Erstellen von launch.json

Zusätzlich zum Schließen eines erneuten Ordners können Sie löschen und optional neu erstellen launch.json, wenn Sie ein Projekt für die Verwendung mit DevTools zurücksetzen möchten. launch.json definiert Debugkonfigurationen.

Die folgende launch.json Datei ist zu kurz für die DevTools-Erweiterung. Sie wurde von Visual Studio Code ohne Verwendung der DevTools-Erweiterung erstellt. Das Demos-Repository enthält in demo-to-do nichtlaunch.json, daher können Sie die Datei entfernen:

Entfernen einer falschen launch.json-Datei

So erstellen Sie eine neue launch.json Datei für DevTools:

  1. Erstellen Sie eine Sicherungskopie der launch.json Datei.

  2. Klicken Sie in der Visual Studio Code-Aktivitätsleiste>>Explorer mit der rechten Maustaste auf launch.json>Löschen.

    Aktivitätsleiste>Microsoft Edge-Tools zeigt jetzt die Schaltfläche Instanz starten und die Schaltfläche launch.json generieren an.

  3. Wenn Sie eine launch.json Datei für DevTools verwenden möchten, stellen Sie sicher, dass der gewünschte Ordner in der Visual Studio Code-Aktivitätsleiste>> geöffnet ist Explorer und klicken Sie dann auf die Schaltfläche launch.json generieren. Weitere Informationen finden Sie unter Öffnen von DevTools durch Klicken auf die Schaltfläche Projekt starten unter Öffnen von DevTools und dem DevTools-Browser.

launch.json erfordert wohlgeformten JSON-Code

Wenn die Aktivitätsleiste>von Microsoft Edge Tools anstelle der erwarteten Schaltfläche Projekt starten die Schaltfläche Launch.json konfigurieren enthält, wenn eine von DevTools generierte launch.json Datei im geöffneten Ordner vorhanden ist, kann dies durch das Hinzufügen einer Zeile mit einem fehlenden Komma oder leeren Anführungszeichen verursacht werden. Achten Sie darauf, dass launch.json wohlgeformte JSON-Daten enthalten sind.

Siehe auch