通过

使用开发人员仪表板

调试 SharePoint 框架组件时，可以获取与这些组件如何工作以及如何使用开发人员仪表板与页面上的其他组件交互相关的其他信息。

在新式 SharePoint 页面上激活的开发人员仪表板

开发人员仪表板可在新式 SharePoint 页面以及托管和本地 SharePoint Workbench 上使用。

打开开发人员仪表板

若要打开仪表板，请在键盘上按 Ctrl+F12。 打开仪表板时，若要将其关闭，请再次按 Ctrl+F12 。

开发人员仪表板上提供的信息

开发人员仪表板为你提供了与页面上的所有 SharePoint 框架组件相关的其他信息。 这些信息可以帮助你解决 SharePoint 框架解决方案中的性能和其他问题。

跟踪

构建 SharePoint 框架组件时，可以使用内置记录器记录代码中的信息。 记录的信息将显示在开发人员仪表板中的“跟踪”选项卡上。

开发人员仪表板中激活的“跟踪”选项卡

接下来是如何将详细信息记录到 SharePoint 框架开发人员仪表板：

// [...] 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
  }
}

记录的信息将显示在开发人员仪表板中。

开发人员仪表板中显示的从 SharePoint 框架 Web 部件记录的详细信息

使用内置记录器，你可以记录 (Log.verbose()) 详细信息、(Log.info()) 信息、(Log.warn()) 警告信息和 (Log.error()) 错误消息。

重要

使用内置 SharePoint 框架记录器记录的信息仅显示在开发人员仪表板中，并且在刷新页面之后将会丢失。 如果需要在生产环境中使用日志记录解决方案，请考虑使用其他解决方案，例如 Azure 应用程序 Insights。

性能

开发人员仪表板中的“性能”选项卡显示与当前页面上的所有 SharePoint 框架组件相关的时间信息。

开发人员仪表板中激活的“性能”选项卡

对于每个组件，开发人员仪表板显示等待来自服务器的响应、加载模块、初始化组件、检索数据和呈现组件所花费的时间。 如果在将组件添加到页面之后页面的加载速度变慢，则可以使用此信息来验证是否是组件生命周期中的任何特殊阶段使页面加载速度减慢。

清单

开发人员仪表板中的“清单”选项卡显示与当前页面上的所有 SharePoint 框架组件的清单文件相关的信息。

开发人员仪表板中激活的“清单”选项卡

可以使用清单中的信息验证页面上存在的组件、所加载的每个组件的版本以及这些组件是通过哪个 URL 加载的。 如果需要确保组件正确更新并且是通过正确的权限从正确的位置加载，则此信息非常有用。