TL;DR
La extensión de Apidog para VS Code te permite enviar solicitudes API, gestionar colecciones, ejecutar pruebas y compartir espacios de trabajo con tu equipo, todo sin salir de tu editor. La configuración toma menos de cinco minutos: instala la extensión, inicia sesión en tu cuenta gratuita de Apidog y tu espacio de trabajo se cargará directamente en la barra lateral de VS Code.
Introducción
Apidog comenzó como una aplicación de escritorio para el diseño, pruebas y documentación de API. Con el tiempo, el equipo lanzó una extensión de VS Code que trae el mismo espacio de trabajo directamente a tu editor. La extensión no duplica Apidog, sino que se conecta a tu espacio de trabajo existente, por lo que las colecciones, los entornos y los casos de prueba permanecen sincronizados, ya sea que estés en VS Code, la aplicación de escritorio o la interfaz web.
Esta guía describe el flujo de trabajo completo: instalar la extensión, conectarse a tu espacio de trabajo, enviar solicitudes, ejecutar pruebas y usar la extensión de VS Code junto con la aplicación de escritorio.
Paso 1: Instala la extensión de Apidog para VS Code
Abre VS Code y haz clic en el icono de Extensiones en la barra lateral izquierda (o presiona Ctrl+Shift+X / Cmd+Shift+X).
Busca “Apidog” en la barra de búsqueda del Marketplace de Extensiones. Busca la extensión publicada por Apidog Inc. – muestra el logotipo de Apidog (un icono oscuro con las letras API estilizadas).
Haz clic en Instalar. VS Code instala la extensión y añade un icono de Apidog a tu Barra de Actividad en el lado izquierdo.
Después de la instalación, haz clic en el icono de Apidog en la Barra de Actividad. VS Code abre el panel de Apidog en la barra lateral.
Paso 2: Inicia sesión en tu cuenta de Apidog
El panel de Apidog muestra un botón "Sign In" (Iniciar Sesión). Haz clic en él.
Se abrirá una pestaña del navegador con la página de autenticación de Apidog. Si ya tienes una cuenta de Apidog, introduce tu correo electrónico y contraseña. Si no tienes una cuenta, haz clic en "Sign Up" (Registrarse); el nivel gratuito solo requiere una dirección de correo electrónico. No se necesita tarjeta de crédito.
Después de iniciar sesión, el navegador mostrará una confirmación y te pedirá que regreses a VS Code. Haz clic en "Open VS Code" (Abrir VS Code) o vuelve a VS Code manualmente.
VS Code completa el proceso de autenticación y carga tu espacio de trabajo de Apidog en la barra lateral.
Cómo se ve la barra lateral después de iniciar sesión: El panel izquierdo muestra una vista de árbol de tu espacio de trabajo. En la parte superior, verás el nombre de tu espacio de trabajo. Debajo, tus colecciones aparecen como carpetas. Cada colección se expande para mostrar las solicitudes que contiene, organizadas por estructura de carpetas. Los entornos aparecen en un menú desplegable en la parte superior del panel.
Paso 3: Navega por tus colecciones
La barra lateral de Apidog en VS Code refleja la estructura de colecciones de tu espacio de trabajo de Apidog exactamente.
Para explorar una colección, haz clic en la flecha junto al nombre de la colección. Se expandirá para mostrar carpetas y solicitudes. Las carpetas se expanden aún más en solicitudes individuales.
Cada solicitud aparece como un elemento de línea con una insignia de color que muestra el método HTTP (GET en verde, POST en azul, PUT en naranja, DELETE en rojo). Al hacer clic en una solicitud, se abre en el área del editor de VS Code como una pestaña.
Uso de la barra de búsqueda: En la parte superior del panel de Apidog, hay un campo de búsqueda. Escribe cualquier palabra clave para filtrar tus colecciones por nombre de solicitud, URL o método. Esto es útil cuando tu espacio de trabajo tiene docenas de colecciones.
Cambio de espacios de trabajo: Si tu cuenta de Apidog pertenece a múltiples espacios de trabajo (personal, de equipo o específicos de un proyecto), un selector de espacio de trabajo en la parte superior del panel te permite cambiar entre ellos.
Paso 4: Envía solicitudes
Cuando abres una solicitud desde la barra lateral, se carga en el área principal del editor como una pestaña. La interfaz de la solicitud tiene un diseño familiar:
Barra superior: Selector de método (desplegable con GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS), campo de URL y botón Enviar.
Pestañas debajo de la URL: Params, Headers, Body, Auth, Pre-request Scripts, Tests, Settings. Cada pestaña abre la sección de configuración relevante.
Para enviar una solicitud:
- Confirma el método y la URL en la barra superior
- Añade los encabezados necesarios en la pestaña Headers
- Si la solicitud tiene un cuerpo (POST, PUT), haz clic en Body y selecciona el tipo de contenido (JSON, datos de formulario, binario, etc.)
- Haz clic en Enviar
La respuesta aparece en la mitad inferior de la pestaña. Muestra el código de estado, el tiempo de respuesta y el tamaño de la respuesta. Las pestañas debajo de la respuesta te permiten ver el cuerpo (con resaltado de sintaxis para JSON y XML), los encabezados, las cookies y los resultados de las pruebas.
Uso de entornos: El selector de entorno en la parte superior del panel de Apidog establece el entorno activo. Las variables como {{base_url}} o {{token}} se resuelven a los valores definidos en ese entorno. Cambia de entorno para ejecutar la misma solicitud contra desarrollo, staging o producción sin editar las URLs.
Paso 5: Edita y crea solicitudes
Puedes editar las solicitudes existentes directamente en VS Code. Los cambios se sincronizan automáticamente con tu espacio de trabajo de Apidog.
Para crear una nueva solicitud:
- Haz clic derecho en una colección o carpeta en la barra lateral
- Selecciona "New Request" (Nueva Solicitud)
- Se abrirá una pestaña de solicitud en blanco
- Establece el método, URL, encabezados y cuerpo
- Presiona
Ctrl+S/Cmd+Spara guardar
La nueva solicitud aparece en la barra lateral y es inmediatamente accesible desde la aplicación de escritorio de Apidog, la interfaz web o el VS Code de cualquier compañero de equipo.
Cambiar nombre y organizar: Haz clic derecho en cualquier solicitud o carpeta en la barra lateral para acceder a las opciones de renombrar, mover, duplicar y eliminar. La reorganización arrastrar y soltar funciona dentro de la barra lateral.
Paso 6: Ejecuta pruebas
Apidog soporta aserciones de prueba que se ejecutan después de cada respuesta. En la pestaña Tests de una solicitud abierta, puedes escribir aserciones basadas en 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');
});
Después de hacer clic en Enviar, la pestaña Tests en la sección de respuesta muestra qué aserciones pasaron y cuáles fallaron, con el recuento de aciertos/fallos y mensajes de error para los fallos.
Ejecutar una colección: Haz clic derecho en una colección o carpeta en la barra lateral y selecciona "Run Collection" (Ejecutar Colección). Se abrirá un panel de ejecución donde puedes establecer iteraciones, retrasos entre solicitudes y entornos. Haz clic en Ejecutar para ejecutar todas las solicitudes en secuencia. Los resultados mostrarán el estado de aprobación/fallo de las aserciones de cada solicitud.
Paso 7: Usa la extensión de VS Code y la aplicación de escritorio juntas
La extensión de VS Code y la aplicación de escritorio comparten el mismo espacio de trabajo en tiempo real. No existe una versión "primaria"; son dos vistas de los mismos datos.
Flujos de trabajo comunes que utilizan ambos:
Diseña en escritorio, prueba en VS Code: Usa la aplicación de escritorio de Apidog para definir el esquema de tu API, escribir documentación y configurar servidores mock. Luego, cambia a VS Code para ejecutar solicitudes y escribir aserciones de prueba sin salir de tu entorno de desarrollo.
Revisión de API en equipo: Un desarrollador de backend actualiza un endpoint en la aplicación de escritorio. Un desarrollador frontend abre VS Code con la extensión de Apidog e inmediatamente ve la solicitud actualizada con los nuevos parámetros. Sin pull request, sin archivo JSON para importar.
Escritura de pruebas en contexto: Estás escribiendo código en VS Code para consumir una API. Sin cambiar de ventana, puedes abrir el panel de Apidog, encontrar el endpoint relevante, ejecutarlo, verificar la forma de la respuesta y volver a tu código, permaneciendo en la misma aplicación todo el tiempo.
Lo que la aplicación de escritorio hace mejor: Diseño de esquemas, configuración de servidores mock, publicación de documentación de API y gestión de un gran número de entornos. Estas son características prioritarias de la aplicación de escritorio que puedes consultar desde VS Code, pero que son más fáciles de configurar en la vista de escritorio a pantalla completa.
Paso 8: Comparte con tu equipo
Si trabajas con uno o dos desarrolladores más, añádelos a tu espacio de trabajo de Apidog. Desde la interfaz web de Apidog o la aplicación de escritorio, ve a la configuración de tu espacio de trabajo e invita a tus compañeros de equipo por correo electrónico.
Una vez que acepten la invitación e instalen la extensión de VS Code, su barra lateral mostrará las mismas colecciones que tú ves. Cualquier solicitud que añadan o modifiquen aparecerá inmediatamente para todos.
El nivel gratuito soporta hasta tres usuarios. Los cambios se sincronizan a través de la nube de Apidog, sin operaciones git, sin exportaciones de archivos, sin conflictos de fusión.
Preguntas frecuentes
¿Funciona la extensión de Apidog para VS Code sin la aplicación de escritorio?Sí. La extensión es un cliente completo para tu espacio de trabajo de Apidog. No necesitas instalar la aplicación de escritorio para usar la extensión.
¿Puedo usar la extensión de Apidog para VS Code sin conexión?Puedes ver y editar colecciones en caché mientras estás sin conexión. El envío de solicitudes a APIs externas requiere acceso a internet (así como la sincronización de cambios). El soporte completo sin conexión depende del estado de la caché de tu espacio de trabajo de Apidog.
¿Cómo importo colecciones existentes de Thunder Client o Postman?En la aplicación de escritorio de Apidog o en la interfaz web, ve a Importar y selecciona el formato adecuado (Thunder Client JSON, Postman collection v2.1, OpenAPI, etc.). Las colecciones importadas aparecerán en tu espacio de trabajo y serán inmediatamente accesibles desde la extensión de VS Code.
¿Es la extensión de VS Code lo mismo que crear un nuevo proyecto en Apidog?No. La extensión se conecta a tu espacio de trabajo de Apidog existente. Creas y gestionas los espacios de trabajo desde la aplicación de escritorio o la interfaz web. La extensión de VS Code es un cliente que te permite trabajar dentro de esos espacios de trabajo desde VS Code.
¿Pueden varias personas tener la misma colección abierta al mismo tiempo?Sí. La extensión no bloquea las colecciones para su edición. Si dos usuarios editan la misma solicitud simultáneamente, el último guardado prevalece. Para una edición coordinada, utiliza las funciones de colaboración de la aplicación de escritorio.
¿La extensión soporta el autocompletado de variables de entorno?Sí. Al escribir {{ en una URL o campo de parámetro, la extensión sugiere las variables disponibles del entorno activo. Esto ayuda a evitar errores tipográficos en los nombres de las variables.
La extensión de Apidog para VS Code funciona mejor como tu herramienta diaria cuando ya estás desarrollando APIs dentro de VS Code. El costo de configuración de dos minutos se amortiza rápidamente una vez que tus colecciones, entornos y espacio de trabajo de equipo son accesibles sin cambiar de ventanas.