[HELP WANTED] Perform source-map audit against webpack

[TheLarkInn]

Problem

There are multiple issues that have been filed for numerous different reports of source-maps having issues in chrome.

Work Required

Listed is the canonical specification for source-maps:
https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit

We would like help (as we cannot make this a priority with current resources) creating every type of sourcemap, and then either manually (or via unit testing) validate that the source-map types that we have configured in place currently (starting at webpack2.1.0-beta.25) and work in Chrome.

Results

This will allow us to:

• Create unit tests that are sturdier, and a source map validation tool to ensure it works to this specification (if it doesn't already exist).
• Identify if source-map issues are chrome bugs or webpack bugs.

If there is anyone who would like to tackle this, please comment in the issue, then we can be aware of who is working on it, and how

[addyosmani]

Have you looked at https://github.com/mattrobenolt/sourcemap-validator before? I believe in the past they've tried to roughly approximate how well support with the current spec could be captured by their validator.

[mattkime]

I made a small (very small) hello world script and passed it through webpack. the resulting sourcemap does not work in chrome.

https://github.com/mattkime/node-test-debuggers

npm install && npm run build && npm run chrome:webpack and you should be able to see the issue - the original 'index.js' file is referenced in the sourcemap but its not displayed in the sources list.

[TheLarkInn]

@addyosmani thank you so much.

@mattkime are you familiar will all the types of sourcemaps you can generate with webpack?

[TheLarkInn]

See https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L200-L232

[mattkime]

@TheLarkInn I am. I guess I should iterate through all the options? I was trying to find the simplest starting point and iterate out through there.

[TheLarkInn]

Yeah id say just one at a time! I haven't tried out the validator that Addy suggested just yet but I would think that could provide a great way to iterate quickly.

[mattkime]

The validator is, um, under documented. I'm not certain what it does or doesn't document.

I gave 'eval-soucre-map' a go and it worked well on my simple test and failed on a complex project.

As mention in the issue description, I'm not sure if i'm looking at webpack or chrome bugs.

While I'm happy to pitch in, I need some guidance to get started on this.

[mattkime]

Ideally we'd find someone on the Google Chrome project that could give us some guidance.

---

found some very helpful stuff -
http://sourcemapper.qfox.nl/
http://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html

[joachimprinzbach]

I did also like this link for some information: http://jlongster.com/On-the-Road-to-Better-Sourcemaps-in-the-Firefox-Developer-Tools

[mattkime]

this shows a sourcemap working when loaded via front end and failing when loaded via node
https://github.com/mattkime/chrome-devtools-sourcemap-test

while webpack could certainly use a good sourcemap test suite, i'd hold off on pursuing bugs in webpack's sourcemap production until we're certain that chrome works correctly or we find a better standard.

[rob3c]

Sorry I don't have anything productive to add yet beyond an observation, but maybe now that angular 2 is promoting typescript and their angular-cli project is depending on webpack 2, it's possible someone on the angular team will have a better-than-average chance of getting some feedback from the chrome team on this? As angular 2 picks up users, I have to imagine that'll mean a lot of new users wondering why sourcemaps are broken.
https://github.com/angular/angular-cli

[mattkime]

verified the problem on chromium and opened a bug. it would be helpful if people could verify the bug on windows and linux. https://bugs.chromium.org/p/chromium/issues/detail?id=658438

would probably help to get a bunch of followers on that bug as well.

[TheLarkInn]

@rob3c I'm working with the team to get some help and feedback. cc @paulirish

[TheLarkInn]

@mattkime have you run your test against each sourcemap type. Should we make a chart or checklist?

[mattkime]

@TheLarkInn the bug i submitted to chromium uses babel rather than webpack. the output is a bit simpler but still exposes the flaw.

lets make a new project that makes it easy to iterate over the various sourcemap types, in a similar spirit as https://github.com/mattkime/node-test-debuggers.

i did try a couple of other sourcemap types and found that they may work in a simple example and then fail in a complex setup. My simple test is not sufficient to determine whether a given sourcemap type works in completion.

---

I should also mention that this might be tied to nodejs version. however, I did check node.js 6.3.1 when the feature was still fresh so i think its a chrome side issue.

just tried chrome v50 which would have been recent when this debugging technique was released. it supports the debugging url but doesn't show the source files.

[mattkime]

@TheLarkInn webpack v1.13, right?

[mattkime]

threw this together, might be rough around the edges - https://github.com/mattkime/webpack-sourcemap-test

prompts you for the devtool you'd like to build with and then creates node and web builds.

[TheLarkInn]

Curious about v2.1.0-beta.25 also

[TheLarkInn]

Nice work btw. I will check this out.

[mattkime]

Curious about v2.1.0-beta.25 also

Haven't double checked but i suspect the problem would be reproduced identically.

eval devtool seems to work but i suspect thats because its not really a sourcemap.

[jmfirth]

The best, working option I have found so far is eval-source-map.

[mattkime]

@jmfirth which OS, node version, and chrome version are you using?

i just tried eval-source-map and did not see my source files

[jmfirth]

Apologies. eval-source-map worked for me on Win 10 with node 6.9.0, webpack 1.12.13 and Chrome 53.0.2785.143.

[TheLarkInn]

Since this is going to be a webpack 2+ addition, I would like have all verifications being done against the latest version of webpack (HEAD/webpack@2.1.0-beta.25).

[reohjs]

Something seems to have changed in 4.0.1 - With devtool: 'source-map', target: node and the source-map-support package, instead of a bundled code paths I'm now getting stack trace paths like:

C:\project\dist\webpack:\index.js:3:1

where the bundle.js is in dist and index.js is a source file.

eval-* options are now working for me too, though errors inside async/await code show generated code.

[marharyta]

@reohjs if you are using eslint, the loader might be the problem. See this stackoverflow issue:
https://stackoverflow.com/questions/50105741/webpack-4-devtool-option-does-not-work-with-webpack-dev-server

[reohjs]

I'm not using the loader, but thanks for the suggestion.

[gkatsanos]

I would like to link this here. when using the "recommended" sourceMap options for development, the layout breaks once I edit a CSS property in Chrome dev tools. Chrome seems to try to re-load the asset but ends up loading it tens/hundreds of times.
let's jump to the video:
#7199

[Harrix]

Only the source-map and source-map and inline-source-map parameters work correctly with webpack 4.10.2 in Chrome 67.

[MLoughry]

I don't know a lot about source-maps, but from our experience it seems that cheap-module-eval-source-map and cheap-module-source-map work well, but source-map has issues. This is confirmed by sourcemaps.io:

Mousetrap chunk with source-map: https://sourcemaps.io/report/1530635355948_https%3A%2F%2Fow1.res.office365.com%2Fowamail%2F20180702006%2Fscripts%2Fowa.21.js
Mousetrap chunk with 'cheap-module-source-map`: https://sourcemaps.io/report/1530635141846_https%3A%2F%2Fowamaildev.blob.core.windows.net%2Fowamail-branch%2Fcheap-module-source-map%2Fscripts%2Fowa.2.js

Briefly looking through the code, it seems that the columns property to SourceMapDevToolPlugin is the only difference. However, I don't claim to understand how that difference works in the only code that references it: https://github.com/webpack/webpack-sources/blob/91862553dc108e897ec24ece7b5bd8aae42620e5/lib/OriginalSource.js#L60

[MLoughry]

Sorry, that last comment was using webpack 4.12.0, for clarification.

[Tiberriver256]

Here's one that's a few lines off. Seemed to show up when I switched to non-relative imports. The link to sokra's site was a little too long for Github so I put it out on pastebin.

https://pastebin.com/xBDX2Vym

[lee149205]

i use devtool: 'source-map'
It's ok . But I cannot watch variable (always "not available")

[lee149205]

oh, nevermind
I try comment uglify, it works well with devtool: 'source-map'
plugins: [
//uglify
]

[fabpico]

Chrome 68.0.3440.106

Since a few days, sometimes on specific lines, i can't set a breakpoint. Since 10 months i am using eval-source-map, never had problems before.

Tried with source-map and cheap-module-eval-source-map and cheap-eval-source-map. Does not change anything.

[jxintang]

@FabianPiconeDev
Having this same issue. updating chrome to 69 solves the problem.

[elliottregan]

Can you add a similar message for the source map bug in Firefox?

[russelldavis]

Breakpoints in Chrome don't work with cheap-module-source-map. See facebook/create-react-app#6074 (comment).

[nsaikiran]

Hi everyone,
I'm using Chrome Version 72.0.3626.121 (Official Build) (64-bit).
and Webpack 4.4.22.
Webpack configuration is according to production guide from documentation.
Used devtool: source-map.
Chrome says it detected sourcemaps. I can access original source code. But while debugging can't inspect variables.
development build is working fine with sourcemaps.
Any help is appreciated.
Thanks

[kane-mason]

Hi, not sure i am in the right place. But i have always had issues with async/await being transformed to regeneratorRuntime. It is impossible to step through the code, you get sent into the source code. We work around this by just not transpiling async/await during development, but would prefer a proper solution.

We have a similar issue with private fields, babel allows us to transpile them, but they are not inspectable in Chrome :(

Chrome 81.0.4044.92
Webpack 4.41.2

[testacode]

Sourcemaps not working for me on webpack 5.6.0 no matter which type I use. I always get the transpiled code for development mode, I need to get the original code.

[alexander-akait]

@testacode when you write it, please provide reproducible test repo, how we can help with this information?

[alexander-akait]

I want to close the problem due to a large number of reports that we cannot check, i.e. same here, don't work and etc without examples/repos/screenshots/etc. If you have the problem with source maps please open a new issue with steps how we can reproduce it. Also many issues were solved in webpack@5, so I recommend to check this before. Thanks

[ColCh]

@alexander-akait there is a link for this issue in docs

https://webpack.js.org/configuration/devtool/#devtool:~:text=There%20are%20some%20issues%20with%20Source%20Maps%20in%20Chrome

May be remove that reference as well? Opening closed issue using that link would provide WTF signal from people :)

[alexander-akait]

@ColCh Thanks, webpack/webpack.js.org#4606, we will remove it