> For the complete documentation index, see [llms.txt](https://docs.flosum.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flosum.com/devops/devops-pt-br/transicao-para-a-nova-ui-ux/visualizador-de-codigo-aprimorado.md).

# Visualizador de código aprimorado

## Visão geral

O Visualizador de Código foi atualizado para uma experiência mais ágil e poderosa. Agora, onde quer que o código apareça no DevOps, o Visualizador de Código oferece uma experiência unificada e consistente em todas as ferramentas. Ele oferece duas visualizações, uma visualização de componente único e uma visualização de diferenças, que compartilham o mesmo design e fluxo.

Além da navegação e da comparação, o Visualizador de Código inclui os recursos padrão de edição e visualização que você espera de um editor de código moderno, como realce de sintaxe, autocompletar, correspondência de parênteses, autoindentação, correspondência de seleção e localizar e substituir.

Este artigo apresenta uma visão detalhada de cada visualização, incluindo capturas de tela dos locais onde o Visualizador de Código é usado no DevOps. Para uma visão geral de todas as novas mudanças na interface do usuário do DevOps, veja o artigo a seguir.

* [O que há de novo](/devops/devops-pt-br/transicao-para-a-nova-ui-ux/o-que-ha-de-novo.md)

{% hint style="info" %}

#### Uma experiência consistente

Agora, o Visualizador de Código tem a mesma aparência e comportamento em todos os lugares onde o código aparece no DevOps, então você só precisa aprender uma interface.
{% endhint %}

## Visualização de componente único

A visualização de componente único tem uma barra lateral à esquerda para navegação de arquivos, permitindo alternar rapidamente entre os arquivos de um componente. Por exemplo, uma **ApexClass** tem um `cls` arquivo e um `xml` arquivo. Você encontrará a visualização de componente único nos seguintes locais:

* **Organização** > **Componente**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FYKkD72ed3VU475WdshKY%2FImprovedCodeViewer-Single-Branch.png?alt=media&amp;token=b6cf1ea7-7fc9-4102-9b87-ef917f9d3a10" alt="" width="563"><figcaption></figcaption></figure></div>
* **Branch** > **Componente**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FXZCMKHxKKKsQac1ww0Et%2FImprovedCodeViewer-Single-Organization.png?alt=media&amp;token=8f6da681-e276-4308-b8d6-de3be42a0ceb" alt="" width="563"><figcaption></figcaption></figure></div>

## Visualização de diferenças

Com o novo visualizador de diferenças, cada componente afetado e seus arquivos agora são exibidos em um menu de barra lateral à esquerda, permitindo alternar facilmente entre arquivos e componentes enquanto as diferenças de código são exibidas lado a lado para comparação rápida.

A visualização de diferenças compara duas versões do mesmo código lado a lado e destaca exatamente o que mudou, marcando linhas adicionadas, removidas e modificadas para que você possa revisar cada alteração rapidamente. As linhas correspondentes permanecem alinhadas em ambos os painéis, para que você possa rastrear qualquer mudança até seu contexto ao redor conforme navega pelo arquivo.

Você encontrará a visualização de diferenças nas seguintes áreas:

* **Pull Request** > **Componentes alterados**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F4w25lNYqXJ0Nk1yHCoO8%2FImprovedCodeViewer-Diff-PullRequests.png?alt=media&amp;token=616166c3-3bed-43d6-bba1-c07445363506" alt="" width="563"><figcaption></figcaption></figure></div>
* **Mesclagem inteligente** > **Revisar alterações**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F9pO5ogq9mvcPAuZfmzlS%2FImprovedCodeViewer-Diff-SmartMerge.png?alt=media&amp;token=5d9489fc-6700-4d2e-b3ad-7e4bb3c38c80" alt="" width="563"><figcaption></figcaption></figure></div>
* **Proteção contra substituição** > **Resolver conflitos**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F766uZiw8mIoCctPGycnj%2FImprovedCodeViewer-Diff-OverwritePotection.png?alt=media&amp;token=14dc6539-d8e4-4d51-b34b-bb04cdd4b418" alt="" width="563"><figcaption></figcaption></figure></div>
* **Branch** > **Commits**

  <div align="left"><figure><img src="https://2465342021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FGbdC3wVPZtmgfZok28FG%2FImprovedCodeViewer-Diff-Commits.png?alt=media&amp;token=be6380f8-9eb2-4be9-a3cd-2c3fa2ca321c" alt="" width="563"><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flosum.com/devops/devops-pt-br/transicao-para-a-nova-ui-ux/visualizador-de-codigo-aprimorado.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
