Problem debugging maplibre-gl-js

[WinstonSmith77]

I have a problem debugging typescript code.

• clone maplibre-gl-js

• npm install and npm run build-dev

• Created an test projected to include import '../../maplibre/maplibre-gl-js/dist/maplibre-gl-dev.js';

• This includes maplibre-gl-dev.js.map ?!

Only some parts of code can be stopped by breakpoints. Like

export async function loadGlyphRange(fontstack: string, range: number, urlTemplate: string, requestManager: RequestManager): in load_glyph_range.ts

Other like

constructor(options: BucketParameters<SymbolStyleLayer>) in symbol_buckets.ts can't.

Debugging with 'debugger' command in code works but also does not stop in ts but in some cached js.

So my question is: Is there some way to fix this? How do the maintainers do the debugging?

[HarelM]

Some parts of the code run in the worker thread, which I believe you can't use a breakpoint for...

[WinstonSmith77]

Thank you!

But using the 'debugger' command works.

So it is a restriction of javascript debugging in general? I am not a js native.

[HarelM]

I'm not 100% sure, due to the async and event driven nature of this library, I usually use console logs...

[sbachinin]

I think this issue is related.
It's a real incovenience and so far no solution was found.
I think debugger statements are the only walkaround now.

[neodescis]

Yes, it's related. It's very difficult to debug anything in the worker thread. I've been wondering if it might be possible to configure rollup to produce a source map file for the worker thread code and add a reference to it from the blob, but I haven't had time to dig.