Usar el panel del programador

Al depurar los componentes de SharePoint Framework, puede obtener información adicional sobre cómo funcionan e interactúan con los demás componentes de la página mediante el panel del programador.

El panel para desarrolladores está disponible en páginas modernas de SharePoint y en SharePoint Workbench local y hospedado.

Abrir el panel del programador

Para abrir el panel, presione CTRL+F12 en el teclado. Cuando el panel esté abierto, para cerrarlo, presione CTRL+F12 de nuevo.

Información disponible en el panel del programador

El panel del programador proporciona información adicional sobre todos los componentes de SharePoint Framework presentes en la página. Esta información le ayudará a resolver problemas de rendimiento y de otro tipo en las soluciones de SharePoint Framework.

Seguimiento

Al crear componentes de SharePoint Framework, puede usar el registrador integrado para registrar información en el código. Los mensajes registrados aparecerán en la pestaña Seguimiento del panel del programador.

A continuación, se muestra cómo registrar un mensaje detallado en el panel del programador de SharePoint Framework:

// [...] shortened for brevity
import { Log } from '@microsoft/sp-core-library';

const LOG_SOURCE: string = 'HelloWorldWebPart';

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    Log.verbose(LOG_SOURCE, 'Rendering...', this.context.serviceScope);
    // [...] shortened for brevity
  }
}

Los mensajes registrados aparecerán en el panel del programador.

Con el registrador integrado, puede registrar mensajes detallados (Log.verbose()), de información (Log.info()), de advertencia (Log.warn()) y de error (Log.error()).

Importante

Los mensajes que se registran con el registrador integrado de SharePoint Framework sólo son visibles en el panel del programador y se pierden después de actualizar la página. Si necesita una solución de registro para su uso en producción, considere la posibilidad de usar otras soluciones, como Aplicación de Azure Insights.

Rendimiento

La pestaña Rendimiento del panel del programador muestra información de tiempo para todos los componentes de SharePoint Framework en la página actual.

Para cada componente, el panel para desarrolladores muestra cuánto tiempo se ha dedicado a esperar la respuesta del servidor, cargar el módulo, inicializar el componente, recuperar los datos y representar el componente. Si la página se carga más lenta después de agregar el componente a la misma, puede usar esta información para comprobar si alguna determinada fase del ciclo de vida de los componentes ralentiza la página.

Manifiestos

La página Manifiestos en el panel del programador muestra información sobre los manifiestos de todos los componentes de SharePoint Framework presentes en la página actual.

Con la información de los manifiestos puede comprobar qué componentes están presentes en la página, la versión de cada componente que se carga y desde qué dirección URL. Esta información es útil si quiere asegurarse de que el componente se actualizó correctamente y se carga desde la ubicación correcta con las propiedades correctas.