Depurar soluciones de SharePoint Framework en Visual Studio Code

Artículo
03/21/2023

Visual Studio Code es un editor de código popular que suele utilizarse para crear soluciones de SharePoint Framework. Al configurar la depuración de la solución de SharePoint Framework en Visual Studio Code, puede recorrer el código y corregir los errores más eficazmente.

También puede ver los pasos necesarios para habilitar la depuración en Visual Studio Code en este vídeo del canal de YouTube de Microsoft 365 Platform Communtiy (PnP):

Requisitos previos

La manera más fácil de configurar Visual Studio Code (VS Code) para depurar soluciones de SharePoint Framework es mediante el depurador de JavaScript incluido en VS Code para depurar Chrome & Edge.

También se necesita Google Chrome o Microsoft Edge.

Configuraciones de depuración

Puede ubicar las configuraciones de depuración en el archivo ./vscode/launch.json en la carpeta del área de trabajo de Visual Studio Code.

Configurar un punto de interrupción

En Visual Studio Code, abra el archivo de código fuente del elemento web principal y agregue un punto de interrupción en la primera línea del método render(), ya sea seleccionando el margen a la izquierda del número de línea o resaltando la línea de código en el editor y presionando la tecla F9.
En Visual Studio Code, en el menú Ver, seleccione la opción Terminal integrado o seleccione Ctrl+` en el teclado.
En el terminal, ejecute el siguiente comando:
```
gulp serve --nobrowser
```
Al ejecutar este comando, se compila la solución de SharePoint Framework e inicia el servidor web local para atender los archivos de salida. Dado que el depurador inicia su propia instancia del explorador, use el argumento --nobrowser para evitar que la tarea de servicio abra una ventana del explorador.

Iniciar la depuración en Visual Studio Code

Una vez finalizada la tarea gulp, pase al área de código de Visual Studio Code y seleccione F5 (o, en el menú Depuración, seleccione la opción Iniciar depuración).

Se inicia el modo de depuración en Visual Studio Code, que cambia el color de la barra de estado a naranja y abre una ventana nueva de Google Chrome que muestra el área de trabajo de SharePoint.

Nota:

En este momento, el punto de interrupción está deshabilitado porque aún no se ha cargado el código del elemento web. SharePoint Framework carga elementos web a petición solo después de que se hayan agregado a la página.

Visual Studio Code en modo de depuración junto a Google Chrome con el área de trabajo de SharePoint

Agregar un elemento web al lienzo

Para comprobar que la depuración funciona, en el área de trabajo, agregue el elemento web al lienzo.

Cuadro de herramientas de elemento web abierto en SharePoint Workbench

Tenga en cuenta que, con el código cargado en la página, el indicador de punto de interrupción cambia a activo.

Punto de interrupción activo después de agregar el elemento web al lienzo

Si ahora vuelve a cargar la página, se alcanza el punto de interrupción en Visual Studio Code, de forma que puede inspeccionar todas las propiedades y recorrer el código.

Punto de interrupción en Visual Studio Code

Depurar la solución con el área de trabajo hospedada

Cuando compile soluciones de SharePoint Framework que se comuniquen con SharePoint, querrá comprobar la interacción entre la solución y SharePoint. Para hacerlo fácilmente, puede utilizar la versión hospedada del SharePoint Workbench, que está disponible para los espacios empresariales de Microsoft 365 en https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

Al compilar soluciones de SharePoint Framework, realizará pruebas regularmente, por lo que es conveniente crear una configuración de depuración independiente para la versión hospedada del SharePoint Workbench.

Depurar la solución de elemento web con el área de trabajo hospedada

Abra .vscode/launch.json y actualice la propiedad url en la configuración de área de trabajo alojada en la URL de su sitio de SharePoint.
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
En Visual Studio Code, active el panel Depuración y, en la lista Configuraciones, seleccione la configuración Hosted workbench (Área de trabajo hospedada) que acaba de agregar.
Inicie la depuración; para ello, presione F5 o seleccione la opción Iniciar depuración en el menú Depuración. Visual Studio Code cambia al modo de depuración, indicado por la barra de estado naranja, y la extensión Debugger for Chrome abre una nueva instancia de Google Chrome con la página de inicio de sesión de Microsoft 365.
Después de iniciar sesión, agregue el elemento web al lienzo y actualice el área de trabajo. Verá que se alcanza el punto de interrupción de Visual Studio Code y puede inspeccionar las variables y recorrer el código.

Depurar la solución de extensión con el área de trabajo hospedada

La depuración de una extensión en un área de trabajo hospedada es similar a la de un elemento web con algunas diferencias principales.

Abra .vscode/launch.json y actualice la propiedad url en la configuración de área de trabajo alojada en la URL de su sitio de SharePoint.
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
En Visual Studio Code, active el panel Depuración y, en la lista Configuraciones, seleccione la configuración Hosted workbench (Área de trabajo hospedada) que acaba de agregar.
Después de iniciar el gulp serve en el Terminal, inicie la depuración; para ello, seleccione F5 o seleccione la opción Iniciar depuración en el menú Depuración. Visual Studio Code cambia al modo de depuración, indicado por la barra de estado naranja, y la extensión Debugger for Chrome abre una nueva instancia de Google Chrome con la página de inicio de sesión de Microsoft 365.
En la pestaña de trabajo que se abrió en el explorador vaya a una página de SharePoint Online para probar la extensión.
Anexe los siguientes parámetros de cadena de consulta a la dirección URL. Necesita actualizar el id. para que coincida con su propio identificador de extensión. Está disponible en el archivo HelloWorldApplicationCustomizer.manifest.json.

Precaución

La sangría de saltos & de línea se ha agregado al fragmento de código siguiente para mejorar la legibilidad. El texto siguiente debe estar en una sola línea sin espacios en blanco.
```
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
    "location":"ClientSideExtension.ApplicationCustomizer",
    "properties":{
      "testMessage":"Hello as property!"
    }
}}
```
Más información sobre los parámetros de URL:
- loadSPFX=true: garantiza que SharePoint Framework se carga en la página. Por motivos de rendimiento, el marco no carga salvo que se haya registrado al menos una extensión. Como no hay componentes registrados, se debe cargar explícitamente el marco.
- debugManifestsFile: especifica que quiere cargar componentes de SPFx que se entregan localmente. El cargador solo busca componentes en el catálogo de aplicaciones (para la solución implementada) y en el servidor del manifiesto de SharePoint (para las bibliotecas del sistema).
- customActions: simula una acción personalizada. Al implementar y registrar este componente en un sitio, creará este objeto CustomAction y describirá las diferentes propiedades que puede establecer en él.
  - Key: use el GUID de la extensión como la clave que se asociará a la acción personalizada. Tiene que coincidir con el valor de id. de la extensión, que está disponible en el archivo manifest.json de la extensión.
  - Ubicación: el tipo de acción personalizada. Use ClientSideExtension.ApplicationCustomizer para la extensión del personalizador de aplicación.
  - Propiedades: un objeto JSON opcional que contiene propiedades que están disponibles a través del miembro this.properties. En este ejemplo de Hola mundo, se ha definido una propiedad de testMessage.
La URL completa será similar a la siguiente:

Precaución

La sangría de saltos & de línea se ha agregado al fragmento de código siguiente para mejorar la legibilidad. El texto siguiente debe estar en una sola línea sin espacios en blanco.
```
https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx
    ?loadSPFX=true
    &debugManifestsFile=https://localhost:4321/temp/manifests.js
    &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
        "location":"ClientSideExtension.ApplicationCustomizer",
        "properties":{
          "testMessage":"Hello as property!"
        }
    }}
```
Seleccione Cargar scripts de depuración para seguir cargando scripts del host local.

Cuando se cargue la página, debería ver la extensión en la página (en este caso, una extensión de comando de vista de lista):

Además ahora puede alternar puntos de interrupción y recorrer el código:

Depurar con Microsoft Edge o proyectos anteriores

Si usa una versión anterior del generador de Yeoman de SharePoint Framework o quiere depurar usando Microsoft Edge, siga estos pasos para crear el archivo launch.json de forma manual.

Nota:

Para que pueda depurar con Microsoft Edge, deberá instalar la Actualización de abril de 2018 de Windows 10 que incluye el Protocolo de DevTools de Microsoft Edge.

Crear la configuración de depuración para el área de trabajo hospedada

En Visual Studio Code, abra el archivo .vscode/launch.json.

Para Microsoft Edge, copie la configuración de depuración existente y use la dirección URL del área de trabajo hospedada:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "msedge",
      "request": "launch",
      "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      }
    }
  ]
}

Para Chrome, copie la configuración de depuración existente y use la dirección URL del área de trabajo hospedada:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "-incognito"
      ]
    }
  ]
}

Compartir a través de