Ressources pour les développeurs: Afficher et charger manuellement les cartes sources

Sofia Emelianova
Sofia Emelianova

Dans l'onglet Developer Resources (Ressources pour les développeurs), vérifiez si les outils de développement ont correctement chargé les cartes sources. Si nécessaire, vous pouvez les charger manuellement.

Lorsque vous ouvrez les outils de développement, il tente de charger les cartes sources, le cas échéant. En cas d'échec, la console consigne une erreur semblable à celle indiquée ci-dessous.

Erreur de chargement de la carte source dans la console.

Dans l'onglet du panneau Ressources pour les développeurs, vous pouvez consulter l'état du chargement des cartes sources et même les charger manuellement.

Ouvrir les ressources pour les développeurs et vérifier l'état

Pour vérifier les états de chargement des mappages sources:

  1. Ouvrez les outils de développement, assurez-vous d'activer les cartes sources et accédez à Menu à trois points. > Plus d'outils > Ressources pour les développeurs.
  2. Dans le tableau, vérifiez les valeurs des colonnes suivantes:

    • État pour voir si le chargement de la carte source a réussi ou échoué.
    • Error pour lire le message d'erreur, le cas échéant.

Colonnes "État" et "Erreur".

Filtrer les ressources par URL ou erreur

Pour vous concentrer sur les cartes sources qui vous intéressent, saisissez du texte dans la zone de texte située en haut de l'écran pour filtrer les cartes sources dont les URL ou les messages d'erreur ne contiennent pas ce texte.

Filtrage des cartes sources dont l'URL ne contient pas "js"

Dépannage

Par défaut, les outils de développement demandent des cartes sources plutôt que le site Web. De telles requêtes peuvent être traitées comme des demandes multi-origines et risquent de ne pas être transmises.

Pour que les cartes sources de la requête de site Web soient d'abord disponibles, cochez la case Case à cocher. Enable load through target (Activer le chargement via la cible) en haut à droite de la page Developer Resources (Ressources pour les développeurs).

Si vous rencontrez toujours des problèmes pour charger des cartes sources, essayez de les charger manuellement, comme décrit ci-dessous.

Charger une carte source manuellement

Si vous rencontrez des échecs de chargement ou, par exemple, si vous souhaitez déboguer votre code d'origine sur un site Web en production qui ne dispose pas de mappages sources, vous pouvez les charger manuellement:

  1. Générez des cartes sources à l'aide d'outils compatibles.
  2. Hébergez les cartes sources en local.
  3. Ouvrez les outils de développement sur votre page et assurez-vous d'activer les cartes sources.
  4. Ouvrez le fichier déployé (traité) dans Sources, effectuez un clic droit dessus dans l'Éditeur, puis sélectionnez Ajouter un mappage source dans le menu.

    Sélectionnez "Ajouter des cartes sources" dans le menu.

  5. Dans la zone de texte, spécifiez l'URL de la carte source, puis cliquez sur Ajouter.

    Spécifier l'URL de la carte source

  6. Vérifiez si la carte source est apparue dans Ressources pour les développeurs et le fichier d'origine (mappé à partir de celui déployé) dans l'arborescence de fichiers.

    Une carte source chargée manuellement fait apparaître le fichier d'origine dans l'arborescence de fichiers.

  7. Procédez au débogage du fichier d'origine.