Risorse per sviluppatori: visualizzare e caricare manualmente le mappe di origine

Sofia Emelianova
Sofia Emelianova

Utilizza la scheda Risorse per sviluppatori per verificare se DevTools carica correttamente le mappe di origine. Se necessario, puoi caricarli manualmente.

Quando lo apri, DevTools tenta di caricare eventuali mappe di origine. In caso di errore, la console registra un errore simile al seguente.

L'errore di caricamento della mappa di origine nella console.

Nel riquadro a scomparsa Risorse per sviluppatori puoi visualizzare lo stato di caricamento della mappa di origine e persino caricare manualmente le mappe di origine.

Apri Risorse per sviluppatori e controlla lo stato

Per controllare gli stati di caricamento delle mappe di origine:

  1. Apri DevTools, assicurati di attivare le mappe di origine e vai a Menu con tre puntini. > Altri strumenti > Risorse per sviluppatori.
  2. Nella tabella, verifica i valori nelle seguenti colonne:

    • Stato per vedere se il caricamento della mappa di origine è riuscito o meno.
    • Error (Errore) per leggere l'eventuale messaggio di errore.

Le colonne Stato ed Errore.

Filtra le risorse per URL o errore

Per concentrarti sulle mappe di origine che ti interessano, inserisci il testo nella casella di testo in alto per filtrare le mappe di origine che non contengono questo testo negli URL o nei messaggi di errore.

Filtra le mappe di origine che non contengono "js" nell'URL.

Risolvi il problema

Per impostazione predefinita, DevTools richiede le mappe di origine anziché il sito web. Queste richieste potrebbero essere trattate come multiorigine e potrebbero non andare a buon fine.

Per creare per prime le mappe di origine della richiesta del sito web, nell'angolo in alto a destra di Risorse per sviluppatori, seleziona Casella di controllo. Attiva caricamento tramite target.

Se continui a riscontrare problemi con il caricamento delle mappe di origine, prova a caricarle manualmente come descritto di seguito.

Carica manualmente una mappa di origine

Se si verificano errori di caricamento o, ad esempio, vuoi eseguire il debug del codice originale su un sito web in produzione privo di mappe di origine, puoi caricarli manualmente:

  1. Genera mappe di origine utilizzando strumenti che le supportano.
  2. Ospita le mappe di origine localmente.
  3. Apri DevTools nella tua pagina e assicurati di attivare le mappe di origine.
  4. Apri il file di cui è stato eseguito il deployment (elaborato) in Origini, fai clic con il tasto destro del mouse nell'Editor e seleziona Aggiungi mappa di origine dal menu.

    Seleziona "Aggiungi mappe di origine" dal menu.

  5. Nella casella di testo, specifica l'URL della mappa di origine e fai clic su Aggiungi.

    Specifica l'URL della mappa di origine.

  6. Verifica se la mappa di origine è stata visualizzata in Risorse per sviluppatori e il file originale (mappato a quello di cui è stato eseguito il deployment) nella struttura ad albero dei file.

    Una mappa di origine caricata manualmente visualizza il file originale nella struttura ad albero dei file.

  7. Procedi con il debug del file originale.