Compartir a través de

Tutorial: Escritura de un visualizador en C#

Importante

A partir de la versión 17.9 de Visual Studio 2022, los visualizadores ahora se pueden escribir en .NET 6.0+ que se ejecutan fuera de proceso mediante el nuevo modelo de extensibilidad VisualStudio.Extensibility. Para las extensiones creadas con el nuevo modelo, consulte en su lugar la documentación en Creación de visualizadores del depurador de Visual Studio. Si necesita admitir versiones anteriores de Visual Studio o desea enviar los visualizadores personalizados como parte de un archivo DLL de biblioteca, use la información de este artículo, que solo se aplica al modelo anterior de desarrollo de extensiones (VSSDK).

En este tutorial se muestra cómo escribir un visualizador sencillo mediante C#. El visualizador que se crea en este tutorial muestra el contenido de una cadena mediante un formulario Windows Forms. Este visualizador de cadenas simple no es especialmente útil en sí mismo, pero muestra los pasos básicos que debe seguir para crear visualizadores más útiles para otros tipos de datos.

Nota:

Los cuadros de diálogo y los comandos de menú que ve pueden diferir de los descritos en Ayuda, en función de la configuración activa o la edición. Para cambiar la configuración, vaya al menú Herramientas y elija Importar y exportar configuración. Para obtener más información, vea Restablecer la configuración.

El código del visualizador debe colocarse en un archivo DLL que el depurador lee. Por lo tanto, el primer paso es crear un proyecto de biblioteca de clases para el archivo DLL.

Creación manual de un visualizador

Complete las siguientes tareas para crear un visualizador.

Creación de un proyecto de biblioteca de clases

  1. Para crear un nuevo proyecto de biblioteca de clases, seleccione Archivo>nuevo>proyecto.

  2. En la lista desplegable lenguaje, seleccione C#.

  3. En el cuadro de búsqueda, escriba biblioteca de clases. Seleccione Biblioteca de clases (.NET Framework) y, a continuación, seleccione Siguiente.

  4. En el cuadro de diálogo, escriba el nombre MyFirstVisualizery seleccione Crear.

Para el proyecto del visualizador, asegúrese de seleccionar una biblioteca de clases de .NET Framework y no .NET. Aunque el visualizador debe ser .NET Framework, la aplicación que llama puede ser .NET.

Después de crear la biblioteca de clases, debe agregar una referencia al Microsoft.VisualStudio.DebuggerVisualizers.DLL archivo para poder usar las clases definidas allí. Antes de agregar la referencia, debe cambiar el nombre de algunas clases para usar nombres significativos.

Cambie el nombre de Class1.cs y agregue Microsoft.VisualStudio.DebuggerVisualizers.

  1. En el Explorador de soluciones, haga clic con el botón derecho en Class1.cs y seleccione Cambiar nombre en el menú contextual.

  2. Cambie el nombre de Class1.cs a algo significativo, como DebuggerSide.cs.

    Nota:

    Visual Studio cambia automáticamente la declaración de clase en DebuggerSide.cs para que coincida con el nuevo nombre de archivo. Si ve un mensaje para completar la acción, seleccione Sí.

  3. En el Explorador de soluciones, haga clic con el botón derecho en Referencias y elija Agregar referencia en el menú contextual.

  4. En el cuadro de diálogo Agregar referencia , en la pestaña Examinar , seleccione Examinar y busque el Microsoft.VisualStudio.DebuggerVisualizers.DLL.

    Puede encontrar el archivo DLL en <el subdirectorio Directorio> de instalación de Visual Studio\Common7\IDE\PublicAssemblies del directorio de instalación de Visual Studio.

  5. Selecciona Aceptar.

  6. En DebuggerSide.cs, agregue lo siguiente a las using directivas :

    using Microsoft.VisualStudio.DebuggerVisualizers;

Ahora está listo para crear el código del lado depurador. Este código se ejecuta dentro del depurador para mostrar la información que desea visualizar. En primer lugar, debe cambiar la declaración del objeto DebuggerSide para configurar la herencia de la clase base DialogDebuggerVisualizer.

Heredar desde DialogDebuggerVisualizer

  1. En DebuggerSide.cs, vaya a la siguiente línea de código:

    public class DebuggerSide

  2. Cambio del código a:

    public class DebuggerSide : DialogDebuggerVisualizer

  3. Agregue un constructor vacío para que pueda pasar al constructor de la clase base la directiva de serialización que se usará para comunicarse entre los componentes del visualizador.

    public DebuggerSide() : base(FormatterPolicy.NewtonsoftJson) // or FormatterPolicy.Json
{
}

    Nota:

    Debido a los problemas de seguridad descritos en Consideraciones del lado del depurador especial para .NET 5.0 y versiones posteriores, a partir de la versión 17.11 de Visual Studio 2022, los visualizadores no podrán especificar las políticas Legacy.

  4. DialogDebuggerVisualizer tiene un método abstracto (Show) que debe invalidar.

Invalidar el método DialogDebuggerVisualizer.Show

En public class DebuggerSide, agregue el método siguiente:

protected override void Show(IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)
{
}

El Show método contiene el código que realmente crea el cuadro de diálogo del visualizador u otra interfaz de usuario y muestra la información que se ha pasado al visualizador desde el depurador. Debe agregar el código que crea el cuadro de diálogo y muestra la información. En este tutorial, usará un cuadro de mensaje de Windows Forms. En primer lugar, debe agregar una referencia y una directiva using para System.Windows.Forms.

Agregar System.Windows.Forms

  1. En el Explorador de soluciones, haga clic con el botón derecho en Referencias y elija Agregar referencia en el menú contextual.

  2. En el cuadro de diálogo Agregar referencia , en la pestaña Examinar , seleccione Examinar y busque la System.Windows.Forms.DLL.

    Puede encontrar el archivo DLL en C:\Windows\Microsoft.NET\Framework\v4.0.30319.

  3. Selecciona Aceptar.

  4. En DebuggerSide.cs, agregue lo siguiente a las using directivas :

    using System.Windows.Forms;

Ahora, agregará código para crear y mostrar la interfaz de usuario del visualizador. Dado que este ejemplo es el primer visualizador, puede simplificar la interfaz de usuario y usar un cuadro de mensaje.

Mostrar la salida del visualizador en un cuadro de diálogo

  1. En el Show método , agregue la siguiente línea de código:

    MessageBox.Show(objectProvider.GetObject().ToString());

    Este código de ejemplo no incluye el control de errores. Debe incluir el control de errores en un visualizador real o en cualquier otro tipo de aplicación.

  2. En el menú Compilar , elija Compilar MyFirstVisualizer. El proyecto debe compilarse con éxito. Corrija los errores de compilación antes de continuar.

El código del lado depurador ya está completo. Sin embargo, hay un paso más; el atributo que indica al lado del depurador qué colección de clases compone el visualizador.

Agregar el tipo a visualizar para el código del lado del depurador

En el código del lado depurador, especifique el tipo a visualizar (el origen del objeto) para el depurador mediante el DebuggerVisualizerAttributeatributo. La Target propiedad establece el tipo que se va a visualizar.

  1. Agregue el siguiente código de atributo a DebuggerSide.cs, después de las directivas using, pero antes de namespace MyFirstVisualizer:

    [assembly:System.Diagnostics.DebuggerVisualizer(
typeof(MyFirstVisualizer.DebuggerSide),
typeof(VisualizerObjectSource),
Target = typeof(System.String),
Description = "My First Visualizer")]

  2. En el menú Compilar , elija Compilar MyFirstVisualizer. El proyecto debe generarse correctamente. Corrija los errores de compilación antes de continuar.

    En este momento, el primer visualizador está completado. Si ha seguido los pasos correctamente, puede compilar el visualizador e instalarlo en Visual Studio. Sin embargo, antes de instalar un visualizador en Visual Studio, debe probarlo para asegurarse de que se ejecuta correctamente. Ahora se crea un arnés de prueba para ejecutar el visualizador sin instalarlo en Visual Studio.

Agregar un método de prueba para mostrar el visualizador

  1. Agregue el método siguiente a la clase public DebuggerSide:

    public static void TestShowVisualizer(object objectToVisualize)
{
   VisualizerDevelopmentHost visualizerHost = new VisualizerDevelopmentHost(objectToVisualize, typeof(DebuggerSide));
   visualizerHost.ShowVisualizer();
}

  2. En el menú Compilar , elija Compilar MyFirstVisualizer. El proyecto debe construirse correctamente. Corrija los errores de compilación antes de continuar.

    A continuación, debe crear un proyecto ejecutable para llamar a la DLL del visualizador. Para simplificar, use un proyecto de aplicación de consola.

Adición de un proyecto de aplicación de consola a la solución

  1. En el Explorador de soluciones, haga clic con el botón derecho en la solución, elija Agregar y, a continuación, seleccione Nuevo proyecto.

  2. Elija Archivo>Nuevo>Proyecto. En la lista desplegable lenguaje, elija C#. En el cuadro de búsqueda, escriba aplicación de consola y, a continuación, elija Aplicación de consola (.NET Framework) o Aplicación de consola para .NET. Seleccione Siguiente. En el cuadro de diálogo que aparece, escriba el nombre MyTestConsoley seleccione Crear.

Nota:

Si desea probar fácilmente el visualizador mediante un arnés de prueba, cree una aplicación de consola de .NET Framework. En su lugar, puede crear una aplicación de consola de .NET, pero el arnés de prueba descrito más adelante no es compatible con .NET, por lo que tendrá que instalar el visualizador para probarlo. Para una aplicación de consola de .NET, primero cree la aplicación de consola aquí, agregue las referencias necesarias de DLL y de proyecto, y luego siga los pasos descritos en Adición de un objeto de datos del lado del depurador. Para escenarios de ASP.NET Core, consulte Consideraciones especiales del lado del depurador para .NET 5.0 y más recientes.

Ahora, debe agregar las referencias necesarias para que MyTestConsole pueda llamar a MyFirstVisualizer.

Agregar referencias necesarias a MyTestConsole

  1. En el Explorador de soluciones, haga clic con el botón derecho en MyTestConsole y elija Agregar referencia en el menú contextual.

  2. En el cuadro de diálogo Agregar referencia , abra la pestaña Examinar y seleccione Microsoft.VisualStudio.DebuggerVisualizers.DLL.

  3. Selecciona Aceptar.

  4. Haga clic con el botón derecho en MyTestConsole y elija Agregar referencia de nuevo.

  5. En el cuadro de diálogo Agregar referencia , abra la pestaña Proyectos y seleccione MyFirstVisualizer.

  6. Selecciona Aceptar.

Ahora, agregue el código para finalizar el arnés de pruebas.

Agregar código a MyTestConsole

  1. En el Explorador de soluciones, haga clic con el botón derecho en Program.cs y elija Cambiar nombre en el menú contextual.

  2. Edite el nombre de Program.cs a algo más significativo, como TestConsole.cs.

    Nota:

    Visual Studio cambia automáticamente la declaración de clase en TestConsole.cs para que coincida con el nuevo nombre de archivo.

  3. En TestConsole.cs, agregue el código siguiente a las using directivas :

    using MyFirstVisualizer;

  4. En el método Main, agregue el código siguiente:

    String myString = "Hello, World";
DebuggerSide.TestShowVisualizer(myString);

Ahora, está listo para probar el primer visualizador.

Prueba del visualizador

  1. En el Explorador de soluciones, haga clic con el botón derecho en MyTestConsole y elija Establecer como proyecto de inicio en el menú contextual.

  2. En el menú Depurar , elija Iniciar.

    La aplicación de consola se inicia y el Visualizador aparece y muestra la cadena "Hello, World".

Felicidades. Ha creado y probado su primer visualizador.

Si quiere usar el visualizador en Visual Studio en lugar de llamarlo desde el arnés de prueba, debe instalarlo. Para obtener más información, vea Cómo: Instalar un visualizador.

Agregar un objeto de datos del lado del depurador

En esta sección, cambia desde el System.String objeto de datos a un objeto de datos personalizado.

  1. En el Explorador de soluciones, haga clic con el botón derecho en la solución, elija Agregar y, a continuación, seleccione Nuevo proyecto. En la lista desplegable lenguaje, elija C#. En el cuadro de búsqueda, escriba biblioteca de clases y, a continuación, elija Biblioteca de clases (.NET Framework) o Biblioteca de clases para .NET Standard.

    Nota:

    Si usa una aplicación de consola de prueba de .NET Framework, asegúrese de crear un proyecto de biblioteca de clases de .NET Framework.

  2. Seleccione Siguiente. En el cuadro de diálogo que aparece, escriba el nombre MyDataObjecty seleccione Crear.

  3. (Solo biblioteca de clases de .NET Standard) En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y elija Editar archivo de proyecto. Cambie el <TargetFramework> valor a netstandard2.0.

    <TargetFramework>netstandard2.0</TargetFramework>

  4. Dentro del MyDataObject espacio de nombres, reemplace el código predeterminado por el código siguiente.

    [Serializable] 
public class CustomDataObject
{
   public CustomDataObject()
   {
      this.MyData = "MyTestData";
   }
   public string MyData { get; set; }
}

    En el caso de un visualizador de solo lectura, como en este ejemplo, no es necesario implementar métodos de VisualizerObjectSource.

    A continuación, actualice el proyecto MyFirstVisualizer para usar el nuevo objeto de datos.

  5. En el Explorador de soluciones en el proyecto MyFirstVisualizer, haga clic con el botón derecho en el nodo Referencias y elija Agregar referencia.

  6. En Proyectos, seleccione el proyecto MyDataObject .

  7. En el código de atributo de DebuggerSide.cs, actualice el valor target y cambie System.String a MyDataObject.CustomDataObject.

    Target = typeof(MyDataObject.CustomDataObject),

  8. En el proyecto MyFirstVisualizer, reemplace el código del Show método por el código siguiente.

    var data = objectProvider.GetObject() as MyDataObject.CustomDataObject;

// You can replace displayForm with your own custom Form or Control.  
Form displayForm = new Form();
displayForm.Text = data.MyData;
windowService.ShowDialog(displayForm);

    El código anterior usa una propiedad del objeto de datos para mostrar en el título del formulario.

    A continuación, actualice la aplicación de consola para usar el objeto de datos personalizado.

  9. En el Explorador de soluciones en el proyecto MyTestConsole, haga clic con el botón derecho en el nodo Referencias o dependencias y agregue una referencia de proyecto a MyDataObject.

  10. En Program.cs, reemplace el código del Main método por el código siguiente.

    // String myString = "Hello, World";
CustomDataObject customDataObject = new CustomDataObject();

DebuggerSide.TestShowVisualizer(customDataObject);

  11. (aplicación de consola .NET) Incluya la llamada a TestShowVisualizer en una instrucción try-catch, ya que no se admite el arnés de pruebas.

    try
{
      DebuggerSide.TestShowVisualizer(customDataObject);
}
catch (Exception) {
}

    La aplicación de consola necesita una referencia en tiempo de ejecución al visualizador. Puede mantener la referencia manteniendo el código precedente en lugar de comentarlo.

  12. Para una aplicación de consola de .NET Framework, puede ejecutar el arnés de pruebas (presione F5) o puede seguir las instrucciones de Cómo: Instalar un visualizador.

    Si ejecuta la aplicación con el arnés de prueba, la aplicación muestra Windows Form.

  13. Para una aplicación de consola de .NET, copie el MyFirstVisualizer.dll y el MyDataObject.dll a las carpetas descritas en Cómo: Instalar un visualizador.

  14. Después de instalar el visualizador, establezca un punto de interrupción, ejecute la aplicación de consola y mantenga el puntero sobre customDataObject. Si todo está configurado correctamente, debería ver el icono de lupa VisualizadorIcon.

    Icono de lupa del visualizador.

    Cuando selecciona MyFirstVisualizer en la lupa, verá el formulario que muestra en su título el texto del objeto de datos.

    Visualizador que muestra un formulario Windows Forms

Contenido relacionado

  • Last updated on