# GitHub Codespaces クライアントのトラブルシューティング
この記事では、GitHub Codespaces に使用するクライアントで発生する可能性がある issue のトラブルシューティング情報を提供します。
## VS Code のトラブルシューティング
VS Code デスクトップ アプリケーションで codespace を開くと、ローカル ワークスペースでの作業と比べていくつかの違いに気付くかもしれませんが、エクスペリエンスは似ているはずです。
問題が発生した場合、[`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces) リポジトリの VS Code エクスペリエンスを使用して、既知の issue を確認し、新しい issue をログすることができます。
### Visual Studio Code Insiders
Visual Studio Code Insiders は、最も頻繁にリリースが行われる VS Code です。 最新の機能とバグ修正がすべて含まれていますが、ビルドが壊れる原因になる新しい問題が含まれる場合もあります。
Insiders ビルドを使用していて正しくない動作に気づいた場合は、Visual Studio Code Stable に切り替えてもう一度やり直してみることをお勧めします。
Visual Studio Code Stable に切り替えるには、Visual Studio Code Insiders アプリケーションを閉じて、Visual Studio Code Stable アプリケーションを開き、codespace をもう一度開きます。
Visual Studio Code Stable で問題が修正されない場合、既知の issue を確認し、必要に応じて、VS Code エクスペリエンスに関する新しい issue を[`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces) リポジトリにログします。
### 簡易ブラウザーのトラブルシューティング
codespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの \[簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の `devcontainer.json` 構成ファイルで、アプリケーションが実行するポートの `onAutoForward` プロパティが `openPreview` に設定されている場合に発生します。
```json
"portsAttributes": {
"3000": {
"label": "Application",
"onAutoForward": "openPreview"
}
}
```
\[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。
1. VS Code で、 **\[ポート]** タブをクリックします。
2. ポートを右クリックし、 **\[エディターでプレビュー]** をクリックします。
![VS Code の \[ポート\] タブのポップアップ メニューのスクリーンショット。メニュー エントリ \[エディターでプレビュー\] が濃いオレンジ色の枠線で強調されています。](/assets/images/help/codespaces/preview-in-editor-vscode.png)
#### 簡易ブラウザー タブが自動的に開かない
`devcontainer.json` 構成ファイルでポートに `"onAutoForward": "openPreview"` が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。
`devcontainer.json` で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の `settings.json` ファイルに構成を書き込みます。 構成が codespace で `settings.json` に正しく書き込まれたことを確認できます。
1. codespace のターミナルで、次のコマンドを入力します。
```bash copy
cat ~/.vscode-remote/data/Machine/settings.json
```
2. `settings.json` ファイルに、次のような行が含まれていることを確認します。
```json
"remote.portsAttributes": {
"3000": {
"label": "Application",
"onAutoForward": "openPreview"
}
}
```
`settings.json` ファイルにこれらの設定が含まれていない場合は、ドット ファイルが有効になっているかどうか、およびドット ファイル内の構成で `settings.json` ファイルが上書きされているかどうかを確認します。 詳しくは、「[アカウントGitHub Codespaces のカスタマイズ](/ja/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#dotfiles)」をご覧ください。
#### アプリケーションが読み込まれない
\[簡易ブラウザー] タブが開き、実行中のアプリケーションではなくエラー ページ アイコンまたは空白ページが表示されることがあります。 これは、読み込む Web アプリケーションに、サイトのページが埋め込まれるドメインを制限するコンテンツ セキュリティ ポリシー (CSP) が含まれている場合に発生する可能性があります。 詳細については、MDN Web サイトの「[CSP: frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)」を参照してください。
アプリケーションの `frame-ancestors` セキュリティ ポリシーをローカルで変更して、簡易ブラウザーにアプリケーションを表示できる場合があります。 または、`frame-ancestors` ポリシーによって問題が発生している場合は、簡易ブラウザーではなく、通常のブラウザー タブで開いてアプリケーションを表示する必要があります。 これを行うには、VS Code の **\[ポート]** タブをクリックし、ポートを右クリックして、 **\[ブラウザーで開く]** をクリックします。