Hulpbronnen voor ontwikkelaars: bronkaarten bekijken en handmatig laden

Sofia Emelianova
Sofia Emelianova
GitHub

Gebruik het paneel Developer Resources om te controleren of DevTools bronkaarten succesvol laadt. Indien nodig kunt u ze handmatig laden.

Overzicht

Wanneer u DevTools opent, probeert het eventuele bronkaarten te laden. In geval van een storing registreert de console een fout die lijkt op de volgende.

De fout bij het laden van de bronkaart in de console.

In het paneel Ontwikkelaarsbronnen kunt u de laadstatus van de bronkaart bekijken en zelfs bronkaarten handmatig laden.

Open Developer Resources en controleer de status

Om de laadstatussen van bronkaarten te controleren:

  1. Open DevTools , zorg ervoor dat bronkaarten zijn ingeschakeld en navigeer naar more_vert > Meer tools > Developer Resources .

  2. Controleer in de tabel de waarden in de volgende kolommen:

    • Status om te zien of het laden van de bronkaart een succes of mislukking was.
    • Fout bij het lezen van de eventuele foutmelding.

De kolommen Status en Fout.

Filter bronnen op URL of fout

Als u zich wilt concentreren op bronkaarten die u interesseren, voert u tekst in het tekstvak bovenaan in om bronkaarten eruit te filteren die deze tekst niet bevatten in URL's of foutmeldingen.

Bronkaarten eruit filteren die geen 'js' in de URL bevatten.

Problemen met het laden van bronkaarten oplossen

Standaard vraagt ​​DevTools bronkaarten op in plaats van de website. Dergelijke verzoeken kunnen worden behandeld als cross-origineel en komen mogelijk niet door.

Om ervoor te zorgen dat de website eerst bronkaarten opvraagt, vinkt u dit aan in de rechterbovenhoek van Developer Resources Selectievakje. Laden via website .

Het selectievakje 'Laden via website'

Als u nog steeds problemen ondervindt bij het laden van bronkaarten, probeer ze dan handmatig te laden, zoals hierna wordt beschreven.

Laad handmatig een bronkaart

Als u problemen ondervindt bij het laden of bijvoorbeeld fouten wilt opsporen in uw originele code op een website in productie die geen bronkaarten heeft, kunt u deze handmatig laden:

  1. Genereer bronkaarten met behulp van tools die deze ondersteunen .
  2. Host de bronkaarten lokaal.
  3. Open DevTools op uw pagina en zorg ervoor dat u bronkaarten inschakelt .

  4. Open het geïmplementeerde (verwerkte) bestand in Bronnen , klik er met de rechtermuisknop op in de Editor en selecteer Brontoewijzing toevoegen in het menu.

    Selecteer 'Bronkaarten toevoegen' in het menu.

  5. Geef in het tekstvak de URL van de bronkaart op en klik op Toevoegen .

    Specificeer de URL van de bronkaart.

  6. Controleer of de bronkaart is verschenen in Developer Resources en het originele bestand (toegewezen op basis van het geïmplementeerde bestand) in de bestandsstructuur.

    Een handmatig geladen bronkaart zorgt ervoor dat het originele bestand in de bestandsboom verschijnt.

  7. Ga verder met het debuggen van uw originele bestand .