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

Sofia Emelianova
Sofia Emelianova

Utilisez le panneau Developer Resources (Ressources pour les développeurs) pour vérifier si les outils de développement chargent correctement les mappages sources. Si nécessaire, vous pouvez les charger manuellement.

Présentation

Lorsque vous ouvrez les outils de développement, ils tentent de charger les cartes sources, le cas échéant. En cas d'échec, la console consigne une erreur semblable à la suivante.

Erreur de chargement de la carte source dans la console.

Dans le panneau Developer Resources (Ressources pour les développeurs), vous pouvez afficher l'état du chargement de la carte source, voire les charger manuellement.

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

Pour vérifier l'état de chargement des cartes sources:

  1. Ouvrez les outils de développement, assurez-vous d'activer les mappages sources, puis accédez à more_vert > 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é.
    • Erreur pour lire le message d'erreur, le cas échéant.

Colonnes "État" et "Erreur".

Filtrer les ressources par URL ou par erreur

Pour cibler les cartes sources qui vous intéressent, saisissez du texte dans la zone de texte située en haut afin de filtrer les cartes sources qui ne contiennent pas ce texte dans les URL ni dans les messages d'erreur.

Filtrer les mappages sources qui ne contiennent pas "js" dans l'URL.

Résoudre les problèmes de chargement des cartes sources

Par défaut, les outils de développement demandent des cartes sources plutôt que le site Web. Ces requêtes peuvent être traitées comme des requêtes cross-origin et ne pas aboutir.

Pour commencer par créer les mappages sources de la demande de site Web, en haut à droite des Ressources pour les développeurs, cochez la case Case à cocher. Charger via le site Web.

L'option "Charger via le site Web" case à cocher

Si vous rencontrez toujours des problèmes de chargement 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 si, par exemple, 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 mappages sources.
  4. Ouvrez le fichier déployé (traité) dans Sources, effectuez un clic droit dessus dans l'éditeur, puis sélectionnez Ajouter une carte source dans le menu.

    Sélectionner "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 apparaît dans Ressources pour les développeurs et si le fichier d'origine (mappé à partir du plan déployé) est affiché dans l'arborescence de fichiers.

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

  7. Vous pouvez procéder au débogage du fichier d'origine.