Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HELP WANTED] Perform source-map audit against webpack #3165

Closed
TheLarkInn opened this issue Oct 19, 2016 · 89 comments
Closed

[HELP WANTED] Perform source-map audit against webpack #3165

TheLarkInn opened this issue Oct 19, 2016 · 89 comments

Comments

@TheLarkInn
Copy link
Member

@TheLarkInn TheLarkInn commented Oct 19, 2016

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
Copy link

@addyosmani addyosmani commented Oct 20, 2016

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
Copy link

@mattkime mattkime commented Oct 21, 2016

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
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 21, 2016

@addyosmani thank you so much.

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

@mattkime
Copy link

@mattkime mattkime commented Oct 21, 2016

@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
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 21, 2016

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
Copy link

@mattkime mattkime commented Oct 21, 2016

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
Copy link

@mattkime mattkime commented Oct 21, 2016

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

@mattkime
Copy link

@mattkime mattkime commented Oct 21, 2016

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
Copy link

@rob3c rob3c commented Oct 21, 2016

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
Copy link

@mattkime mattkime commented Oct 21, 2016

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
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 21, 2016

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

@TheLarkInn
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 21, 2016

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

@mattkime
Copy link

@mattkime mattkime commented Oct 22, 2016

@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
Copy link

@mattkime mattkime commented Oct 22, 2016

@TheLarkInn webpack v1.13, right?

@mattkime
Copy link

@mattkime mattkime commented Oct 22, 2016

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
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 22, 2016

Curious about v2.1.0-beta.25 also

@TheLarkInn
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 22, 2016

Nice work btw. I will check this out.

@mattkime
Copy link

@mattkime mattkime commented Oct 22, 2016

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
Copy link

@jmfirth jmfirth commented Oct 25, 2016

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

@mattkime
Copy link

@mattkime mattkime commented Oct 25, 2016

@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
Copy link

@jmfirth jmfirth commented Oct 25, 2016

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
Copy link
Member Author

@TheLarkInn TheLarkInn commented Oct 25, 2016

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
Copy link

@reohjs reohjs commented Mar 1, 2018

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
Copy link

@marharyta marharyta commented May 1, 2018

@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
Copy link

@reohjs reohjs commented May 2, 2018

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

@gkatsanos
Copy link

@gkatsanos gkatsanos commented May 4, 2018

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
39046259-db556168-4495-11e8-99d9-b366b8cb976f

@Harrix
Copy link

@Harrix Harrix commented Jun 4, 2018

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

@MLoughry
Copy link
Contributor

@MLoughry MLoughry commented Jul 3, 2018

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
Copy link
Contributor

@MLoughry MLoughry commented Jul 3, 2018

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

@Tiberriver256
Copy link

@Tiberriver256 Tiberriver256 commented Aug 1, 2018

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
Copy link

@lee149205 lee149205 commented Aug 22, 2018

i use devtool: 'source-map'
It's ok . But I cannot watch variable (always "not available")
screen shot 2018-08-22 at 8 46 11 am

@lee149205
Copy link

@lee149205 lee149205 commented Aug 22, 2018

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

@FabianPiconeDev
Copy link

@FabianPiconeDev FabianPiconeDev commented Aug 24, 2018

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
Copy link

@jxintang jxintang commented Sep 10, 2018

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

@elliottregan
Copy link

@elliottregan elliottregan commented Oct 10, 2018

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

@russelldavis
Copy link

@russelldavis russelldavis commented Feb 9, 2019

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

@nsaikiran
Copy link

@nsaikiran nsaikiran commented Mar 8, 2019

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
Copy link

@kane-mason kane-mason commented Apr 15, 2020

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
Copy link

@testacode testacode commented Nov 25, 2020

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
Copy link
Member

@alexander-akait alexander-akait commented Nov 26, 2020

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

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Feb 5, 2021

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
Copy link

@ColCh ColCh commented Feb 16, 2021

@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
Copy link
Member

@alexander-akait alexander-akait commented Feb 16, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet