Résolution des problèmes liés aux clients GitHub Codespaces

Résolution des problèmes liés au client web Visual Studio Code

Si vous rencontrez des problèmes lors de l’utilisation de GitHub Codespaces dans un navigateur qui n’est pas basé sur Chromium, essayez de passer à un navigateur Chromium comme Google Chrome ou Microsoft Edge. Vous pouvez également consulter les problèmes connus liés à votre navigateur dans le dépôt microsoft/vscode en recherchant les problèmes étiquetés avec le nom du navigateur, comme firefox ou safari.

Si vous rencontrez des problèmes liés à l’utilisation de GitHub Codespaces dans un navigateur basé sur Chromium, vous pouvez vérifier si vous rencontrez un autre problème connu avec VS Code dans le dépôt microsoft/vscode.

Différences par rapport à l’utilisation locale de VS Code

Quand vous ouvrez un codespace dans votre navigateur, avec le client web VS Code, vous remarquerez certaines différences par rapport à un espace de travail local dans l’application de bureau VS Code. Par exemple, certaines combinaisons de touches sont différentes ou absentes et certaines extensions peuvent se comporter différemment. Pour en obtenir un résumé, consultez : Limitations et adaptations connues dans la documentation VS Code.

Vous pouvez consulter les problèmes connus et consigner de nouveaux problèmes avec l’expérience VS Code dans le dépôt microsoft/vscode.

Visual Studio Code Insiders

Visual Studio Code Insiders constitue la version la plus fréquente de VS Code. Elle comporte toutes les fonctionnalités et les correctifs de bogues les plus récents, mais peut aussi parfois contenir de nouveaux problèmes à l’origine d’une rupture de build.

Si vous utilisez une build Insiders et remarquez une rupture de comportement, nous vous recommandons de passer à Visual Studio Code Stable et de réessayer.

Cliquez sur en bas à gauche de l’éditeur, puis sélectionnez Basculer vers la version stable... . Si le client web VS Code ne se charge pas ou si n’est pas disponible, vous pouvez forcer le basculement vers Visual Studio Code Stable en ajoutant ?vscodeChannel=stable à l’URL de votre codespace et en chargeant le codespace à cette URL.

Si le problème n’est pas résolu dans Visual Studio Code Stable, consultez les problèmes connus et, si nécessaire, consignez un nouveau problème avec l’expérience VS Code dans le dépôt microsoft/vscode.

Résolution des problèmes liés au Navigateur simple

Lorsque vous avez démarré une application web dans un codespace, vous pouvez afficher un aperçu de l’application en cours d’exécution dans le Navigateur simple incorporé dans VS Code. Dans certains projets, l’application s’ouvre automatiquement dans un onglet Navigateur simple de l’éditeur lorsqu’elle démarrage. Cela se produit si, dans le fichier de configuration devcontainer.json du codespace, la propriété onAutoForward du port sur lequel l’application s’exécute est définie sur openPreview.

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

Si l’onglet Navigateur simple ne s’ouvre pas automatiquement, vous pouvez ouvrir le Navigateur simple manuellement pour afficher l’application.

1. Dans VS Code, cliquez sur l’onglet Ports.

2. Cliquez avec le bouton droit sur le port, puis cliquez sur Aperçu dans l’Éditeur.

   

L’onglet Navigateur simple ne s’ouvre pas automatiquement

Si le fichier de configuration devcontainer.json spécifie "onAutoForward": "openPreview" pour un port, mais que le Navigateur simple ne s’ouvre pas automatiquement au démarrage d’une application, vérifiez que l’application a démarré sur le port spécifié dans la configuration. L’application peut démarrer sur un autre port si le port prévu est occupé.

Pour implémenter la configuration de port spécifiée dans devcontainer.json, GitHub Codespaces écrit la configuration dans le fichier settings.json de VS Code lors de la création d’un codespace. Vous pouvez vérifier que la configuration a été correctement écrite dans settings.json dans votre codespace.

1. Dans le terminal de votre codespace, entrez la commande suivante.

   Bash

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

2. Vérifiez que le fichier settings.json contient des lignes semblables à ce qui suit.

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

Si le fichier settings.json ne contient pas ces paramètres, vérifiez si les fichiers dotfile sont activés et si une configuration dans vos fichiers dotfile remplace le fichier settings.json. Pour plus d’informations, consultez « Personnalisation de GitHub Codespaces pour votre compte ».

L’application ne se charge pas

Parfois, vous pouvez constater que l’onglet Navigateur simple s’ouvre, mais affiche une icône de page d’erreur ou une page vierge au lieu de votre application en cours d’exécution. Cela peut se produire si l’application web que vous chargez inclut une stratégie de sécurité du contenu (CSP) qui limite les domaines dans lesquels les pages du site peuvent être incorporées. Pour plus d’informations, consultez Stratégie de sécurité du contenu (CSP) : frame-ancestors sur le site web MDN.

Vous pouvez peut-être changer localement la stratégie de sécurité frame-ancestors de votre application pour qu’elle s’affiche dans le Navigateur simple. Sinon, si une stratégie frame-ancestors est à l’origine du problème, vous devez être en mesure d’afficher l’application en l’ouvrant sous un onglet de navigateur standard plutôt que dans le Navigateur simple. Pour ce faire, cliquez sur l’onglet Ports dans VS Code, cliquez avec le bouton droit sur le port, puis cliquez sur Ouvrir dans le navigateur.

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