> 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-es/transicion-a-la-nueva-ui-ux/visor-de-codigo-mejorado.md).

# Visor de código mejorado

## Resumen

El Visor de código se ha actualizado para ofrecer una experiencia más optimizada y potente. Ahora, dondequiera que aparezca código en DevOps, el Visor de código ofrece una experiencia unificada y coherente en todas las herramientas. Ofrece dos vistas, una vista de componente único y una vista de diferencias, que comparten el mismo diseño y flujo.

Más allá de la navegación y la comparación, el Visor de código incluye las funciones estándar de edición y visualización que esperas de un editor de código moderno, como resaltado de sintaxis, autocompletado, coincidencia de corchetes, autoindentación, coincidencia de selecciones y buscar y reemplazar.

Este artículo ofrece una mirada detallada a cada vista, incluidas capturas de pantalla de los lugares donde se usa el Visor de código en DevOps. Para obtener una descripción general de todos los nuevos cambios de la interfaz de usuario de DevOps, consulta el siguiente artículo.

* [Novedades](/devops/devops-es/transicion-a-la-nueva-ui-ux/novedades.md)

{% hint style="info" %}

#### Una experiencia coherente

El Visor de código ahora se ve y se comporta igual en todos los lugares donde aparece código en DevOps, así que solo necesitas aprender una interfaz.
{% endhint %}

## Vista de componente único

La vista de componente único tiene una barra lateral izquierda para la navegación por archivos, lo que te permite cambiar rápidamente entre los archivos de un componente. Por ejemplo, un **ApexClass** tiene un `cls` archivo y un `xml` archivo. Encontrarás la vista de componente único en las siguientes ubicaciones:

* **Organización** > **Componente**

  <div align="left"><figure><img src="https://2574462044-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>
* **Rama** > **Componente**

  <div align="left"><figure><img src="https://2574462044-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>

## Vista de diferencias

Con el nuevo visor de diferencias, cada componente afectado y sus archivos ahora se muestran en un menú de barra lateral izquierda, lo que te permite cambiar fácilmente entre archivos y componentes mientras las diferencias de código se muestran lado a lado para una comparación rápida.

La vista de diferencias compara dos versiones del mismo código lado a lado y resalta exactamente lo que cambió marcando las líneas agregadas, eliminadas y modificadas para que puedas revisar cada cambio de un vistazo. Las líneas coincidentes permanecen alineadas en ambos paneles, de modo que puedas seguir cualquier cambio hasta su contexto circundante a medida que avanzas por el archivo.

Encontrarás la vista de diferencias en las siguientes áreas:

* **Solicitud de extracción** > **Componentes modificados**

  <div align="left"><figure><img src="https://2574462044-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>
* **Fusión inteligente** > **Revisar cambios**

  <div align="left"><figure><img src="https://2574462044-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>
* **Protección contra sobrescritura** > **Resolver conflictos**

  <div align="left"><figure><img src="https://2574462044-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>
* **Rama** > **Confirmaciones**

  <div align="left"><figure><img src="https://2574462044-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-es/transicion-a-la-nueva-ui-ux/visor-de-codigo-mejorado.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.
