javascript - Ladda sourcemaps och felsöka i Safari?

Vi stötte på ett fel som bara uppstår i Safari-webbläsare, så jag plockade fram min OSX-partition på min Macbook och försöker felsöka det men jag kan inte lista ut hur man ser den ursprungliga källkoden och sätter en brytpunkt.

Min huvudfil är main.d7f60b0631c7822cabf3.bundle.js och den sista raden i filen är denna, som pekar på sourcemap-filen som faktiskt existerar eftersom jag kan skriva in URL:en och få den, och den fungerar i Firefox och Chrome:

//# sourceMappingURL=main.d7f60b0631c7822cabf3.bundle.js.map

I Firefox kan jag gå till fliken för felsökare i utvecklarverktygen och under källor ser jag min ursprungliga källfil webpack:///src/app/app.component.ts och jag kan öppna den och sätta en brytpunkt.

I Chrome DevTools går jag till fliken 'Sources' och gör samma sak genom att navigera i ett träd till webpack:// - . - src - app - app.component.ts.

Finns det ett sätt att uppnå samma sak i Safari? Från vad jag minns, eftersom jag skriver detta på Windows, kan jag inte se några filer i debugfliken, bara en lista över brytpunkter. I resurser-fliken kan jag se bundlen och en pil som ser ut som om jag borde kunna expandera den, men att klicka på pilen får den att ändras från höger till neråt som om den var expanderad, men inget visas. Andra filer som jquery verkar ha den ursprungliga koden under sig när de expanderas...

Svar #1

Jag hade samma fråga och hittade svaret i en annan inlägg här:

  • Hur växlar jag källkarta i Safari 7?

(kort version, i debuggern, kommando-klicka på vilken symbol du vill titta på, och det borde hoppa till den ursprungliga källan. För referens, jag arbetar med TypeScript kompilerat till JavaScript)

Författaren hänvisar till denna dokumentation:

  • https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW4

Under processen märkte jag också att i fliken Resurser i Safari-debuggern visas foo.js med en vridare bredvid, vilket expanderar för att visa den ursprungliga foo.ts-filen (och jag antar att med en mer komplex källa, kan det expandera för att visa flera källor om de sammanfogas tillsammans?)

Personlig åsikt: Jag tycker att svarvaren är en utmärkt lösning på detta problem... konstigt att debuggningsverktyget som standard visar den "kompilerade"/"transpilerade" koden istället för det man logiskt vill felsöka.

Svar #2

Var först tålmodig medan webbläsaren bearbetar alla källkartor.

När det är klart bör du kunna söka efter vilken originalfil som helst genom att skriva in namnet på filen i inmatningsfältet längst ner i fönstret med platshållaren "Filter". Det är en ganska motsägelsefull användarupplevelse enligt mig. Hoppas detta hjälper någon!

Skärmdump:

Relaterade artiklar