search

firefox-devtools / debugger

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠
https://firefox-dev.tools/
4.61k stars 759 forks source link

Sourcemapping url with a data uri - FF does not use the sourcemap. #7613

Closed raghur closed 4 years ago

raghur commented 7 years ago

I'm developing an app in vue.js with Karma and webpack. While debugging in browser, the sourcemap is specified with a //# sourcemappingurl = and a data uri with the source map. This seems to work fine in Chrome but not in FF (57). I prefer to use FF but in this case am forced to use Chrome. I checked bugzilla and googled a bit but it's unclear if there's a reason why firefox doesn't support this.

tromey commented 7 years ago

data: URLs were fixed a while back; if you are using 57 then they should be fine. However, there are various other source map bugs still ... is your app available somewhere so I could try it? I know nothing about vue, karma, ...

raghur commented 7 years ago

Repo - https://github.com/raghur/vue-testdrive

  1. Clone repo
  2. run npm i
  3. run node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
  4. run npm run test:debug This will run unit tests with karma on the console. Now you can browse to http://localhost:9876 (karma web console). There's a debug button - if you hit that you get a blank page. Open dev tools and look at /base/test/index.js which has a //# sourcemappingurl. Same thing on Chrome provides sourcemapped files.
tromey commented 7 years ago

I tried this, and indeed it doesn't work, but I also see errors while building the pack and errors from the server:

    ERROR in ./~/bootstrap/dist/css/bootstrap.css
    Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
        at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
        at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
     @ dll vendor

    ERROR in ./~/bootstrap/dist/css/bootstrap.css
    Module build failed: ModuleBuildError: Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
        at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
        at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
        at runLoaders (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/webpack/lib/NormalModule.js:192:19)
        at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:364:11
        at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:230:18
        at runSyncOrAsync (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
        at iterateNormalLoaders (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
        at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-runner/lib/LoaderRunner.js:202:4
        at /home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:62:14
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
    Child extract-text-webpack-plugin:

        ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css
        Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
            at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
            at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)

Then later

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: Module build failed: Error: A valid query string passed to parseQuery should begin with '?'
      at Object.parseQuery (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/loader-utils/lib/parseQuery.js:13:9)
      at Object.module.exports (/home/tromey/firefox-git/Source-Maps/vue-testdrive/node_modules/css-loader/lib/loader.js:15:26)
  at test/index.js:3885
11 09 2017 08:41:25.942:WARN [reporter]: SourceMap position not found for trace: undefined
raghur commented 7 years ago

Yes - that doesn't look right. I just double checked and it looks like my npm-shrinkwrap.json was referring to a private feed which would have caused problems for you. Removed those and have pushed a commit. Also checked on a clean clone. Can you pull from the repo and try again?

tromey commented 7 years ago

I still get the webpack errors.

tromey commented 7 years ago

One thing that would be helpful is to know what file I should be able to see that I don't currently see.

raghur commented 7 years ago

Did you retry the npm -i after pulling? Also clean out wwwroot/dist before building vendor.js and/or running npm test:debug as well. I'm not quite sure why you're getting the errors - I've double checked on a clean env. Will try on my linux m/c tomorrow.

You should see a webpack built file at http://localhost:9876/base/test/index.js with the inline source map - this is served by Karma (in memory) and doesn't actually exist on the file system.

tromey commented 7 years ago

Yeah, I did re-run npm but to be sure, just now I:

rm -rf node_modules
rm -rf rm -rf wwwroot/dist/
npm i
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

... and I see those same errors.

tromey commented 7 years ago

I do see base/text/index.js in the debugger. Which original sources should I be able to see?

raghur commented 7 years ago

You should see sources from ClientApp/**/*.vue or ClientApp/**/*.ts. (On chrome, works as intended)

BTW, I re-ran everything on my linux box and it works without errors (npm run test:debug will spew out some errors the first time but they're harmless). For reference, I have

node --version
v7.10.1
node node_modules/webpack/bin/webpack.js --version
2.7.0
tromey commented 6 years ago

I do see those files, but they appear to have been mangled by webpack. Like, the .vue files don't start with <template>. The .ts files look reasonable though.

raghur commented 6 years ago

here's what I see in Chrome on browsing to http://localhost:9876 and then the Debug button

image

And here's firefox nightly image

SwagMuffinMcYoloPants commented 6 years ago

@raghur Any news on this? I've been having similar problems with source maps myself.

raghur commented 6 years ago

@SwagMuffinMcYoloPants - no nothing here though you'll have to ask @tromey. I have gone back to using Chrome for debugging and on to other stuff.

tromey commented 6 years ago

Sorry about the delay on this. I'm not actively working on source maps now and so I've also lost some state.

@raghur I think in your screenshot, if you go to the webpack:// part, you would see the original sources.

@SwagMuffinMcYoloPants what problems are you seeing; with what version of Firefox; and do you have a way to reproduce the problem?

SwagMuffinMcYoloPants commented 6 years ago

@tromey I have an application that's using Spring Security and the Javascript files require authentication I just get an error saying that Firefox couldn't parse the source map because it's not valid JSON. I take the Javascript code and move it outside the Spring Security enforced web app and the source maps load. My only guess it that when it load the source maps, it's redirecting to the login page. I don't have time right now to make an example today but I'll see if I can get a Docker instance up and running.

tromey commented 6 years ago

the Javascript files require authentication

This sounds like a different bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1404245

SwagMuffinMcYoloPants commented 6 years ago

Thanks @tromey, i'll track that bug.

jasonLaster commented 5 years ago

@raghur i just tried to reproduce and could not run npm run test:debug

we've fixed a bunch of sourcemap / vue bugs in the past year so i'm hopeful it will work...

➜  vuejs2-typescript-starter node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Hash: c1d4e8afb52d40031a6c
Version: webpack 3.12.0
Child
    Hash: c1d4e8afb52d40031a6c
    Time: 1759ms
                                   Asset      Size  Chunks                    Chunk Names
    89889688147bd7575d6327160d64e760.svg    109 kB          [emitted]
                               vendor.js    674 kB       0  [emitted]  [big]  vendor
                              vendor.css    315 kB       0  [emitted]  [big]  vendor
                           vendor.js.map    852 kB       0  [emitted]         vendor
                          vendor.css.map  87 bytes       0  [emitted]         vendor
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/bootstrap/dist/css/bootstrap.css:
         1 asset
➜  vuejs2-typescript-starter npm run test:debug

> netcore@0.0.0 test:debug /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter
> node node_modules/karma/bin/karma start --no-single-run --debug --browsers PhantomJS

Is Debugging true
Is running tests: 1
Dev Build: true
Starting type checking service...
Using 1 worker with 2048MB memory limit
resolve failed:  { Error: Cannot find module 'pn'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } pn
node_modules/nan
mootools already loaded
resolve failed:  { Error: Cannot find module '@types'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @types
resolve failed:  { Error: Cannot find module 'caniuse-db'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } caniuse-db
resolve failed:  { Error: Cannot find module 'babel-runtime'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } babel-runtime
resolve failed:  { Error: Cannot find module '@vue'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @vue
resolve failed:  { Error: Cannot find module '@sinonjs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.requireRelative.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:25:26)
    at findAndRemove (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:67:11)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:108:13
    at Array.map (<anonymous>)
    at loadPreset (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/lib/serialize.js:100:29)
    at module.exports (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/modify-babel-preset/index.js:88:19)
    at Object.<anonymous> (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/babel-preset-es2015-mod/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18) code: 'MODULE_NOT_FOUND' } @sinonjs
(node:19039) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(node:19039) [DEP0027] DeprecationWarning: util.puts is deprecated. Use console.log instead.
(node:19039) [DEP0016] DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
04 01 2019 12:11:22.132:ERROR [karma]: TypeError: Cannot read property 'length' of undefined
    at NormalModuleFactory.resolveRequestArray (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:249:12)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/moo-server/mootools.js:710:16
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3880:24
    at eachOfArrayLike (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1069:9)
    at eachOf (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1117:5)
    at _parallel (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3879:5)
    at Object.parallelLimit [as parallel] (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3962:5)
    at asyncLib.parallel (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:188:14)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3888:9
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:1064:13)
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:969:16
    at /Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/async/dist/async.js:3885:13
    at resolvers.normal.resolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/webpack/lib/NormalModuleFactory.js:120:7)
    at onResolve (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
    at innerCallback (/Users/jlaster/src/_daily/Jan-04/vuejs2-typescript-starter/node_modules/enhanced-resolve/lib/Resolver.js:143:22)
(node:19039) [DEP0079] DeprecationWarning: Custom inspection function on Objects via .inspect() is deprecated
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! netcore@0.0.0 test:debug: `node node_modules/karma/bin/karma start --no-single-run --debug --browsers PhantomJS`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the netcore@0.0.0 test:debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
loganfsmyth commented 4 years ago

We've fixed a bunch of sourcemap issues in the last few months, so I'm going to close this as likely fixed. It anyone wants to test, make sure to look at Nightly or Beta. If there are still any issues, please file on Bugzilla.