Emre Demir

Posted on Apr 20 • Originally published at apidog.com

Apidog in VS Code nutzen: Anleitung und Tipps

TL;DR

Die Apidog VS Code-Erweiterung ermöglicht Ihnen, API-Anfragen zu senden, Sammlungen zu verwalten, Tests auszuführen und Arbeitsbereiche mit Ihrem Team zu teilen – alles direkt im Editor. Die Einrichtung dauert weniger als fünf Minuten: Erweiterung installieren, im kostenlosen Apidog-Konto anmelden, und Ihr Arbeitsbereich erscheint sofort in der VS Code-Seitenleiste.

Probiere Apidog noch heute aus

💡 Apidog ist eine kostenlose All-in-One-Plattform für die API-Entwicklung. Die VS Code-Erweiterung verbindet Ihren Editor direkt mit Ihrem Apidog-Arbeitsbereich, sodass Sie APIs testen, Dokumente schreiben und mit Ihrem Team zusammenarbeiten können, ohne das Fenster zu wechseln. Apidog ist kostenlos nutzbar, keine Kreditkarte erforderlich.

Einleitung

Apidog startete als Desktop-Anwendung für API-Design, Tests und Dokumentation. Mit der VS Code-Erweiterung steht derselbe Arbeitsbereich direkt im Editor bereit. Alle Sammlungen, Umgebungen und Testfälle bleiben zwischen VS Code, Desktop-App und Weboberfläche synchron.

Diese Anleitung zeigt dir den gesamten Workflow: Von der Installation bis zum Team-Sharing – inklusive praktischer Beispiele für das Senden von Anfragen, das Ausführen von Tests und das parallele Arbeiten mit der Desktop-App.

Schritt 1: Apidog VS Code-Erweiterung installieren

Starte VS Code und öffne das Erweiterungen-Menü (Strg+Shift+X / Cmd+Shift+X).
Suche nach „Apidog“ im Marketplace.
Wähle die Erweiterung von Apidog Inc. (dunkles Symbol mit API-Buchstaben) und klicke auf Installieren.
Nach der Installation findest du das Apidog-Symbol in der Aktivitätsleiste links.
Klicke auf das Symbol, um das Apidog-Panel in der Seitenleiste zu öffnen.

Schritt 2: Bei Apidog anmelden

Im Apidog-Panel findest du die Schaltfläche Anmelden – klicke darauf.
Ein Browser-Tab öffnet sich mit der Apidog-Anmeldeseite.
- Bereits ein Konto? Mit E-Mail und Passwort einloggen.
- Kein Konto? Auf Registrieren klicken – E-Mail reicht, keine Kreditkarte notwendig.
Nach dem Login bestätigt der Browser den Vorgang. Kehre zu VS Code zurück (per Klick oder manuell).
Dein Apidog-Arbeitsbereich wird jetzt in der Seitenleiste angezeigt.

So sieht die Seitenleiste aus:

Oben: Name des Arbeitsbereichs, darunter Sammlungen und Anfragen (nach Ordnern strukturiert)
Umgebungen findest du im Dropdown-Menü oben im Panel

Schritt 3: Sammlungen durchsuchen und verwalten

Die Apidog-Seitenleiste in VS Code bildet deine Apidog-Sammlungen 1:1 ab.
Klicke auf den Pfeil neben einer Sammlung, um Ordner und Anfragen zu öffnen.
Jede Anfrage zeigt ein Abzeichen mit der HTTP-Methode (z.B. GET, POST).
Ein Klick öffnet die Anfrage als Tab im Editor.

Suchen:

Oben im Panel kannst du nach Anfragen filtern (Name, URL, Methode).

Arbeitsbereiche wechseln:

Nutze das Drop-down oben, um zwischen persönlichen, Team- oder Projekt-Arbeitsbereichen zu wechseln.

Schritt 4: API-Anfragen senden

Öffne eine Anfrage aus der Seitenleiste. Das Interface ist sofort einsatzbereit:

Oben: Methode wählen (GET, POST etc.), URL eingeben, auf Senden klicken.
Tabs unter der URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings – je nach Bedarf konfigurieren.

Beispiel:

Methode und URL prüfen/anpassen.
Header im entsprechenden Tab hinzufügen.
Für POST/PUT: Body definieren und Content-Type wählen.
Senden klicken.

Die Antwort erscheint unten im Tab – inklusive Statuscode, Antwortzeit und Größe. Über die Tabs kannst du Body (inkl. Syntax-Highlighting), Header, Cookies und Testergebnisse einsehen.

Umgebungen:

Oben im Apidog-Panel kannst du die aktive Umgebung festlegen. Variablen wie {{base_url}} werden automatisch eingesetzt. So kannst du Anfragen gegen verschiedene Umgebungen (Dev, Staging, Prod) ausführen, ohne URLs zu editieren.

Schritt 5: Anfragen bearbeiten und erstellen

Bestehende Anfragen bearbeiten

Öffne und editiere jede Anfrage direkt im Editor.
Änderungen werden automatisch mit dem Arbeitsbereich synchronisiert.

Neue Anfrage anlegen

Rechtsklick auf eine Sammlung oder einen Ordner > Neue Anfrage.
Ein leerer Anfrage-Tab öffnet sich.
Methode, URL, Header und ggf. Body eintragen.
Mit Strg+S / Cmd+S speichern.

Die neue Anfrage erscheint sofort in der Seitenleiste – und ist überall (Desktop-App, Web, Team) verfügbar.

Umbenennen/Organisieren:

Rechtsklick auf Anfrage/Ordner für Umbenennen, Verschieben, Duplizieren, Löschen.
Drag & Drop ist in der Seitenleiste möglich.

Schritt 6: Tests ausführen

Apidog unterstützt JavaScript-basierte Test-Assertions nach jeder Antwort.

Beispiel für Tests (im Tab „Tests“):

pm.test("Status ist 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response enthält user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});

Nach dem Senden zeigt der Tab „Tests“ an, welche Assertions bestanden oder fehlgeschlagen sind – inkl. Fehlerdetails.

Sammlung ausführen:

Rechtsklick auf Sammlung/Ordner > Sammlung ausführen.
Im Runner-Panel kannst du Iterationen, Delays und Umgebung einstellen.
Auf Ausführen klicken – die Ergebnisse zeigen Success/Fail für jede Anfrage mit Testdetails.

Schritt 7: VS Code-Erweiterung und Desktop-Anwendung kombinieren

Beide Tools arbeiten synchron im selben Arbeitsbereich.

Praktische Workflows:

Design in Desktop-App, Test in VS Code:

API-Schema, Mock-Server und Doku in der Desktop-App erstellen, dann in VS Code Anfragen ausführen und Tests schreiben.
Team-Review:

Backend aktualisiert Endpunkte in der Desktop-App, Frontend sieht die Änderungen sofort in VS Code.
API-Testing im Coding-Kontext:

Während du Code schreibst, kannst du direkt im Apidog-Panel testen, ohne die Anwendung zu wechseln.

Desktop-App ist ideal für:

Komplexes Schema-Design
Mock-Server-Setup
API-Doku veröffentlichen
Verwaltung vieler Umgebungen

Schritt 8: Mit dem Team teilen

In der Weboberfläche oder Desktop-App unter den Arbeitsbereichseinstellungen Teammitglieder per E-Mail einladen.
Nach Annahme und Installation der VS Code-Erweiterung sehen alle dasselbe Panel.
Neue oder geänderte Anfragen sind für das ganze Team sofort sichtbar.

Kostenlos bis zu drei Nutzer.

Synchronisation läuft über die Apidog-Cloud – keine Git-Operationen, keine Exporte, keine Merge-Konflikte.

FAQ

Funktioniert die Apidog VS Code-Erweiterung ohne Desktop-Anwendung?

Ja, die Erweiterung ist ein eigenständiger Client für den Apidog-Arbeitsbereich. Installation der Desktop-App ist nicht nötig.

Kann ich die Erweiterung offline nutzen?

Du kannst zwischengespeicherte Sammlungen offline ansehen/bearbeiten. Für API-Requests und Sync ist eine Internetverbindung notwendig. Offline-Funktionalität hängt vom Cache-Status ab.

Wie importiere ich Thunder Client- oder Postman-Sammlungen?

In der Desktop-App oder Weboberfläche auf Importieren gehen und das gewünschte Format (Thunder Client JSON, Postman v2.1, OpenAPI etc.) wählen. Die importierten Sammlungen sind sofort auch in VS Code verfügbar.

Ist die Erweiterung dasselbe wie ein neues Projekt in Apidog?

Nein, sie verbindet sich mit bestehenden Arbeitsbereichen. Neue Arbeitsbereiche legst du in der Desktop-App oder Weboberfläche an.

Können mehrere Personen dieselbe Sammlung gleichzeitig öffnen?

Ja, Sammlungen werden nicht gesperrt. Bei parallelem Bearbeiten gilt: Die letzte Speicherung gewinnt. Für abgestimmtes Arbeiten sind die Kollaborations-Features der Desktop-App zu empfehlen.

Unterstützt die Erweiterung Autovervollständigung für Umgebungsvariablen?

Ja, beim Tippen von {{ werden verfügbare Variablen aus der aktiven Umgebung vorgeschlagen.

Die Apidog VS Code-Erweiterung ist ideal, wenn du APIs direkt in VS Code entwickelst und testest. Die Einrichtung dauert nur wenige Minuten – und ab dann hast du alle Sammlungen, Umgebungen und Team-Workspaces jederzeit griffbereit, ohne den Editor zu wechseln.

DEV Community