GitHub Codespaces クライアントのトラブルシューティング

Visual Studio Code Web クライアントのトラブルシューティング

Chromium ベース以外のブラウザーで GitHub Codespaces を使用しているときに issue が発生した場合は、Google Chrome や Microsoft Edge などの Chromium ベースのブラウザーに切り替えてみてください。 また、firefox や safari など、お使いのブラウザー名のラベルが付いた issue を検索して、microsoft/vscode リポジトリで、お使いのブラウザーに関する既知の issue を確認してください。

Chromium ベースのブラウザーで GitHub Codespaces を使用しているときに issue が発生した場合は、microsoft/vscode リポジトリで、VS Code に関する別の既知の issue が発生しているかどうかを確認できます。

ローカルでの VS Code 内の作業との相違

ブラウザーで VS Code Web クライアントを使用して codespace を開くと、VS Code デスクトップ アプリケーションのローカル ワークスペースで作業する場合といくつか違いがあることに気付くでしょう。 たとえば、一部のキー バインドは異なるか、見つからないか、一部の拡張機能の動作が異なる場合があります。 概要については、VS Code のドキュメントの「既知の制限事項と対応」をご覧ください。

microsoft/vscode リポジトリの VS Code エクスペリエンスを使用して、既知の issue を確認し、新しい issue をログすることができます。

Visual Studio Code Insiders

Visual Studio Code Insiders は、最も頻繁にリリースが行われる VS Code です。 最新の機能とバグ修正がすべて含まれていますが、ビルドが壊れる原因になる新しい問題が含まれる場合もあります。

Insiders ビルドを使用していて正しくない動作に気づいた場合は、Visual Studio Code Stable に切り替えてもう一度やり直してみることをお勧めします。

エディターの左下隅にある をクリックし、 [安定バージョンへの切り替え...] を選択します。VS Code Web クライアントが読み込まれないか、 が利用できない場合、?vscodeChannel=stable を codespace URL に追加し、その URL の codespace を読み込むことで、Visual Studio Code Stable 版に強制的に切り替えることができます。

Visual Studio Code Stable で問題が修正されない場合、既知の issue を確認し、必要に応じて、VS Code エクスペリエンスに関する新しい issue をmicrosoft/vscode リポジトリにログします。

簡易ブラウザーのトラブルシューティング

codespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの [簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の devcontainer.json 構成ファイルで、アプリケーションが実行するポートの onAutoForward プロパティが openPreview に設定されている場合に発生します。

"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}

[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。

1. VS Code で、 [ポート] タブをクリックします。

2. ポートを右クリックし、 [エディターでプレビュー] をクリックします。

   

簡易ブラウザー タブが自動的に開かない

devcontainer.json 構成ファイルでポートに "onAutoForward": "openPreview" が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。

devcontainer.json で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の settings.json ファイルに構成を書き込みます。 構成が codespace で settings.json に正しく書き込まれたことを確認できます。

1. codespace のターミナルで、次のコマンドを入力します。

   Bash

   cat ~/.vscode-remote/data/Machine/settings.json
   

2. settings.json ファイルに、次のような行が含まれていることを確認します。

    "remote.portsAttributes": {
        "3000": {
            "label": "Application",
            "onAutoForward": "openPreview"
        }
    }
   

settings.json ファイルにこれらの設定が含まれていない場合は、ドット ファイルが有効になっているかどうか、およびドット ファイル内の構成で settings.json ファイルが上書きされているかどうかを確認します。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」をご覧ください。

アプリケーションが読み込まれない

[簡易ブラウザー] タブが開き、実行中のアプリケーションではなくエラー ページ アイコンまたは空白ページが表示されることがあります。 これは、読み込む Web アプリケーションに、サイトのページが埋め込まれるドメインを制限するコンテンツ セキュリティ ポリシー (CSP) が含まれている場合に発生する可能性があります。 詳細については、MDN Web サイトの「CSP: frame-ancestors」を参照してください。

アプリケーションの frame-ancestors セキュリティ ポリシーをローカルで変更して、簡易ブラウザーにアプリケーションを表示できる場合があります。 または、frame-ancestors ポリシーによって問題が発生している場合は、簡易ブラウザーではなく、通常のブラウザー タブで開いてアプリケーションを表示する必要があります。 これを行うには、VS Code の [ポート] タブをクリックし、ポートを右クリックして、 [ブラウザーで開く] をクリックします。

"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}