The source maps don't work in Developer Tools when debugging an Android device

[Maksymilian Majer]

When I am using the Developer Tools in the browser the javascript source map is extracted and I can debug files separately. When I inspect my Android device using Developer Tools and the exact same source code, the javascript source map isn't extracted and I can't see the separate files in the Sources tab. Also I've checked using the cordova-file plugin, that the .map file exists on the device. When I run on the iOS device Safari has no problem extracting the source map and I can debug correctly.

Here's the screen when hosted on the local computer:

Here's a screen from the device inspector:

Here's the screen of the device inspector settings:

I'm running Chrome Version 43.0.2357.124 (64-bit) on Mac OS X Yosemite 10.10.3 (14D136). I also tried this on Chrome Version 45.0.2428.0 canary (64-bit). I know from fellow developers, that this issue applies to Windows PCs as well. A couple of weeks ago everything works fine. It stopped working before I came back from holidays.

[Torne (Richard Coles)]

+android-webview-dev, mnaganov

bcc chromium-discuss

Mikhail probably knows for sure, but I think that devtools debugging on Android is not able to access arbitrary file:// urls on the device - I think it can only see the contents of things that have *actually been loaded* into the current page..

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

[Maksymilian Majer]

Ok, thanks for letting me know. So for the purpose of debugging on the device I will not extract the sourcemap from the end of javascript file.

Best,

Maks

[Mikhail Naganov]

From the screenshots, it looks like in this particular case the files are accessed via file://android_asset scheme, which, I guess, should work just fine (in theory). But there is a technical issue with WebView.

I looked at the DevTools code briefly, and it seems like at first it tries to load source maps via XHR on the frontend (which would not work for those files, for sure :):

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/front_end/sdk/SourceMap.js&l=92

and if it fails, then it fallbacks to the server-side code:

https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/devtools/devtools_ui_bindings.cc&l=583

But unfortunately, this server-side code is in chrome/ layer, thus it is missing in WebView. For Content Shell, there is a manual message interceptor that handles this particular message:

https://code.google.com/p/chromium/codesearch#chromium/src/content/shell/browser/shell_devtools_frontend.cc&l=199

So it looks like, we need to implement it in WebView.

Andrey, Pavel, does this seem to be a correct guess?

[Pavel Feldman]

Not really. DevTools downloads source maps using the front-end browser, not the one that runs the inspected page. So file://android... is never going to be accessible. You need to point to the files on your development box instead.

We used to fetch source maps using inspected page but then migrated off that pattern. We now might need to talk to the framework owners that bundle source maps to see if they can switch to pointing to the local files instead.

Regards
Pavel