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"
}
}
[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。
-
VS Code で、 [ポート] タブをクリックします。
-
ポートを右クリックし、 [エディターでプレビュー] をクリックします。
簡易ブラウザー タブが自動的に開かない
devcontainer.json
構成ファイルでポートに "onAutoForward": "openPreview"
が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。
devcontainer.json
で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の settings.json
ファイルに構成を書き込みます。 構成が codespace で settings.json
に正しく書き込まれたことを確認できます。
-
codespace のターミナルで、次のコマンドを入力します。
Bash cat ~/.vscode-remote/data/Machine/settings.json
cat ~/.vscode-remote/data/Machine/settings.json
-
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 の [ポート] タブをクリックし、ポートを右クリックして、 [ブラウザーで開く] をクリックします。
VS Code のトラブルシューティング
VS Code デスクトップ アプリケーションで codespace を開くと、ローカル ワークスペースでの作業と比べていくつかの違いに気付くかもしれませんが、エクスペリエンスは似ているはずです。
問題が発生した場合、microsoft/vscode
リポジトリの 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
リポジトリにログします。
簡易ブラウザーのトラブルシューティング
codespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの [簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の devcontainer.json
構成ファイルで、アプリケーションが実行するポートの onAutoForward
プロパティが openPreview
に設定されている場合に発生します。
"portsAttributes": {
"3000": {
"label": "Application",
"onAutoForward": "openPreview"
}
}
[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。
-
VS Code で、 [ポート] タブをクリックします。
-
ポートを右クリックし、 [エディターでプレビュー] をクリックします。
簡易ブラウザー タブが自動的に開かない
devcontainer.json
構成ファイルでポートに "onAutoForward": "openPreview"
が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。
devcontainer.json
で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の settings.json
ファイルに構成を書き込みます。 構成が codespace で settings.json
に正しく書き込まれたことを確認できます。
-
codespace のターミナルで、次のコマンドを入力します。
Bash cat ~/.vscode-remote/data/Machine/settings.json
cat ~/.vscode-remote/data/Machine/settings.json
-
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 の [ポート] タブをクリックし、ポートを右クリックして、 [ブラウザーで開く] をクリックします。