Descubra facilmente o comportamento da API com uma extensão do Chrome que gera automaticamente especificações OpenAPI em tempo real para qualquer aplicativo ou site.

Reporte um bug · Solicite um recurso

OpenAPI DevTools é uma extensão do Chrome que gera especificações OpenAPI em tempo real a partir de solicitações de rede. Uma vez instalado, ele adiciona uma nova guia ao Chrome DevTools chamada OpenAPI. Enquanto a ferramenta estiver aberta, ela converte automaticamente as solicitações de rede em uma especificação.

Recursos:

Gere instantaneamente uma especificação OpenAPI 3.1 para qualquer site ou aplicativo apenas usando-o

Mescla automaticamente novos cabeçalhos de solicitação e resposta, corpos e parâmetros de consulta por ponto de extremidade

Clique em um parâmetro de caminho e o aplicativo mesclará automaticamente solicitações existentes e futuras correspondentes

Veja a especificação dentro da ferramenta usando o Redocly e faça o download com um clique

(Voltar ao topo)

Faça o download e extraia o arquivo zip

No Chrome, acesse chrome: // extensions

No canto superior direito, ative a alternância do modo de desenvolvedor

No canto superior esquerdo, clique em Carregar sem compactação e selecione o diretório dist extraído

Abra uma nova guia e selecione OpenAPI nas ferramentas do desenvolvedor (abra com cmd+i ou ctrl+i)

(Voltar ao topo)

A especificação será preenchida automaticamente com base em solicitações JSON que são disparadas enquanto você navega na web. No menu de configurações, você pode filtrar hosts e parametrizar caminhos em URLs. Uma vez feito isso, todas as solicitações existentes e futuras correspondentes a esse ponto de extremidade serão mescladas. Esse processo é irreversível, mas você pode limpar a especificação e reiniciar a qualquer momento.

Quando o mesmo ponto de extremidade responde com dados diferentes, como um valor que às vezes é uma string e às vezes nulo, a especificação para esse valor será ou string ou nulo. Todas as informações são consideradas na especificação final. Se você perceber algo faltando em uma solicitação, acione uma solicitação que contenha as informações ausentes.

(Voltar ao topo)

Para desenvolver o projeto:

npm install

npm run build

Acesse chrome: // extensions

No canto superior direito, ative a alternância do modo de desenvolvedor

No canto superior esquerdo, clique em Carregar sem compactação e selecione o diretório dist extraído

Agora você deve ver a ferramenta no Chrome DevTools. Você pode interagir com ela como uma página normal, incluindo a inspeção do aplicativo React.

Extensions Reloader é sugerido para atualizar a ferramenta após executar npm run build e atualizar o diretório dist

(Voltar ao topo)