Closed Bug 1223439 Opened 9 years ago Closed 5 years ago

Developer tools does not list javascript sources that are loaded using system js

Categories

(DevTools :: Debugger, defect, P3)

43 Branch
defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: sebastien.arod, Unassigned)

References

(Blocks 2 open bugs)

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:43.0) Gecko/20100101 Firefox/43.0 Build ID: 20151103100007 Steps to reproduce: I wrote a javascript application using System JS as a module loader (https://github.com/systemjs/systemjs) Actual results: The sources of my javascript modules loaded by systemjs are not listed in the developer tools debugger "sources" tab Expected results: The files loaded should appear in the sources tab similarly to what happen in chrome developer tools
Component: Untriaged → Developer Tools
Do you have a link to test page? This would greatly help us in resolving the issue.
Component: Developer Tools → Developer Tools: Debugger
Flags: needinfo?(sebastien.arod)
I created a simple app reproducing the issue at http://sarod.github.io/systemjs-ff-bugs/ To reproduce: 1. Browse to http://sarod.github.io/systemjs-ff-bugs/ 2. Open the developer tools debugger Developer tools shows only config.js, system.src.js, and app-bootstrap.ts but does not list all files that are loaded indirectly from app-bootstrap.js using System js (./my-app/my-app.js, ./my-side-nav/my-side-nav.js, ...) I'm not sure if it's related but I also noted that if the developer tools are open when loading the page the application completely breaks with "TypeError: Unexpected anonymous System.register call."
Flags: needinfo?(sebastien.arod)
I have the same problem and can confirm that it's breaking when you open the "Debugger" tab and reload the page. Console says "TypeError: Unexpected anonymous System.register call.". Once I get the error it will not go away until I close the developer tools and reload the page. Any progress on this issue?
I can confirm the issue on the test page above. It seems like the scripts missing from the debugging are loaded by XHR. James, any idea why they don't appear?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(jlong)
Haven't had time to look yet, but we've had issues before with the `sourceRoot` property of a sourcemap. It might be the same issue.
Ok so I took a look, and something is definitely weird. Thanks for much for filing this, I'll look at it early next week.
The problem is that some of your sourcemap URLs are returning the wrong content, for example: http://sarod.github.io/systemjs-ff-bugs/my-app.js.map That is not a sourcemap. But we *definitely* should not be breaking this badly when we can't parse a sourcemap.
Flags: needinfo?(jlong)
Thanks for looking into this. The source maps are located and loaded properly in chrome. So I guess there is a difference in the way source map with relative url are resolved. For instance http://sarod.github.io/systemjs-ff-bugs/my-app/my-app.js contains //# sourceMappingURL=my-app.js.map Chrome seems to resolve it as http://sarod.github.io/systemjs-ff-bugs/my-app/my-app.js.map which is where typescript compiler generated the source map. However from what you are saying FF is resolving the url as http://sarod.github.io/systemjs-ff-bugs/my-app.js.map which makes me think that it is using the <base href="."> of the index.html to resolve source map relative urls.
I didn't realize you had a <base> tag. Try removing it. Does it work then?
Ok so I removed the base href locally and it doesn't change a thing so it was a wrong lead. I tested with "show original sources" disabled. In this case the application runs properly even with developer tools open. Strangely enough * when source maps are disabled none of the xhr loaded scripts are listed in debugger * when source map are enabled one of the three xhr loaded scripts (app-boostrap.ts) is listed in debugger
Blocks: source-maps
I've been debugging this locally by checking out a copy of the github repo: https://github.com/sarod/systemjs-ff-bugs/tree/gh-pages I'm mostly testing the console source maps and the new debugger (both of which use the new client-side approach); I haven't looked into the problems with the old debugger, as that's slated for removal. TabSources sees the source just fine, e.g.: {"url":"http://localhost:8111/","displayURL":"http://localhost:8111/my-side-nav/my-side-nav.js","sourceMapURL":"my-side-nav.js.map","introductionType":"scriptElement"} However, logging in source-map-url-service never reports a source like this. So I think something is going awry on the server side.
Priority: -- → P3
Product: Firefox → DevTools

I believe this is now fixed! :)

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: