javascript - Finns det ett sätt att logga source-mappade variabler i Chrome-loggpunkter?

Loggpunkter

Relaterat: Finns det ett sätt att utvärdera en variabel i källkartan inom Chrome Developer-verktygen?

Som många utvecklare skriver jag i ett JS-språk och använder sedan ett verktyg för att transpile ned till en webbläsarvänlig version av min kod.

Detta verkar bryta loggpunkterna i Chrome. Till exempel vill jag logga segmentParameters:

Så jag lägger till en loggpunkt:

Men det verkar som att detta inte fungerar eftersom segmentParameters faktiskt kallas något annat, som _a eller något lika kryptiskt i den körda (lokala maskinen, transpilerade) koden. Koden träffas definitivt, men loggpunkten gör ingenting. Jag kan felsöka det och lagra det lokala värdet i en temporär variabel och komma åt segmentParameters på det sättet (jag misstänker att Chrome gör lite magi för att matcha den körande koden med den transpilerade koden).

Förresten kommer inte konsolen att göra detta heller:

Finns det några knep för att få loggpunkter att fungera med transpilerad kod? Gör jag något fel?

Svar #1

Chrome har nu en experimentell funktion som heter Resolve variable names in expressions using source maps. Genom att aktivera detta i utvecklarverktygens inställningar kan man använda variabelnamn som de finns i källkartan i konsolen.

Svar #2

Jag hade ett liknande problem där jag försökte få värdet av ett argument för en funktion som såg ut så här:

public isSuperPoweredThing (thing: IThing, queryParams: Params): boolean {
    let isPageOneSearch = this.isPageOneSearch(queryParams);
    let isKeywordSearch = this.isKeywordSearch(queryParams);

    return isSearchOnPageOne && isDefaultKeywordSearch && !!thing?.superPower?.superPowerId;
}

När jag försökte lägga till en brytpunkt verkade den inte finnas under det variabelnamn som den hade fått i koden: thing. Jag lyckades få det värde jag ville ha genom att använda nyckelordet arguments, specifikt: arguments[0].

Relaterade artiklar