Support sourcemaps

[stereobooster]

I have following code in my small crawler

page.on("console", msg => console.log(`${route}: ${msg}`));
page.on("error", msg => console.log(`${route}: ${msg}`));
page.on("pageerror", msg => console.log(`${route}: ${msg}`));
page.on("requestfailed", msg => console.log(`${route}: ${msg}`));    

to track if something goes wrong. And get this output:

 Error: TypeError: Cannot read property 'resize' of undefined
    at e.resize (http://localhost:45678/static/js/main.91ecf917.js:1:478812)
    at new e (http://localhost:45678/static/js/main.91ecf917.js:1:476478)
    at n.componentDidMount (http://localhost:45678/static/js/main.91ecf917.js:1:734681)
    at commitLifeCycles (http://localhost:45678/static/js/main.91ecf917.js:1:832876)
    at n (http://localhost:45678/static/js/main.91ecf917.js:1:836981)
    at u (http://localhost:45678/static/js/main.91ecf917.js:1:838648)
    at c (http://localhost:45678/static/js/main.91ecf917.js:1:839091)
    at m (http://localhost:45678/static/js/main.91ecf917.js:1:841114)
    at d (http://localhost:45678/static/js/main.91ecf917.js:1:840623)
    at Object.updateContainer (http://localhost:45678/static/js/main.91ecf917.js:1:907103)

which is not very helpful.

I report this issue here because, I believe there should be standard way to deal with sourcemaps. Even if it will not be a part of puppeteer, it should documented in puppeteer.

Possible solution is to use https://github.com/novocaine/sourcemapped-stacktrace or something similar.

Thanks for open sourcing this project.

[stereobooster]

This is what I got https://github.com/stereobooster/sourcemapped-stacktrace-node#example. It is highly experimental, but works in my case

[CommanderXL]

Well, I consider this suitation as well.

I generator the dist files and sourcemap files seperately by webpack. I didn't want to put the sourcemap files to the server.Because it's not safe.

I try to inject the sourcemap files to the browser through puppeteer locally.But puppeteer can only inject the script or stylesheet.

I think it can inject the script with inline sourcemap to solve this problem.

[stereobooster]

I didn't want to put the sourcemap files to the server.Because it's not safe.

This is security through obscurity.

The ticket is not about how you put sourcemaps or if you want to use them. This ticket is about situation when you have sourcemaps and want use it to decode errors - the same way as chrome console does it.

[aslushnikov]

I report this issue here because, I believe there should be standard way to deal with sourcemaps.

Supporting sourcemaps will:

• add performance overhead (we'll have to enable Debugger domain to get script sources)
• increase code complexity (we'll have to download/parse sourcemaps from the website)

I don't think this is a good trade-off.
This, however, could be implement as a third-party extension with the newly added target.createCDPSession method that provides raw devtools protocol.

Even if it will not be a part of puppeteer, it should documented in puppeteer.

I'm not sure what kind of documentation is required; if you have any ideas, I'd be happy to review a pull request.

[finnfiddle]

I know this is closed but it might be useful for someone to know how I managed to get a meaningful stacktrace - see my answer here on SO https://stackoverflow.com/a/48806685/1384149

[richardkazuomiller]

It would be great if there was a way to see JavaScript coverage when using source maps. I'm currently working on a project where I have to use Webpack (at least for now) and I want to run tests using Puppeteer and check the code coverage for each file in the bundle.

[vegarringdal]

@richardkazuomiller did you find anyway to get code coverage from sourcefiles?
This would be very useful for tests.

[SergeyPirogov]

@richardkazuomiller have you found solution for mapping coverage to source?

[Nate-Wilkins]

Has anyone come up with a workaround for this?

I'm thinking of loading them directly in my application but I really didn't want to go about it that way. Currently I'm compiling some typescript and evaluating the compiled JS (with inline source maps) but this doesn't work 😅

---

Using page.addScriptTag({ path: pathCompiled }); seemed to be the missing piece.