En bref
L'extension Apidog pour VS Code vous permet d'envoyer des requêtes API, de gérer des collections, d'exécuter des tests et de partager des espaces de travail avec votre équipe – le tout sans quitter votre éditeur. La configuration prend moins de cinq minutes : installez l'extension, connectez-vous à votre compte Apidog gratuit, et votre espace de travail se charge directement dans la barre latérale de VS Code.
Introduction
Apidog a commencé comme une application de bureau pour la conception, le test et la documentation d'API. Au fil du temps, l'équipe a publié une extension VS Code qui intègre le même espace de travail directement dans votre éditeur. L'extension ne duplique pas Apidog – elle se connecte à votre espace de travail existant, de sorte que les collections, les environnements et les cas de test restent synchronisés, que vous soyez dans VS Code, l'application de bureau ou l'interface web.
Ce guide présente le flux de travail complet : installation de l'extension, connexion à votre espace de travail, envoi de requêtes, exécution de tests et utilisation de l'extension VS Code conjointement avec l'application de bureau.
Étape 1 : Installer l'extension Apidog pour VS Code
Ouvrez VS Code et cliquez sur l'icône Extensions dans la barre latérale gauche (ou appuyez sur Ctrl+Maj+X / Cmd+Maj+X).
Recherchez « Apidog » dans la barre de recherche du Marketplace des extensions. Cherchez l'extension publiée par Apidog Inc. – elle affiche le logo Apidog (une icône sombre avec des lettres API stylisées).
Cliquez sur Installer. VS Code installe l'extension et ajoute une icône Apidog à votre barre d'activité sur le côté gauche.
Après l'installation, cliquez sur l'icône Apidog dans la barre d'activité. VS Code ouvre le panneau Apidog dans la barre latérale.
Étape 2 : Connectez-vous à votre compte Apidog
Le panneau Apidog affiche un bouton « Se connecter ». Cliquez dessus.
Un onglet de navigateur s'ouvre sur la page d'authentification d'Apidog. Si vous avez déjà un compte Apidog, entrez votre adresse e-mail et votre mot de passe. Si vous n'avez pas de compte, cliquez sur « S'inscrire » – le niveau gratuit ne nécessite qu'une adresse e-mail. Pas de carte de crédit.
Après vous être connecté, le navigateur affiche une confirmation et vous invite à retourner à VS Code. Cliquez sur « Ouvrir VS Code » ou basculez manuellement vers VS Code.
VS Code termine l'échange d'authentification et charge votre espace de travail Apidog dans la barre latérale.
À quoi ressemble la barre latérale après la connexion : Le panneau de gauche affiche une vue arborescente de votre espace de travail. En haut, vous voyez le nom de votre espace de travail. En dessous, vos collections apparaissent sous forme de dossiers. Chaque collection se développe pour montrer les requêtes qu'elle contient, organisées par structure de dossiers. Les environnements apparaissent dans un menu déroulant en haut du panneau.
Étape 3 : Naviguer dans vos collections
La barre latérale Apidog dans VS Code reflète exactement la structure des collections de votre espace de travail Apidog.
Pour parcourir une collection, cliquez sur la flèche à côté du nom de la collection. Elle se développe pour afficher les dossiers et les requêtes. Les dossiers se développent davantage en requêtes individuelles.
Chaque requête apparaît comme un élément de ligne avec un badge coloré indiquant la méthode HTTP (GET en vert, POST en bleu, PUT en orange, DELETE en rouge). Cliquer sur une requête l'ouvre dans la zone de l'éditeur VS Code sous forme d'onglet.
Utilisation de la barre de recherche : En haut du panneau Apidog, il y a un champ de recherche. Tapez n'importe quel mot-clé pour filtrer vos collections par nom de requête, URL ou méthode. Ceci est utile lorsque votre espace de travail contient des dizaines de collections.
Changer d'espace de travail : Si votre compte Apidog appartient à plusieurs espaces de travail (personnel, d'équipe ou spécifique à un projet), un sélecteur d'espace de travail en haut du panneau vous permet de basculer entre eux.
Étape 4 : Envoyer des requêtes
Lorsque vous ouvrez une requête depuis la barre latérale, elle se charge dans la zone principale de l'éditeur sous forme d'onglet. L'interface de requête a une disposition familière :
Barre supérieure : Sélecteur de méthode (menu déroulant avec GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), champ URL et bouton Envoyer.
Onglets sous l'URL : Paramètres, En-têtes, Corps, Authentification, Scripts de pré-requête, Tests, Paramètres. Chaque onglet ouvre la section de configuration pertinente.
Pour envoyer une requête :
- Confirmez la méthode et l'URL dans la barre supérieure
- Ajoutez les en-têtes nécessaires dans l'onglet En-têtes
- Si la requête a un corps (POST, PUT), cliquez sur Corps et sélectionnez le type de contenu (JSON, données de formulaire, binaire, etc.)
- Cliquez sur Envoyer
La réponse apparaît dans la moitié inférieure de l'onglet. Elle affiche le code d'état, le temps de réponse et la taille de la réponse. Les onglets sous la réponse vous permettent de visualiser le corps (avec coloration syntaxique pour JSON et XML), les en-têtes, les cookies et les résultats des tests.
Utilisation des environnements : Le sélecteur d'environnement en haut du panneau Apidog définit l'environnement actif. Les variables comme {{base_url}} ou {{token}} sont résolues aux valeurs définies dans cet environnement. Changez d'environnement pour exécuter la même requête contre les environnements de développement, de staging ou de production sans modifier les URL.
Étape 5 : Modifier et créer des requêtes
Vous pouvez modifier les requêtes existantes directement dans VS Code. Les modifications se synchronisent automatiquement avec votre espace de travail Apidog.
Pour créer une nouvelle requête :
- Faites un clic droit sur une collection ou un dossier dans la barre latérale
- Sélectionnez « Nouvelle requête »
- Un onglet de requête vide s'ouvre
- Définissez la méthode, l'URL, les en-têtes et le corps
- Appuyez sur
Ctrl+S/Cmd+Spour enregistrer
La nouvelle requête apparaît dans la barre latérale et est immédiatement accessible depuis l'application de bureau Apidog, l'interface web ou le VS Code de n'importe quel coéquipier.
Renommer et organiser : Faites un clic droit sur n'importe quelle requête ou dossier dans la barre latérale pour accéder aux options de renommage, de déplacement, de duplication et de suppression. Le réarrangement par glisser-déposer fonctionne dans la barre latérale.
Étape 6 : Exécuter des tests
Apidog prend en charge les assertions de test qui s'exécutent après chaque réponse. Dans l'onglet Tests d'une requête ouverte, vous pouvez écrire des assertions basées sur JavaScript :
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');
});
Après avoir cliqué sur Envoyer, l'onglet Tests dans la section de réponse indique quelles assertions ont réussi et lesquelles ont échoué, avec les décomptes de succès/échecs et les messages d'erreur pour les échecs.
Exécuter une collection : Faites un clic droit sur une collection ou un dossier dans la barre latérale et sélectionnez « Exécuter la collection ». Un panneau d'exécution s'ouvre où vous pouvez définir les itérations, les délais entre les requêtes et les environnements. Cliquez sur Exécuter pour exécuter toutes les requêtes en séquence. Les résultats affichent l'état de succès/échec pour les assertions de chaque requête.
Étape 7 : Utiliser l'extension VS Code et l'application de bureau ensemble
L'extension VS Code et l'application de bureau partagent le même espace de travail en temps réel. Il n'y a pas de version « principale » – ce sont deux vues des mêmes données.
Flux de travail courants qui utilisent les deux :
Concevez dans l'application de bureau, testez dans VS Code : Utilisez l'application de bureau Apidog pour définir le schéma de votre API, rédiger la documentation et configurer des serveurs maquettes. Passez ensuite à VS Code pour exécuter des requêtes et écrire des assertions de test sans quitter votre environnement de développement.
Examen d'API en équipe : Un développeur backend met à jour un point d'API dans l'application de bureau. Un développeur frontend ouvre VS Code avec l'extension Apidog et voit immédiatement la requête mise à jour avec les nouveaux paramètres. Pas de pull request, pas de fichier JSON à importer.
Rédaction de tests en contexte : Vous écrivez du code dans VS Code pour consommer une API. Sans changer de fenêtre, vous pouvez ouvrir le panneau Apidog, trouver le point d'API pertinent, l'exécuter, vérifier la forme de la réponse et revenir à votre code – en restant dans la même application tout le temps.
Ce que l'application de bureau fait de mieux : La conception de schémas, la configuration de serveurs maquettes, la publication de documentation API et la gestion d'un grand nombre d'environnements. Ce sont des fonctionnalités d'abord conçues pour l'application de bureau que vous pouvez référencer depuis VS Code, mais qui sont plus faciles à configurer dans la vue plein écran de l'application de bureau.
Étape 8 : Partager avec votre équipe
Si vous travaillez avec un ou deux autres développeurs, ajoutez-les à votre espace de travail Apidog. Depuis l'interface web ou l'application de bureau Apidog, accédez aux paramètres de votre espace de travail et invitez des coéquipiers par e-mail.
Une fois qu'ils ont accepté l'invitation et installé l'extension VS Code, leur barre latérale affiche les mêmes collections que vous. Toute requête qu'ils ajoutent ou modifient apparaît immédiatement pour tout le monde.
Le niveau gratuit prend en charge jusqu'à trois utilisateurs. Les modifications sont synchronisées via le cloud d'Apidog – pas d'opérations Git, pas d'exportations de fichiers, pas de conflits de fusion.
FAQ
L'extension Apidog pour VS Code fonctionne-t-elle sans l'application de bureau ?Oui. L'extension est un client complet pour votre espace de travail Apidog. Vous n'avez pas besoin d'installer l'application de bureau pour utiliser l'extension.
Puis-je utiliser l'extension Apidog pour VS Code hors ligne ?Vous pouvez consulter et modifier les collections mises en cache hors ligne. L'envoi de requêtes aux API externes nécessite un accès Internet (tout comme la synchronisation des modifications). Le support hors ligne complet dépend de l'état du cache de votre espace de travail Apidog.
Comment importer des collections Thunder Client ou Postman existantes ?Dans l'application de bureau ou l'interface web Apidog, allez dans Importer et sélectionnez le format approprié (JSON Thunder Client, collection Postman v2.1, OpenAPI, etc.). Les collections importées apparaissent dans votre espace de travail et sont immédiatement accessibles depuis l'extension VS Code.
L'extension VS Code est-elle la même chose que la création d'un nouveau projet dans Apidog ?Non. L'extension se connecte à votre espace de travail Apidog existant. Vous créez et gérez des espaces de travail depuis l'application de bureau ou l'interface web. L'extension VS Code est un client qui vous permet de travailler au sein de ces espaces de travail depuis VS Code.
Plusieurs personnes peuvent-elles avoir la même collection ouverte en même temps ?Oui. L'extension ne verrouille pas les collections pour l'édition. Si deux utilisateurs modifient la même requête simultanément, la dernière sauvegarde prévaut. Pour une édition coordonnée, utilisez les fonctionnalités de collaboration de l'application de bureau.
L'extension prend-elle en charge l'auto-complétion des variables d'environnement ?Oui. Lorsque vous tapez {{ dans un champ d'URL ou de paramètre, l'extension suggère les variables disponibles à partir de l'environnement actif. Cela aide à éviter les fautes de frappe dans les noms de variables.
L'extension Apidog pour VS Code fonctionne mieux comme votre outil quotidien lorsque vous effectuez déjà du développement d'API dans VS Code. Le coût de configuration de deux minutes est rapidement amorti une fois que vos collections, environnements et espace de travail d'équipe sont tous accessibles sans changer de fenêtre.