<div class="ghd-tool webui">

## Solução de problemas do cliente Web do Visual Studio Code

Se você encontrar problemas ao usar os GitHub Codespaces em um navegador que não seja baseado no Chromium, mude para um navegador baseado em Chromium, como Google Chrome ou Microsoft Edge. Como alternativa, confira os problemas conhecidos no navegador no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen) procurando problemas rotulados com o nome do navegador, como [`firefox`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+label%3Afirefox) ou [`safari`](https://github.com/Microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Asafari).

Se você encontrar problemas ao usar GitHub Codespaces em um navegador baseado em Chromium, verifique se há outro problema conhecido com o VS Code no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen).

### Diferenças em relação a trabalhar no VS Code localmente

Ao abrir um codespace no navegador usando o cliente Web do VS Code, você observará algumas diferenças em relação ao trabalho em um workspace local no aplicativo da área de trabalho do VS Code. Por exemplo, algumas teclas vinculadas serão diferentes ou estarão ausentes e algumas extensões poderão comportar-se de maneira diferente. Para ver um resumo, confira: [Limitações conhecidas e adaptações](https://code.visualstudio.com/docs/remote/codespaces#_known-limitations-and-adaptations) na documentação do VS Code.

Verifique se há problemas conhecidos e registre novos problemas em log com a experiência do VS Code no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces).

### Visual Studio Code Insiders

O Visual Studio Code Insiders é a versão mais frequente do VS Code. Ela tem todas as funcionalidades mais recentes e correções de erros, mas também pode ocasionalmente conter novos issues que resultem em uma criação anormal.

Se você estiver usando Insiders para criar e notificar comportamentos anormais, recomendamos mudar para a versão estável deVisual Studio Code e tentar novamente.

Clique em <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-gear" aria-label="Manage" role="img"><path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path></svg> no canto inferior esquerdo do editor e selecione **Mudar para Versão Estável…** . Se a versão da Web do VS Code não for carregada ou <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-gear" aria-label="Manage" role="img"><path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path></svg> não estiver disponível, force a mudança para o Visual Studio Code Estável acrescentando `?vscodeChannel=stable` à URL do codespace e carregando o codespace nessa URL.

Se o problema não for corrigido no Visual Studio Code Estável, verifique se há problemas conhecidos e, se necessário, registre um novo problema com a experiência do VS Code, no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces).

### Solução de problemas do Simple Browser

Quando você iniciar um aplicativo Web em um codespace, poderá visualizá-lo em execução no Simple Browser inserido em VS Code. Em alguns projetos, o aplicativo é aberto automaticamente em uma guia do Simple Browser no editor quando o aplicativo é iniciado. Isso acontece quando, no arquivo de configuração `devcontainer.json` do codespace, a propriedade `onAutoForward` da porta em que o aplicativo é executado está definida como `openPreview`.

```json
"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}
```

Se a guia do Simple Browser não abrir automaticamente, você poderá abri-lo manualmente para ver o aplicativo.

1. Em VS Code, clique na guia **Portas**.
2. Clique com o botão direito do mouse na porta e clique **em Visualizar no Editor**.

   ![Captura de tela do menu pop-up na guia Portas do VS Code. A entrada de menu "Visualização no Editor" está realçada com um contorno laranja escuro.](/assets/images/help/codespaces/preview-in-editor-vscode.png)

#### A guia Simple Browser não é aberta automaticamente

Se o arquivo de configuração `devcontainer.json` especificar `"onAutoForward": "openPreview"` para uma porta, mas o Simple Browser não abrir automaticamente quando um aplicativo for iniciado, verifique se o aplicativo foi iniciado na porta especificada na configuração. O aplicativo poderá iniciar em uma porta diferente se a porta pretendida estiver ocupada.

Para implementar a configuração de porta especificada em `devcontainer.json`, o GitHub Codespaces grava a configuração no arquivo `settings.json` do VS Code quando um codespace é criado. Você pode verificar se a configuração foi gravada corretamente no `settings.json` no codespace.

1. No terminal no codespace, insira o comando a seguir.

   ```bash copy
   cat ~/.vscode-remote/data/Machine/settings.json
   ```

2. Verifique se o arquivo `settings.json` contém linhas como a seguir.

   ```json
    "remote.portsAttributes": {
        "3000": {
            "label": "Application",
            "onAutoForward": "openPreview"
        }
    }
   ```

Se o arquivo `settings.json` não contiver essas configurações, verifique se há dotfiles habilitados e se alguma configuração nos dotfiles está substituindo o arquivo `settings.json`. Para saber mais, confira [Como personalizar o GitHub Codespaces para sua conta](/pt/enterprise-cloud@latest/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#dotfiles).

#### O aplicativo não é carregado

Ocasionalmente, você pode descobrir que a guia do Simple Browser é aberta, mas exibe um ícone de página de erro ou uma página em branco em vez do aplicativo em execução. Isso pode acontecer se o aplicativo Web que você está carregando incluir uma CSP (política de segurança de conteúdo) que restrinja os domínios nos quais as páginas do site podem ser inseridas. Para obter mais informações, confira [CSP: frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) no site do mdn.

Talvez você possa alterar a política de segurança do aplicativo `frame-ancestors` localmente para que o aplicativo seja exibido no Simple Browser. Como alternativa, se uma política `frame-ancestors` estiver causando o problema, você poderá exibir o aplicativo abrindo-o em uma guia de navegador regular em vez de no Simple Browser. Para fazer isso, clique na guia **Portas** em VS Code, clique com o botão direito do mouse na porta e clique em **Abrir no Navegador**.

</div>

<div class="ghd-tool vscode">

## Solução de problemas do VS Code

Ao abrir um codespace no aplicativo da área de trabalho VS Code, você pode observar algumas diferenças em comparação com o trabalho em um workspace local, mas a experiência deve ser semelhante.

Se houver problemas, verifique se há problemas conhecidos e registre novos problemas em log com a experiência do VS Code no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces).

### Visual Studio Code Insiders

O Visual Studio Code Insiders é a versão mais frequente do VS Code. Ela tem todas as funcionalidades mais recentes e correções de erros, mas também pode ocasionalmente conter novos issues que resultem em uma criação anormal.

Se você estiver usando Insiders para criar e notificar comportamentos anormais, recomendamos mudar para a versão estável deVisual Studio Code e tentar novamente.

Para mudar para o Visual Studio Code Estável, feche o aplicativo do Visual Studio Code Insiders, abra o aplicativo Visual Studio Code Estável e reabra o codespace.

Se o problema não for corrigido no Visual Studio Code Estável, verifique se há problemas conhecidos e, se necessário, registre um novo problema com a experiência do VS Code, no repositório [`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces).

### Solução de problemas do Simple Browser

Quando você iniciar um aplicativo Web em um codespace, poderá visualizá-lo em execução no Simple Browser inserido em VS Code. Em alguns projetos, o aplicativo é aberto automaticamente em uma guia do Simple Browser no editor quando o aplicativo é iniciado. Isso acontece quando, no arquivo de configuração `devcontainer.json` do codespace, a propriedade `onAutoForward` da porta em que o aplicativo é executado está definida como `openPreview`.

```json
"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}
```

Se a guia do Simple Browser não abrir automaticamente, você poderá abri-lo manualmente para ver o aplicativo.

1. Em VS Code, clique na guia **Portas**.
2. Clique com o botão direito do mouse na porta e clique **em Visualizar no Editor**.

   ![Captura de tela do menu pop-up na guia Portas do VS Code. A entrada de menu "Visualização no Editor" está realçada com um contorno laranja escuro.](/assets/images/help/codespaces/preview-in-editor-vscode.png)

#### A guia Simple Browser não é aberta automaticamente

Se o arquivo de configuração `devcontainer.json` especificar `"onAutoForward": "openPreview"` para uma porta, mas o Simple Browser não abrir automaticamente quando um aplicativo for iniciado, verifique se o aplicativo foi iniciado na porta especificada na configuração. O aplicativo poderá iniciar em uma porta diferente se a porta pretendida estiver ocupada.

Para implementar a configuração de porta especificada em `devcontainer.json`, o GitHub Codespaces grava a configuração no arquivo `settings.json` do VS Code quando um codespace é criado. Você pode verificar se a configuração foi gravada corretamente no `settings.json` no codespace.

1. No terminal no codespace, insira o comando a seguir.

   ```bash copy
   cat ~/.vscode-remote/data/Machine/settings.json
   ```

2. Verifique se o arquivo `settings.json` contém linhas como a seguir.

   ```json
    "remote.portsAttributes": {
        "3000": {
            "label": "Application",
            "onAutoForward": "openPreview"
        }
    }
   ```

Se o arquivo `settings.json` não contiver essas configurações, verifique se há dotfiles habilitados e se alguma configuração nos dotfiles está substituindo o arquivo `settings.json`. Para saber mais, confira [Como personalizar o GitHub Codespaces para sua conta](/pt/enterprise-cloud@latest/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#dotfiles).

#### O aplicativo não é carregado

Ocasionalmente, você pode descobrir que a guia do Simple Browser é aberta, mas exibe um ícone de página de erro ou uma página em branco em vez do aplicativo em execução. Isso pode acontecer se o aplicativo Web que você está carregando incluir uma CSP (política de segurança de conteúdo) que restrinja os domínios nos quais as páginas do site podem ser inseridas. Para obter mais informações, confira [CSP: frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) no site do mdn.

Talvez você possa alterar a política de segurança do aplicativo `frame-ancestors` localmente para que o aplicativo seja exibido no Simple Browser. Como alternativa, se uma política `frame-ancestors` estiver causando o problema, você poderá exibir o aplicativo abrindo-o em uma guia de navegador regular em vez de no Simple Browser. Para fazer isso, clique na guia **Portas** em VS Code, clique com o botão direito do mouse na porta e clique em **Abrir no Navegador**.

</div>