開発者ダッシュボードを使用する

SharePoint Framework コンポーネントのデバッグ時に、開発者ダッシュボードを使用すると、コンポーネントがページ上の別のコンポーネントと連動および対話する状況に関する追加情報を取得できます。

開発者ダッシュボードは、最新の SharePoint ページと、ホストされているローカルの SharePoint Workbench で使用できます。

開発者ダッシュボードを開く

ダッシュボードを開くには、キーボードで CtrlF12 キーを押します+。 ダッシュボードが開いたら、もう一度 CtrlF12キーを+押して閉じます。

開発者ダッシュボードで入手可能な情報

開発者ダッシュボードでは、ページに存在するすべての SharePoint Framework コンポーネントに関する追加情報が得られます。 この情報は、SharePoint Framework ソリューションのパフォーマンスなどの問題を解決する際に役立ちます。

トレース

SharePoint Framework コンポーネントのビルド時に、組み込みのロガーを使用するとコード内で情報を記録できます。 記録したメッセージは、開発者ダッシュボードの [トレース] タブに表示されます。

次に、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
  }
}

記録したメッセージは、開発者ダッシュボードに表示されます。

組み込みのロガーを使用すると、詳細 (Log.verbose())、情報 (Log.info())、警告 (Log.warn()) およびエラー (Log.error()) のメッセージを記録できます。

重要

組み込みの SharePoint Framework ロガーを使用して記録したメッセージは、開発者ダッシュボードにのみ表示され、ページを更新すると失われます。 運用環境で使用するログ ソリューションが必要な場合は、Azure アプリケーション Insights などの他のソリューションの使用を検討してください。

パフォーマンス

開発者ダッシュボードの [パフォーマンス] タブには、現在のページ上にあるすべての SharePoint Framework コンポーネントについてのタイミング情報が表示されます。

各コンポーネントについて、開発者ダッシュボードには、サーバーからの応答の待機、モジュールの読み込み、コンポーネントの初期化、データの取得、およびコンポーネントのレンダリングに費やされた時間が表示されます。 ページにコンポーネントを追加した後でページの読み込みが遅くなった場合は、この情報を使用して、コンポーネントのライフサイクルの特定の段階でページの速度が低下しているかどうかを確認できます。

マニフェスト

開発者ダッシュボードの [マニフェスト] ページには、現在のページに存在するすべての SharePoint Framework コンポーネントのマニフェストに関する情報が表示されます。

マニフェストからの情報を使用すると、どのコンポーネントがページに存在するか、各コンポーネントのどのバージョンが、どの URL から読み込まれているかを確認できます。 この情報は、コンポーネントが適切に更新されていることと、正しいプロパティで正しい場所から読み込まれていることを確かめる必要がある場合に役立ちます。