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

Open
TheLarkInn opened this Issue Oct 19, 2016 · 81 comments

Comments

Projects
None yet
@TheLarkInn
Member

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Member

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?

@TheLarkInn

This comment has been minimized.

@mattkime

This comment has been minimized.

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

This comment has been minimized.

Member

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

This comment has been minimized.

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

This comment has been minimized.

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

@joachimprinzbach

This comment has been minimized.

joachimprinzbach commented Oct 21, 2016

@mattkime

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Member

TheLarkInn commented Oct 21, 2016

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

@TheLarkInn

This comment has been minimized.

Member

TheLarkInn commented Oct 21, 2016

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

@mattkime

This comment has been minimized.

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

This comment has been minimized.

mattkime commented Oct 22, 2016

@TheLarkInn webpack v1.13, right?

@mattkime

This comment has been minimized.

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

This comment has been minimized.

Member

TheLarkInn commented Oct 22, 2016

Curious about v2.1.0-beta.25 also

@TheLarkInn

This comment has been minimized.

Member

TheLarkInn commented Oct 22, 2016

Nice work btw. I will check this out.

@mattkime

This comment has been minimized.

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

This comment has been minimized.

jmfirth commented Oct 25, 2016

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

@mattkime

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Member

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).

@lanoxx

This comment has been minimized.

lanoxx commented May 15, 2017

I was being hit by this bug earlier today. After searching for a while I found this documentation:

TL;DR
[...]
Verify that your web server can serve Source Maps.

I was just using IntelliJ's built in WebServer which was serving on port 63342. Chrome showed me the noticed about "Source maps detected" but did not load the source maps. I then installed webpack-dev-server and now there is a webpack://that contains the mapped source code.

@bbottema

This comment has been minimized.

bbottema commented Jun 10, 2017

@Vanuan

@Tiagojdferreira source-map configuration without uglify should be good in webpack@2.3.2

Not in Chrome 58.0.3029.110 (64-bit) with Webpack 2.6.1. Got a test project I can run to verify?

@Vanuan

This comment has been minimized.

Vanuan commented Jun 10, 2017

@bbottema How is it bad? Do you use babel or webpack for es modules (modules: false)? Or you don't see them at all?

I know that people sometimes think it's bad because they don't see imported symbols, but it's actually fine.

@bbottema

This comment has been minimized.

bbottema commented Jun 10, 2017

@Vanuan, I only see transpiled code. Chrome reports sourcempas detected, but doesn't actually show them.

  • Karma 1.7.0
  • Webpack 2.6.1 with awesome-typescript-loader 3.1.2
  • devtool: 'source-map' in webpack-config, not using Uglify plugin
  • "sourceMap": true in ts-config (typescript 2.3.1)

I don't know what I can try next to make this work

@Vanuan

This comment has been minimized.

Vanuan commented Jun 10, 2017

Ah, so you're not using babel? You should probably ask awesome-typescript-loader authors.

@Coridyn

This comment has been minimized.

Coridyn commented Jul 6, 2017

For people serving their JS assets with Sprockets or the Rails Asset Pipeline be aware that it adds an extra newline at the top of processed sources which can cause debugging with sourcemaps to be off-by-one.

I'm adding this comment here in case people have a similar setup (using Webpack to build assets but serving files with Sprockets) to let them know the issue isn't with Webpack but could be with Sprockets/Asset Pipeline.

This issue was fixed in this commit which will be included in Sprockets v4.0.0.

@wbern

This comment has been minimized.

wbern commented Oct 16, 2017

webpack 3.6.0-3.7.1 using eval-source-map in Chrome does not let me place breakpoints inside jsx in a typical react project. All filenames also have ?ab21 added to them (random letters and digits).

Works using regular "source-map" option.

@reohjs

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

reohjs commented May 2, 2018

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

@gkatsanos

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

MLoughry commented Jul 3, 2018

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

@Tiberriver256

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

lee149205 commented Aug 22, 2018

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

@FabianPiconeDev

This comment has been minimized.

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

This comment has been minimized.

jxintang commented Sep 10, 2018

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

@elliottregan

This comment has been minimized.

elliottregan commented Oct 10, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment