Erste Schritte durch Klicken auf die Schaltfläche Projekt starten

Artikel
03/29/2023

In diesem Tutorial erfahren Sie, wie Sie DevTools öffnen und schließen, indem Sie auf die Schaltfläche Projekt starten klicken, um Demo To Do auf einem localhost-Webserver auszuführen und die URL für die Webseite in launch.jsonzu speichern.

Wir verwenden die Demo-to-Do-App , um die Schaltfläche Projekt starten zu veranschaulichen, nachdem diese Schaltfläche auf eine localhost-URL wie gezeigt http://localhost:8080wurde. Über die Schaltfläche Projekt starten wird DevTools im Debugmodus gestartet. Dies ist die Standard Möglichkeit, DevTools zu öffnen, wenn Ihre Webseite auf einem Webserver ausgeführt werden muss. Als Vorläufiger Schritt erstellen wir eine launch.json Datei und bearbeiten die darin enthaltene URL, um auf localhost zu verweisen, die die Demo-to-Do-Beispiel-App ausgibt.

Sie müssen diesen Ansatz nicht immer verwenden, da in vielen Fällen das Klicken mit der rechten Maustaste auf eine HTML-Datei funktioniert. Viele Webseiten verwenden jedoch APIs, die erfordern, dass die Webseite auf einem Webserver ausgeführt wird. Daher finden Sie hier spezifische Schritte, die Sie ausführen können.

Schritt 1: Installieren von DevTools und voraussetzungen

Falls noch nicht geschehen, führen Sie die Schritte unter Installieren der DevTools-Erweiterung für Visual Studio Code aus, und fahren Sie dann weiter unten fort.

Schritt 2: Starten des Webservers

Dieser Abschnitt unterstützt das Klicken auf die Schaltfläche Projekt starten .

In diesen Schritten wird erläutert, wie Http-Server mithilfe der plattformübergreifenden Git Bash-Shell gestartet wird, die Teil von Git ist. Obwohl Sie das Visual StudioCode-Ansichtsterminal>> verwenden könnten, um den Server zu starten, ist es besser, den Server über eine Eingabeaufforderung außerhalb von Visual Studio Code zu starten, damit der Server auch dann ausgeführt wird, wenn Sie Visual Studio Code oder den Ordner schließen und erneut öffnen.

Falls noch nicht geschehen, richten Sie zum ersten Mal einen Webserver ein, und starten Sie ihn, und stellen Sie die Demo-to-Do-App aus dem Demos-Repository bereit. Informationen hierzu finden Sie unter Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.
Öffnen Sie Git Bash. Drücken Sie unter Windows z. B. Start , und geben Sie dann git bash ein.
cd in den spezifischen Ordner, den Sie über http bereitstellen möchten, Demos\demo-to-do\:

Verwenden Sie in Git Bash Schrägstriche für Dateipfade. Zum Beispiel:
```
cd C:/Users/username/Documents/GitHub/Demos/demo-to-do
```
Geben Sie den Befehl ein npx http-server. Ein lokaler Webserver wird an Port 8080 gestartet.
```
npx http-server
```
Es werden Informationen zum Server und zur localhost-URL angezeigt, z. B.:
```
Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
```
Die angezeigten URLs entsprechen in der Regel der allgemeinen Standard-URL. http://localhost:8080

Schritt 3: Einrichten von launch.json

Dieser Abschnitt unterstützt das Klicken auf die Schaltfläche Projekt starten .

Wählen Sie in Visual Studio Code Datei>Ordner öffnen aus. Wählen Sie Ihr Projektverzeichnis aus, das für das geklonte Demo-to-Do-Beispiel im Demos-Repository enthältindex.html, zC:\Users\username\Documents\GitHub\Demos\demo-to-do\. B. .

Genau wie im Demo-to-Do-Ordner des Repositorys gibt es zunächst keinen .vscode Ordner und keine launch.json Datei in diesem Ordner.
Klicken Sie in der Aktivitätsleiste auf Microsoft Edge-Tools (). Der Bereich Microsoft Edge-Tools wird geöffnet.
Klicken Sie auf die Schaltfläche launch.json generieren :

Die neue launch.json Datei wird geöffnet.

Scrollen Sie an mehreren Stellen in der launch.json Datei in jeder der "url" Zeilen nach rechts, und notieren Sie sich den Kommentar "Geben Sie die URL Ihres Projekts an":

"url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

Navigieren Sie in einem Webbrowser zu der http://localhost/ URL, unter der sich die Demo-to-do-Datei.html auf dem Server befindet, z. B. die allgemeine Standard-URL http://localhost:8080.
Kopieren Sie die URL aus der Adressleiste.
launch.jsonFügen Sie in jede URL-Zeichenfolge die URL für Ihre geklonte Kopie der Demo-to-Do-App ein, z. B.: http://localhost:8080. Fügen Sie den Pfad in die Pfadzeichenfolge in Anführungszeichen in eine der "url" Zeichenfolgen ein. Zum Beispiel:
```
"url": "http://localhost:8080", // Provide your project's url to finish configuring
```
Kopieren Sie die geänderte URL-Zeile, und fügen Sie sie an die anderen Stellen in der launch.json Datei ein.

Tipp: Um alle Instanzen gleichzeitig zu ändern, können Sie eine aktualisierte URL-Zeichenfolge kopieren, dann eine instance der anfänglichen URL-Zeichenfolge auswählen, STRG+UMSCHALT+L drücken, um alle Instanzen auszuwählen, und dann die aktualisierte Zeichenfolge einfügen.
Speichern Sie die launch.json Datei.

Schritt 4: Klicken Sie auf die Schaltfläche Projekt starten.

Klicken Sie in Visual Studio Code in der Aktivitätsleiste auf die Schaltfläche Microsoft Edge-Tools (). Der Bereich Microsoft Edge-Tools wird geöffnet und enthält nun die Schaltfläche Projekt starten , aber keine Schaltfläche launch.json Datei generieren :
Klicken Sie auf die Schaltfläche Projekt starten .

Die Registerkarte Edge DevTools und die Registerkarte Edge DevTools: Browser werden in separaten Bereichen geöffnet, in denen die Demo-to-Do-Web-App angezeigt wird:

An diesem Punkt könnten Sie mit CSS-Bearbeitungen arbeiten oder Code im Debugger schrittweise durchlaufen. Sehen Sie sich die folgenden Abschnitte des Tutorials Erste Schritte durch Klicken mit der rechten Maustaste auf eine HTML-Datei an:

Schritt 5: Schließen von DevTools

So beenden Sie das Debuggen und schließen die Edge DevTools-Registerkarten :

Klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche Beenden (UMSCHALT+F5):

Oder wählen Sie im Menü Ausführen die Option Debuggen beenden aus. Oder schließen Sie die beiden Registerkarten DevTools. Die Symbolleiste Debuggen wird geschlossen.

Siehe auch:

Schließen von DevTools im Öffnen von DevTools und im DevTools-Browser.

Sie haben das Tutorial "Erste Schritte durch Klicken auf die Schaltfläche Projekt starten" abgeschlossen. Es wird empfohlen, dass Sie auch die anderen Tutorials durchführen. Weitere Informationen finden Sie unter Erste Schritte mit der DevTools-Erweiterung für Visual Studio Code.

Siehe auch

Github:

demo-to-do : Die Demo-Web-App, die auf dem github.io Server ausgeführt wird.
Quellcode für demo-to-do
MicrosoftEdge/Demos-Repository