# Reportar pela extensão

URL: /reportar/extensao

Instale a extensão no Chrome ou no Edge, entre na instância e envie reports com captura automática.

A extensão grava console, erros, requisições e as ações do QA (cliques, navegação, recargas) da aba desde que a página carrega. Foi testada no Chrome e no Edge.

## Instalar [#instalar]

A instalação é manual e acontece uma vez.

<Steps>
<Step>

### Baixar o ZIP [#baixar-o-zip]

No dashboard, clique em **Extensão** na barra lateral e depois em **Baixar ZIP**.

<Figure src="/images/extension-download.png" alt="Página Instalar a extensão do Mira com o botão Baixar ZIP e os passos" caption="A página da extensão, com o ZIP e os passos de instalação." />

</Step>
<Step>

### Descompactar numa pasta permanente [#descompactar-numa-pasta-permanente]

O navegador carrega a extensão a partir dessa pasta toda vez que abre. Se a pasta for apagada, a extensão para.

</Step>
<Step>

### Carregar no navegador [#carregar-no-navegador]

Abra `chrome://extensions` (no Edge, `edge://extensions`), ative o **Modo do desenvolvedor**, no canto superior direito, e clique em **Carregar sem compactação**. Escolha a pasta que contém o arquivo `manifest.json`.

</Step>
<Step>

### Fixar na barra [#fixar-na-barra]

Clique no ícone de quebra-cabeça do navegador e fixe o Mira.

</Step>
</Steps>

A página **Extensão** indica quando detecta a extensão. Se ela diz que não detectou e você já instalou, recarregue a aba e confira a permissão de acesso ao site.

## Atualizar [#atualizar]

Não há atualização automática.

1. Baixe o ZIP novo pelo dashboard e substitua o conteúdo da mesma pasta.
2. Em `chrome://extensions`, clique no ícone de recarregar do card do Mira.
3. Recarregue a aba da aplicação testada.

Os reports pendentes continuam salvos depois da atualização.

## Entrar [#entrar]

<Steps>
<Step>

### Abrir o Mira [#abrir-o-mira]

Clique no ícone do Mira. Na primeira abertura, ele usa o painel lateral.

</Step>
<Step>

### Informar a instância [#informar-a-instância]

Digite o endereço do Mira da sua empresa e clique em **Validar instância**.

</Step>
<Step>

### Entrar com a conta [#entrar-com-a-conta]

Há dois caminhos. Em ambos, a extensão guarda um token pessoal no navegador, mas não a senha.

- **Email e senha:** preencha **Email** e **Senha** na tela **Entrar no Mira**.
- **Entrar pelo Mira:** clique em **Entrar pelo Mira**. A extensão mostra um código e o texto "Abra o Mira, digite este código e aprove". Clique em **Aprovar no Mira**, que abre a página `/auth/extension` numa aba nova, entre no Mira se pedir (com senha ou com Google), digite o código que a extensão mostra e clique em **Continuar**. Confira o código e clique em **Aprovar**. A extensão fica conectada em segundos. Quem entra só pelo Google usa este caminho.

O código vale 10 minutos e a extensão mostra **Aguardando aprovação…** até a resposta. **Cancelar** interrompe a espera. Se você clicar em **Recusar** no Mira, a extensão avisa "O pedido foi recusado no Mira"; se o código vencer, avisa "O código expirou. Peça outro." Digite o código você mesmo: abrir um link que traz o código pronto não aprova nada.

<Figure src="/images/extension-approval.png" alt="Página do Mira Entrar pela extensão com o campo Código mostrado na extensão" caption="A página de aprovação pede o código que a extensão mostra." />

</Step>
</Steps>

<TodoPrint>Painel da extensão na tela Entrar no Mira, com os campos Email e Senha, o botão Entrar pelo Mira e, depois do clique, o código com Aprovar no Mira. Nome planejado: `extension-login.png`. Print manual.</TodoPrint>

Para sair, abra **Configurações** pelo ícone de engrenagem e clique em **Sair**.

## Reportar [#reportar]

<Steps>
<Step>

### Abrir a aplicação [#abrir-a-aplicação]

Abra a aplicação testada. Se o endereço pertence a um ambiente cadastrado, o painel mostra o projeto e o ambiente. Se não pertence, escolha o projeto.

</Step>
<Step>

### Reproduzir o problema [#reproduzir-o-problema]

A extensão já está gravando console, erros, requisições e ações. Se acabou de instalar ou atualizar, recarregue a aplicação antes de reproduzir, para capturar também o que acontece no carregamento.

</Step>
<Step>

### Capturar [#capturar]

Clique no ícone do Mira ou use `Alt+Shift+M`. Um report novo abre na barra de captura: **Screenshot**, **Elemento**, **Replay** (quando o projeto tem replay), **Gravar aba** e **Gravar desktop**. No **Screenshot**, clique na página para capturar a parte visível ou arraste para recortar. `Esc` cancela e volta à barra. A seta ao lado tem **Página inteira**. Para escrever primeiro, use **Escrever sem captura**. Detalhes em [Evidências](/reportar/evidencias).

Cada modo também tem um atalho, que abre o Mira e já começa a captura:

| Atalho | O que faz |
| --- | --- |
| `Alt+Shift+R` | Recorta uma área |
| `Alt+Shift+S` | Captura a tela inteira, sem overlay |
| `Alt+Shift+G` | Grava a aba |

Para trocar qualquer um, abra `chrome://extensions/shortcuts`. O tooltip de cada modo mostra o atalho atual.

</Step>
<Step>

### Preencher o formulário [#preencher-o-formulário]

Depois da captura, o formulário mostra a imagem em **Anexos**. O tipo começa em **Bug**; troque para **Melhoria** ou **Sugestão** se for o caso. O formulário é o mesmo para os três: **Título**, **Descrição** em Markdown, com os botões **Escrever** (lápis) e **Visualizar** (olho), e **Prioridade**, que é opcional. Se o projeto tem [templates](/administrar/templates), o texto do template aparece como sugestão nos campos vazios: pressione `Tab` para usá-lo, ou `Escape` logo depois para desfazer. **Usar**, na barra que aparece depois do texto do template, faz o mesmo, e as setas da barra trocam de template quando o tipo tem mais de um. [Boas práticas](/reportar/boas-praticas) explica o que escrever.

</Step>
<Step>

### Conferir os dados técnicos [#conferir-os-dados-técnicos]

O botão **Dados técnicos** diz quantos itens vão anexados e abre a lista. Console, erros, rede e ações vêm marcados. LocalStorage, sessionStorage e cookies vêm desmarcados. Abra cada item para conferir o conteúdo antes de enviar.

</Step>
<Step>

### Enviar [#enviar]

Clique em **Enviar report**. A confirmação aparece no lugar do formulário: o link do report vai para a área de transferência, **Abrir report** abre o report e **Novo report** limpa o formulário. Quando a cópia falha, a confirmação mostra o link para copiar à mão.

</Step>
</Steps>

## Modos de abertura [#modos-de-abertura]

Na engrenagem, escolha como a extensão abre: **Painel lateral**, **Popup da ação** ou **Janela separada**. O popup fecha ao clicar fora, e o ícone o reabre no rascunho. O painel lateral e a janela separada ficam abertos enquanto você usa a página.

## Projeto e ambiente fixos [#projeto-e-ambiente-fixos]

Por padrão, a extensão identifica o projeto e o ambiente pelo endereço da aba. Para fixar outro contexto neste site, abra **Configurações**, clique em **Carregar meus projetos**, escolha projeto e ambiente e clique em **Lembrar neste site**. **Voltar ao automático** desfaz a escolha.

## Sem conexão [#sem-conexão]

Se o Mira estiver fora do ar ou a sessão expirar, o report fica em **Envios** e é reenviado quando a conexão voltar. O reenvio é automático, então o cabeçalho só mostra `{n} envios pendentes` quando um envio falha. **Reenviar** antecipa uma tentativa, e **Descartar** apaga o report salvo no navegador. Fechar o navegador não perde o report.

## Próximos passos [#próximos-passos]

- [Evidências: capturas, elemento e replay](/reportar/evidencias)
- [Boas práticas para escrever um bom report](/reportar/boas-praticas)
- [Triar e acompanhar](/triar)