Visual Studio Code で SharePoint Framework ソリューションをデバッグする

[アーティクル]
03/21/2023

Visual Studio Code は、SharePoint Framework ソリューションのビルドによく使用される人気のあるコードエディターです。 SharePoint Framework ソリューションのデバッグを Visual Studio Code 内でセットアップすると、コードをより効率的にステップスルーし、エラーを修正できます。

Visual Studio Code でデバッグを有効にするために必要な手順は、Microsoft 365 Platform Communtiy (PnP) の YouTube チャンネルのこちらのビデオでも確認できます。

前提条件

SharePoint Framework ソリューションをデバッグするように Visual Studio Code (VS Code) を構成する最も簡単な方法は、VS Code に含まれる JavaScript デバッガーを使用して Chrome & Edge をデバッグすることです。

Google Chrome または Microsoft Edge も必要です。

デバッグ構成

デバッグ構成は、Visual Studio Code のワークスペースフォルダーの下にある ./vscode/launch.json ファイルにあります。

ブレークポイントを構成する

Visual Studio Code でメイン Web パーツのソースファイルを開き、render() メソッドの最初の行にブレークポイントを追加します。そのためには、行番号の左側にある余白を選択するか、エディターで対象コード行を強調表示して F9 キーを選択します。
Visual Studio Code の [表示] メニューで [統合ターミナル] オプションを選択するか、キーボードで Ctrl+` キーを選択します。
ターミナルで次のコマンドを実行します。
```
gulp serve --nobrowser
```
このコマンドを実行すると、SharePoint Framework ソリューションがビルドされ、ローカル Web サーバーが起動して出力ファイルが提供されます。デバッガーはブラウザーの独自のインスタンスを開始するので、--nobrowser 引数を使用して、serve タスクによってブラウザーウィンドウが開かないようにします。

Visual Studio Code でデバッグを開始する

gulp タスクが終了したら、フォーカスを Visual Studio Code のコード領域に移動し、F5 を選択します (または、[デバッグ] メニューで [デバッグの開始] オプションを選択します)。

Visual Studio Code がデバッグモードで開始され、ステータスバーの色がオレンジに変わり、Google Chrome の新しいウィンドウが開いて SharePoint ワークベンチが表示されます。

注:

この時点で、Web パーツのコードがまだ読み込まれていないため、ブレークポイントは無効です。 SharePoint Framework によってオンデマンドで Web パーツが読み込まれるのは、Web パーツがページに追加された後だけです。

デバッグモードの Visual Studio Code と、その隣に SharePoint ワークベンチが表示されている Google Chrome

Web パーツをキャンバスに追加する

デバッグが機能していることを確認するには、ワークベンチでキャンバスに Web パーツを追加します。

SharePoint ワークベンチに開いている Web パーツツールボックス

ページにコードが読み込まれたら、ブレークポイントインジケーターがアクティブに変わったことを確認してください。

キャンバスに Web パーツが追加された後のアクティブ状態のブレークポイント

ページをこの状態で再読み込みすると、Visual Studio Code のブレークポイントがヒットし、すべてのプロパティを検査し、コードをステップスルーできるようになります。

Visual Studio Code でヒットしているブレークポイント

ホストされているワークベンチを使ったデバッグソリューション

SharePoint と通信する SharePoint Framework ソリューションをビルドするときは、SharePoint で対象ソリューション間の相互作用を検証できます。この検証を簡単に行うには、ホストされているバージョンの SharePoint ワークベンチを使用できます。このワークベンチは https://yourtenant.sharepoint.com/_layouts/workbench.aspx にあるすべての Microsoft 365 テナントで利用できます。

SharePoint Framework ソリューションをビルドするときは、そのようなテストを定期的に実行し、ホストされているバージョンの SharePoint ワークベンチ用のデバッグ構成を別個に作成しておくことをお勧めします。

ホストされているワークベンチを使用した Web パーツソリューションのデバッグ

.vscode/launch.json を開き、[ホストされているワークベンチ] 構成の url プロパティを SharePoint サイトの URL に更新します。
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
Visual Studio Code で [デバッグ] ウィンドウをアクティブにして、[構成] リストで新たに追加した [ホストされているワークベンチ] 構成を選択します。
F5 キーを選択するか、[デバッグ] メニューで [デバッグの開始] オプションを選択して、デバッグを開始します。 Visual Studio Code のステータスバーがオレンジ色になってデバッグモードに切り替わったことが示されます。Debugger for Chrome 拡張機能によって Google Chrome の新しいインスタンスに Microsoft 365 サインインページが開きます。
サインインしたら、Web パーツをキャンバスに追加し、ワークベンチを更新します。 Visual Studio Code にヒットしているブレークポイントが表示され、変数を検査し、コードをステップスルーできます。

ホストされているワークベンチを使用した拡張機能ソリューションのデバッグ

ホストされているワークベンチで拡張機能をデバッグする方法は、Web パーツの手順と類似していますが、いくつかの重要な違いがあります。

.vscode/launch.json を開き、[ホストされているワークベンチ] 構成の url プロパティを SharePoint サイトの URL に更新します。
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
Visual Studio Code で [デバッグ] ウィンドウをアクティブにして、[構成] リストで新たに追加した [ホストされているワークベンチ] 構成を選択します。
ターミナルで gulp serve を開始したら、F5 キーを押すか、[デバッグ] メニューの [デバッグの開始] オプションを選択して、デバッグを開始します。 Visual Studio Code のステータスバーがオレンジ色になってデバッグモードに切り替わったことが示されます。Debugger for Chrome 拡張機能によって Google Chrome の新しいインスタンスに Microsoft 365 サインインページが開きます。
ブラウザーで開かれたワークベンチのタブで、拡張機能をテストする SharePoint Online のページに移動します。
次のクエリ文字列パラメーターを URL に追加します。独自の拡張機能 ID と一致するように ID を更新する必要がある点に注意してください。これは、HelloWorldApplicationCustomizer.manifest.json ファイル内にあります。

注意

&読みやすくするために、次のスニペットに改行インデントが追加されました。次のテキストは、スペースなしの単一行にする必要があります。
```
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
    "location":"ClientSideExtension.ApplicationCustomizer",
    "properties":{
      "testMessage":"Hello as property!"
    }
}}
```
URL パラメーターの詳細:
- loadSPFX=true は SharePoint Framework が確実にページに読み込まれるようにします。パフォーマンス上の理由から、少なくとも 1 つの拡張機能が登録されていないとフレームワークは読み込まれません。登録されているコンポーネントがないため、フレームワークを明示的に読み込む必要があります。
- debugManifestsFile は、ローカルに提供されている SPFx コンポーネントを読み込むように指定します。ローダーはアプリカタログ (展開したソリューション用) と SharePoint マニフェストサーバー (システムライブラリ用) のコンポーネントのみを検索します。
- customActions は、カスタムアクションをシミュレートします。このコンポーネントをサイトに展開して登録するときに、この CustomAction オブジェクトを作成して、そのオブジェクトに設定できる各種プロパティをすべて記述します。
  - Key は、カスタムアクションに関連付けるキーとして拡張機能の GUID を使用します。これは、拡張機能の ID 値と一致する必要があります。この ID 値は、拡張機能の manifest.json ファイルにあります。
  - Location は、カスタムアクションの種類です。アプリケーションカスタマイザー拡張機能には、ClientSideExtension.ApplicationCustomizer を使用します。
  - Properties は、this.properties メンバーを介して利用できるプロパティを含む、オプションの JSON オブジェクトです。この HelloWorld の例では、testMessage プロパティを定義しました。
完全な URL は、次のようになります。

注意

&読みやすくするために、次のスニペットに改行インデントが追加されました。次のテキストは、スペースなしの単一行にする必要があります。
```
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!"
        }
    }}
```
[デバッグスクリプトを読み込む] を選択して、ローカルホストからのスクリプトの読み込みを続行します。

ページが読み込まれると、ページ上の拡張機能 (この場合は、リストビューコマンド拡張機能) を確認できるようになります。

さらに、ブレークポイントを切り替えて、コードをステップ実行できるようにもなっています。

Microsoft Edge または以前のプロジェクトでのデバッグ

以前のバージョンの SharePoint Framework Yeoman ジェネレーターを使用している場合や Microsoft Edge でデバッグする場合は、次に示す手順を実行して、launch.json ファイルを手動で作成します。

注:

Microsoft Edge でデバッグするためには、Microsoft Edge DevTools プロトコルが含まれている Windows 10 April 2018 Update をインストールする必要があります。

ホストされているワークベンチのデバッグ構成を作成する

Visual Studio Code で、.vscode/launch.json ファイルを開きます。

Microsoft Edge の場合は、既存のデバッグ構成をコピーして、ホストされているワークベンチの URL を使用します。

{
  "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/*"
      }
    }
  ]
}

Chrome の場合は、既存のデバッグ構成をコピーして、ホストされているワークベンチの URL を使用します。

{
  "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"
      ]
    }
  ]
}

次の方法で共有

Visual Studio Code で SharePoint Framework ソリューションをデバッグする

前提条件