TL;DR
Die Apidog VS Code-Erweiterung ermöglicht es Ihnen, API-Anfragen zu senden, Sammlungen zu verwalten, Tests auszuführen und Arbeitsbereiche mit Ihrem Team zu teilen – alles, ohne Ihren Editor verlassen zu müssen. Die Einrichtung dauert weniger als fünf Minuten: Installieren Sie die Erweiterung, melden Sie sich bei Ihrem kostenlosen Apidog-Konto an, und Ihr Arbeitsbereich wird direkt in der Seitenleiste von VS Code geladen.
Einleitung
Apidog begann als Desktop-Anwendung für API-Design, Tests und Dokumentation. Im Laufe der Zeit veröffentlichte das Team eine VS Code-Erweiterung, die denselben Arbeitsbereich direkt in Ihren Editor bringt. Die Erweiterung dupliziert Apidog nicht – sie verbindet sich mit Ihrem bestehenden Arbeitsbereich, sodass Sammlungen, Umgebungen und Testfälle synchron bleiben, egal ob Sie in VS Code, der Desktop-Anwendung oder der Weboberfläche arbeiten.
Dieser Leitfaden führt Sie durch den vollständigen Workflow: Installation der Erweiterung, Verbindung mit Ihrem Arbeitsbereich, Senden von Anfragen, Ausführen von Tests und Verwendung der VS Code-Erweiterung zusammen mit der Desktop-Anwendung.
Schritt 1: Die Apidog VS Code-Erweiterung installieren
Öffnen Sie VS Code und klicken Sie auf das Erweiterungen-Symbol in der linken Seitenleiste (oder drücken Sie Strg+Umschalt+X / Cmd+Umschalt+X).
Suchen Sie im Suchfeld des Erweiterungs-Marktplatzes nach „Apidog“. Suchen Sie nach der von Apidog Inc. veröffentlichten Erweiterung – sie zeigt das Apidog-Logo (ein dunkles Symbol mit stilisierten API-Buchstaben).
Klicken Sie auf Installieren. VS Code installiert die Erweiterung und fügt ein Apidog-Symbol zu Ihrer Aktivitätsleiste auf der linken Seite hinzu.
Nach der Installation klicken Sie auf das Apidog-Symbol in der Aktivitätsleiste. VS Code öffnet das Apidog-Panel in der Seitenleiste.
Schritt 2: Melden Sie sich bei Ihrem Apidog-Konto an
Das Apidog-Panel zeigt eine Schaltfläche „Anmelden“. Klicken Sie darauf.
Ein Browser-Tab öffnet sich zur Anmeldeseite von Apidog. Wenn Sie bereits ein Apidog-Konto haben, geben Sie Ihre E-Mail-Adresse und Ihr Passwort ein. Wenn Sie kein Konto haben, klicken Sie auf „Registrieren“ – der kostenlose Tarif erfordert lediglich eine E-Mail-Adresse. Keine Kreditkarte.
Nach der Anmeldung zeigt der Browser eine Bestätigung an und fordert Sie auf, zu VS Code zurückzukehren. Klicken Sie auf „VS Code öffnen“ oder wechseln Sie manuell zurück zu VS Code.
VS Code schließt den Authentifizierungs-Handshake ab und lädt Ihren Apidog-Arbeitsbereich in der Seitenleiste.
Wie die Seitenleiste nach der Anmeldung aussieht: Das linke Panel zeigt eine Baumansicht Ihres Arbeitsbereichs. Oben sehen Sie den Namen Ihres Arbeitsbereichs. Darunter erscheinen Ihre Sammlungen als Ordner. Jede Sammlung erweitert sich, um die darin enthaltenen Anfragen anzuzeigen, die nach Ordnerstruktur organisiert sind. Umgebungen erscheinen in einem Dropdown-Menü oben im Panel.
Schritt 3: Navigieren Sie durch Ihre Sammlungen
Die Apidog-Seitenleiste in VS Code spiegelt die Sammlungsstruktur Ihres Apidog-Arbeitsbereichs exakt wider.
Um eine Sammlung zu durchsuchen, klicken Sie auf den Pfeil neben dem Sammlungsnamen. Sie erweitert sich, um Ordner und Anfragen anzuzeigen. Ordner erweitern sich weiter zu einzelnen Anfragen.
Jede Anfrage erscheint als Zeileneintrag mit einem farbigen Abzeichen, das die HTTP-Methode anzeigt (GET in grün, POST in blau, PUT in orange, DELETE in rot). Das Klicken auf eine Anfrage öffnet sie im VS Code-Editorbereich als Tab.
Die Suchleiste verwenden: Oben im Apidog-Panel befindet sich ein Suchfeld. Geben Sie ein beliebiges Schlüsselwort ein, um Ihre Sammlungen nach Anfragenamen, URL oder Methode zu filtern. Dies ist nützlich, wenn Ihr Arbeitsbereich Dutzende von Sammlungen enthält.
Arbeitsbereiche wechseln: Wenn Ihr Apidog-Konto zu mehreren Arbeitsbereichen gehört (persönlich, Team oder projektspezifisch), können Sie mit einem Arbeitsbereichs-Auswahlfeld oben im Panel zwischen diesen wechseln.
Schritt 4: Anfragen senden
Wenn Sie eine Anfrage aus der Seitenleiste öffnen, wird sie im Haupteditorbereich als Tab geladen. Die Anfrage-Oberfläche hat ein vertrautes Layout:
Obere Leiste: Methodenauswahl (Dropdown mit GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), URL-Feld und Senden-Button.
Tabs unterhalb der URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings. Jeder Tab öffnet den entsprechenden Konfigurationsbereich.
So senden Sie eine Anfrage:
- Bestätigen Sie die Methode und URL in der oberen Leiste.
- Fügen Sie alle erforderlichen Header im Header-Tab hinzu.
- Wenn die Anfrage einen Body hat (POST, PUT), klicken Sie auf Body und wählen Sie den Inhaltstyp (JSON, Formulardaten, Binärdaten usw.) aus.
- Klicken Sie auf Senden.
Die Antwort erscheint in der unteren Hälfte des Tabs. Sie zeigt den Statuscode, die Antwortzeit und die Antwortgröße an. Tabs unterhalb der Antwort ermöglichen es Ihnen, den Body (mit Syntaxhervorhebung für JSON und XML), Header, Cookies und Testergebnisse anzuzeigen.
Umgebungen verwenden: Der Umgebungsselektor oben im Apidog-Panel legt die aktive Umgebung fest. Variablen wie {{base_url}} oder {{token}} werden auf die in dieser Umgebung definierten Werte aufgelöst. Wechseln Sie Umgebungen, um dieselbe Anfrage gegen Entwicklung, Staging oder Produktion auszuführen, ohne URLs bearbeiten zu müssen.
Schritt 5: Anfragen bearbeiten und erstellen
Sie können bestehende Anfragen direkt in VS Code bearbeiten. Änderungen werden automatisch mit Ihrem Apidog-Arbeitsbereich synchronisiert.
So erstellen Sie eine neue Anfrage:
- Klicken Sie mit der rechten Maustaste auf eine Sammlung oder einen Ordner in der Seitenleiste.
- Wählen Sie „Neue Anfrage“.
- Ein leerer Anfragen-Tab öffnet sich.
- Legen Sie Methode, URL, Header und Body fest.
- Drücken Sie
Strg+S/Cmd+S, um zu speichern.
Die neue Anfrage erscheint in der Seitenleiste und ist sofort über die Apidog-Desktop-Anwendung, die Weboberfläche oder das VS Code eines Teamkollegen zugänglich.
Umbenennen und Organisieren: Klicken Sie mit der rechten Maustaste auf eine beliebige Anfrage oder einen Ordner in der Seitenleiste, um Optionen zum Umbenennen, Verschieben, Duplizieren und Löschen aufzurufen. Das Verschieben per Drag-and-Drop funktioniert innerhalb der Seitenleiste.
Schritt 6: Tests ausführen
Apidog unterstützt Test-Assertions, die nach jeder Antwort ausgeführt werden. Im Tab „Tests“ einer geöffneten Anfrage können Sie JavaScript-basierte Assertions schreiben:
pm.test("Status is 200", function () {
pm.response.to.have.status(200);
});
pm.test("Response contains user id", function () {
const json = pm.response.json();
pm.expect(json.id).to.be.a('number');
});
Nach dem Klicken auf Senden zeigt der Tests-Tab im Antwortbereich an, welche Assertions bestanden und welche fehlgeschlagen sind, mit Erfolgs-/Fehlerzählern und Fehlermeldungen für fehlgeschlagene Tests.
Eine Sammlung ausführen: Klicken Sie mit der rechten Maustaste auf eine Sammlung oder einen Ordner in der Seitenleiste und wählen Sie „Sammlung ausführen“. Ein Runner-Panel öffnet sich, in dem Sie Iterationen, Verzögerungen zwischen Anfragen und Umgebungen festlegen können. Klicken Sie auf „Ausführen“, um alle Anfragen sequenziell auszuführen. Die Ergebnisse zeigen den Erfolgs-/Fehlerstatus für die Assertions jeder Anfrage an.
Schritt 7: VS Code-Erweiterung und Desktop-Anwendung gemeinsam nutzen
Die VS Code-Erweiterung und die Desktop-Anwendung teilen sich denselben Arbeitsbereich in Echtzeit. Es gibt keine „primäre“ Version – sie sind zwei Ansichten derselben Daten.
Gängige Workflows, die beide nutzen:
Design in der Desktop-App, Test in VS Code: Verwenden Sie die Apidog-Desktop-Anwendung, um Ihr API-Schema zu definieren, Dokumentation zu schreiben und Mock-Server einzurichten. Wechseln Sie dann zu VS Code, um Anfragen auszuführen und Test-Assertions zu schreiben, ohne Ihre Entwicklungsumgebung verlassen zu müssen.
Team-API-Review: Ein Backend-Entwickler aktualisiert einen Endpunkt in der Desktop-Anwendung. Ein Frontend-Entwickler öffnet VS Code mit der Apidog-Erweiterung und sieht sofort die aktualisierte Anfrage mit den neuen Parametern. Kein Pull Request, keine zu importierende JSON-Datei.
Testen im Kontext: Sie schreiben Code in VS Code, um eine API zu nutzen. Ohne Fenster wechseln zu müssen, können Sie das Apidog-Panel öffnen, den relevanten Endpunkt finden, ihn ausführen, die Antwortstruktur überprüfen und zu Ihrem Code zurückkehren – die ganze Zeit in derselben Anwendung bleiben.
Was die Desktop-Anwendung besser kann: Schema-Design, Mock-Server-Einrichtung, Veröffentlichung von API-Dokumentationen und die Verwaltung einer großen Anzahl von Umgebungen. Dies sind Desktop-App-fokussierte Funktionen, die Sie von VS Code aus referenzieren können, aber in der Vollbild-Desktop-Ansicht einfacher zu konfigurieren sind.
Schritt 8: Mit Ihrem Team teilen
Wenn Sie mit ein oder zwei anderen Entwicklern zusammenarbeiten, fügen Sie diese Ihrem Apidog-Arbeitsbereich hinzu. Gehen Sie in der Apidog-Weboberfläche oder Desktop-Anwendung zu Ihren Arbeitsbereichseinstellungen und laden Sie Teamkollegen per E-Mail ein.
Sobald sie die Einladung annehmen und die VS Code-Erweiterung installieren, zeigt ihre Seitenleiste dieselben Sammlungen an, die Sie sehen. Jede Anfrage, die sie hinzufügen oder ändern, erscheint sofort für alle.
Der kostenlose Tarif unterstützt bis zu drei Benutzer. Änderungen werden über die Apidog-Cloud synchronisiert – keine Git-Operationen, keine Dateiexporte, keine Merge-Konflikte.
FAQ
Funktioniert die Apidog VS Code-Erweiterung ohne die Desktop-Anwendung?Ja. Die Erweiterung ist ein vollständiger Client für Ihren Apidog-Arbeitsbereich. Sie müssen die Desktop-Anwendung nicht installieren, um die Erweiterung zu nutzen.
Kann ich die Apidog VS Code-Erweiterung offline nutzen?Sie können zwischengespeicherte Sammlungen offline anzeigen und bearbeiten. Das Senden von Anfragen an externe APIs erfordert Internetzugang (ebenso wie das Synchronisieren von Änderungen). Die vollständige Offline-Unterstützung hängt vom Cache-Status Ihres Apidog-Arbeitsbereichs ab.
Wie importiere ich bestehende Thunder Client- oder Postman-Sammlungen?Gehen Sie in der Apidog-Desktop-Anwendung oder Weboberfläche zu Importieren und wählen Sie das entsprechende Format aus (Thunder Client JSON, Postman-Sammlung v2.1, OpenAPI usw.). Importierte Sammlungen erscheinen in Ihrem Arbeitsbereich und sind sofort über die VS Code-Erweiterung zugänglich.
Ist die VS Code-Erweiterung dasselbe wie das Erstellen eines neuen Projekts in Apidog?Nein. Die Erweiterung verbindet sich mit Ihrem bestehenden Apidog-Arbeitsbereich. Sie erstellen und verwalten Arbeitsbereiche über die Desktop-Anwendung oder die Weboberfläche. Die VS Code-Erweiterung ist ein Client, der es Ihnen ermöglicht, innerhalb dieser Arbeitsbereiche von VS Code aus zu arbeiten.
Können mehrere Personen dieselbe Sammlung gleichzeitig geöffnet haben?Ja. Die Erweiterung sperrt Sammlungen nicht für die Bearbeitung. Wenn zwei Benutzer dieselbe Anfrage gleichzeitig bearbeiten, gewinnt die letzte Speicherung. Für koordiniertes Bearbeiten nutzen Sie die Kollaborationsfunktionen der Desktop-Anwendung.
Unterstützt die Erweiterung die Autovervollständigung von Umgebungsvariablen?Ja. Wenn Sie {{ in ein URL- oder Parameterfeld eingeben, schlägt die Erweiterung verfügbare Variablen aus der aktiven Umgebung vor. Dies hilft, Tippfehler bei Variablennamen zu vermeiden.
Die Apidog VS Code-Erweiterung eignet sich am besten als Ihr tägliches Werkzeug, wenn Sie bereits API-Entwicklung in VS Code betreiben. Die zweiminütige Einrichtungszeit zahlt sich schnell aus, sobald Ihre Sammlungen, Umgebungen und Team-Arbeitsbereiche alle ohne Fensterwechsel zugänglich sind.