> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Tab

> Edite o código-fonte do seu app diretamente na aba Code da Base44 com preview ao vivo e controle total para desenvolvedores.

A aba Code permite que você veja e edite o código-fonte do seu app diretamente, dando controle sobre a funcionalidade, design e comportamento do app enquanto vê as mudanças imediatamente.

<Note>
  A aba Code é para desenvolvedores que querem mais controle. Para mudanças
  mais simples, use o editor visual e as ferramentas de IA da Base44.
</Note>

<Frame caption="A interface da aba Code mostrando o código-fonte do seu app">
  <img src="https://mintcdn.com/base44/HSXlsKQvBkYN-DXR/codeer.png?fit=max&auto=format&n=HSXlsKQvBkYN-DXR&q=85&s=845561c033d8e1acadf501429ed5efbb" alt="A interface da aba Code mostrando o código-fonte do seu app" width="1915" height="958" data-path="codeer.png" />
</Frame>

## Acessar a aba Code

**Para abrir a aba Code:**

1. Vá para o dashboard do seu app.
2. Clique na aba **Code**.

A aba Code exibe os [arquivos do seu projeto](../overview/project-structure) em um explorador de arquivos à esquerda, com o editor de código ocupando o espaço principal.

<Frame caption="Acessando a aba Code pelo dashboard do app">
  <img src="https://mintcdn.com/base44/hrVkAqsRzoi9NYCy/images/codepanel.png?fit=max&auto=format&n=hrVkAqsRzoi9NYCy&q=85&s=26096b47df03c978b9a81a823cd179fd" alt="Acessando a aba Code pelo dashboard do app" width="1912" height="955" data-path="images/codepanel.png" />
</Frame>

## Navegar pela sua codebase

Use o recurso **Files used in this page** para ver quais arquivos alimentam a página que você está visualizando. Isso mostra exatamente quais arquivos de código estão rodando, então você sabe onde ir quando quiser editar a página ou investigar um problema.

Cada entrada da lista mostra o nome do arquivo e seu caminho de pasta, agrupados pelo local no seu projeto, como pages ou components.

**Para visualizar os arquivos usados em uma página:**

1. Vá para o editor do seu app.
2. Clique no ícone **More Actions** no canto superior direito.
3. Clique em **Files used in this page**.

<Frame caption="Visualizando arquivos usados em uma página do seu app">
  <img src="https://mintcdn.com/base44/ml9BQnGdt1cp4mqU/images/seeallfiles.png?fit=max&auto=format&n=ml9BQnGdt1cp4mqU&q=85&s=2017f1a72e6b880c7405b9c6c1d8784c" alt="Visualizando arquivos usados em uma página do seu app" width="2532" height="1208" data-path="images/seeallfiles.png" />
</Frame>

<Tip>
  Se quiser passar desta visão focada para a estrutura completa de arquivos, clique
  em **See all files**. Isso leva você para a visualização completa de arquivos de código para que possa
  continuar explorando a partir daí.
</Tip>

## Editar com preview ao vivo

A aba Code oferece uma visualização em tela dividida que mostra seu código de um lado e um preview ao vivo do seu app do outro. Isso permite ver as mudanças instantaneamente sem trocar de contexto.

<Frame caption="Visualização em tela dividida mostrando código e preview ao vivo">
  <img src="https://mintcdn.com/base44/Kb6mZTf4mNXOF_gr/images/split.png?fit=max&auto=format&n=Kb6mZTf4mNXOF_gr&q=85&s=3b0556cac2c3cac886d1332d10521dc4" alt="Visualização em tela dividida mostrando código e preview ao vivo" width="1908" height="390" data-path="images/split.png" />
</Frame>

**Para editar com preview ao vivo:**

1. Abra um arquivo na aba Code.
2. Clique no botão de tela dividida no canto superior direito.
3. Edite seu código à esquerda e veja as mudanças à direita.

**Cada vez que você faz mudanças no código:**

* Clique em **Save** na parte inferior da tela para aplicar suas mudanças e atualizar o preview com o código mais recente.
* Clique em **Discard** na parte inferior da tela se quiser descartar todas as edições não salvas e retornar à última versão salva do arquivo.

<Warning>
  **Importante:** Se você fizer mudanças no código do seu app, certifique-se de clicar
  em **Publish** para que elas entrem em produção no seu app.
</Warning>

Quando estiver pronto para sair da tela dividida, clique em **Exit split**.

Para desenvolvimento local com sua própria IDE, veja [GitHub Integration](../local-development/github).

## Revisar mudanças de código da IA

Quando a IA edita seu app, você pode abrir o modal **Code changes** para ver exatamente o que foi alterado antes de publicar. O modal mostra cada arquivo que a IA tocou, agrupado por pasta, com uma visualização de diff para cada um.

**Para abrir o modal Code changes:**

1. Vá para o chat de IA no editor do seu app.
2. Passe o mouse sobre uma mensagem em que a IA editou ou criou um arquivo.
3. Clique no ícone de três pontos ao lado dessa mudança e selecione **View Changes**.

Um modal abre com uma árvore de arquivos à esquerda e o diff do arquivo selecionado à direita. Uma barra de estatísticas na parte superior mostra quantos arquivos foram adicionados, modificados e excluídos.

Os arquivos na árvore são codificados por cor de acordo com o estado:

* **Verde** para arquivos recém-adicionados.
* **Âmbar** para arquivos modificados, que abrem em uma visualização de diff lado a lado.
* **Vermelho** para arquivos excluídos.

Clique em qualquer arquivo na árvore para ir direto ao diff.

## Perguntas frequentes

<AccordionGroup>
  <Accordion title="Posso editar todas as partes do código do meu app?">
    Sim. Você pode abrir e editar qualquer arquivo de código que apareça no painel
    de arquivos de código, incluindo pages, components, layouts e helpers de entidade. Se uma parte
    do app for gerada para você, ela ainda aparece como código normal que você
    pode modificar.
  </Accordion>

  <Accordion title="Preciso usar a tela dividida para editar código?">
    Não. Você pode trabalhar no editor de código em largura total se preferir mais espaço.
    A tela dividida é útil quando você quer ver o preview ao lado do código,
    mas pode desligá-la a qualquer momento e reabri-la depois.
  </Accordion>

  <Accordion title="O que acontece se eu clicar em Discard?">
    Discard remove todas as mudanças não salvas no arquivo ativo e restaura a última
    versão salva. Isso é útil se você tentar algo que não funciona e
    quer voltar rapidamente. Depois de clicar em Discard, você não consegue recuperar o
    código não salvo daquela sessão.
  </Accordion>

  <Accordion title="Preciso ser um desenvolvedor experiente para editar o código?">
    Você não precisa ser um expert, mas familiaridade básica com React e JSX
    ajuda. Você pode começar com pequenas mudanças, como atualizar texto, trocar
    componentes ou alterar estilos simples, e então passar para lógica mais avançada
    conforme ganha confiança
  </Accordion>
</AccordionGroup>

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>