Entwicklerressourcen: Quellzuordnungen ansehen und manuell laden

Sofia Emelianova
Sofia Emelianova

Auf dem Tab Entwicklerressourcen können Sie prüfen, ob die Quellzuordnungen in den Entwicklertools erfolgreich geladen werden. Bei Bedarf können Sie sie manuell laden.

Wenn Sie die Entwicklertools öffnen, wird versucht, Quellzuordnungen zu laden, sofern vorhanden. Im Falle eines Fehlers protokolliert die Console einen Fehler wie diesen.

Der Fehler beim Laden der Quellzuordnung in der Console.

Auf dem Tab Developer Resources (Entwicklerressourcen) können Sie den Ladestatus der Source Maps sehen und Source Maps sogar manuell laden.

Entwicklerressourcen öffnen und Status prüfen

So prüfen Sie den Ladestatus von Quellzuordnungen:

  1. Öffnen Sie die Entwicklertools und aktivieren Sie Source Maps. Gehen Sie dann zu Dreipunkt-Menü. > Weitere Tools > Entwicklerressourcen.
  2. Überprüfen Sie in der Tabelle die Werte in den folgenden Spalten:

    • Status, um zu sehen, ob das Laden der Source Map erfolgreich war oder fehlgeschlagen ist.
    • Error, um die Fehlermeldung zu lesen, falls vorhanden.

Die Spalten Status und Fehler

Ressourcen nach URL oder Fehler filtern

Wenn Sie sich auf die für Sie interessanten Quellzuordnungen konzentrieren möchten, geben Sie in das Textfeld oben Text ein, um Quellzuordnungen herauszufiltern, die diesen Text nicht in URLs oder Fehlermeldungen enthalten.

Herausfiltern von Quellzuordnungen, die „js“ nicht in der URL enthalten.

Fehlerbehebung

Standardmäßig fordert die Entwicklertools Quellzuordnungen und nicht die Website an. Solche Anfragen werden möglicherweise als ursprungsübergreifend behandelt und nicht weitergeleitet.

Damit zuerst Quellzuordnungen für die Websiteanfrage erstellt werden, klicken Sie rechts oben in den Entwicklerressourcen das Kästchen Kästchen. Laden über Ziel aktivieren an.

Wenn Sie weiterhin Probleme beim Laden von Quellzuordnungen haben, versuchen Sie, sie wie im Folgenden beschrieben manuell zu laden.

Source Map manuell laden

Wenn Ladefehler auftreten oder Sie auf einer Website in der Produktion, in der Quellzuordnungen fehlen, Fehler in Ihrem ursprünglichen Code beheben möchten, können Sie sie manuell laden:

  1. Generieren Sie Quellzuordnungen mit Tools, die sie unterstützen.
  2. Hosten Sie die Quellzuordnungen lokal.
  3. Öffnen Sie die Entwicklertools auf Ihrer Seite und aktivieren Sie Source Maps.
  4. Öffnen Sie die bereitgestellte (verarbeitete) Datei unter Quellen, klicken Sie im Editor mit der rechten Maustaste darauf und wählen Sie im Menü Quellzuordnung hinzufügen aus.

    Wählen Sie im Menü „Quellzuordnungen hinzufügen“ aus.

  5. Geben Sie im Textfeld die URL der Quellzuordnung an und klicken Sie auf Hinzufügen.

    URL der Quellzuordnung angeben.

  6. Prüfen Sie, ob die Source Map in den Entwicklerressourcen und die Originaldatei, die der bereitgestellten Datei zugeordnet wurde, im Dateibaum angezeigt wird.

    Bei einer manuell geladenen Source Map wird die Originaldatei im Dateibaum angezeigt.

  7. Fahren Sie mit dem Fehler in der Originaldatei fort.