Open Bug 1695640 Opened 3 years ago Updated 3 years ago

List bundled sources (webpack:///... et al.) under the relevant host


(DevTools :: Debugger, defect, P3)



(Not tracked)


(Reporter: Honza, Unassigned)


(Blocks 1 open bug)



(1 file)

Attached image image.png

Originally reported here:

Opening this for discussion. My apologies if this was decided against already.

Could we perhaps nest the Webpack folder (or Angular or other bundler-specific folders) under the relevant host? As far as I know, when we have webpack:///... sources they were identified in the source map for a JS or CSS file hosted on a specific origin. It would be better to reflect this association in the sources tree, for the following reasons:

  1. The same-origin policy has a lot of impact in JavaScript, so it would be better to reflect that origin to users.
  2. Related: we should avoid creating the illusion that "Webpack" or "Angular" are some magical web origins. I'm working with a lot of developers, juniors devs, including some from a other backgrounds, and the basic concepts of URLs and HTTP are not always known (people know the structure of their git repository and run a magical command that spawns a web server on localhost:3000 for them); it would help if Debugger reflected origins and URLS a bit better.
  3. How do we manage it if we have webpack:///... sources from 2+ different domains? We may end up creating a "Webpack" tree that is nonsensical and merges different projects together.

Nesting the Webpack/Angular/etc. "folders" under their host could be a good compromise between reflecting URLs and still giving quick access to the original sources bundled by those tools.

Current result & expected result at the attached screenshot.

This would solve part of #7921 too.

You need to log in before you can comment on or make changes to this bug.