| GitHub Issue | n/a |
|---|
| Type | Bug |
|---|
| Priority | Critical |
|---|
| Status | Closed |
|---|
| Resolution | Fixed |
|---|
| Resolution Date | 2019-07-02T21:00:36.000+0000 |
|---|
| Affected Version/s | n/a |
|---|
| Fix Version/s | node-titanium-sdk 3.2.0, Release 8.1.0 |
|---|
| Components | n/a |
|---|
| Labels | engSchedule |
|---|
| Reporter | Mark Henderson |
|---|
| Assignee | Christopher Williams |
|---|
| Created | 2019-04-29T12:55:28.000+0000 |
|---|
| Updated | 2019-07-02T21:00:37.000+0000 |
|---|
For a while now I have only been able to debug using Safari on version 7.4.1GA. When I use 7.5.X or 8.0.X then the Safari Web Inspector doesn't seem to be wired up correctly anymore.
Please see the screenshot of what I see in Web Inspector. It seems to be displaying appcelerator Kroll type files rather than my apps files.
After quite a few re-deploys of the app to Simulator a breakpoint in Studio may hit and I can temporarily debug but it's not very stable. Deploying to a device seems to be better especially on Android.
Steps to reproduce:
- Create a new blank classic project (I don't use Alloy)
- Deploy in Debug mode to Simulator (I used iPhone XS as it was a new emulator type to be a fair test)
- Open Safari > Go to Developer > Simulator iPhone XS > JSContext
- I see Titanium internal js files not my app code (see screenshot)
Hello, Can you share the full steps to reproduce the issue on our end? We will try it with the latest SDK and the previous once to see whether the difference is reproducible or not. Thanks.
ok added the steps, see above..
[~mark.henderson@snagr.co.uk], Did you experience the issue on iOS simulator/device both?
I'm experiencing the same between iOS simulator, device and Android both.
So debugging in Studio vs Safari/Chrome are entirely separate issues. There are known issues with Studio debugging in various configurations/OS versions and we're working on those issues. (e.g. TISTUD-9161, TISTUD-9166) One of the bigger ones recently was that with iOS 11.3+ Apple modified how the debugger connects to simulators - TISTUD-9159 Debugging in Safari/Chrome should work fine, and the screenshot does not indicate an "issue" here. In SDK 8+ we use polyfilling on the platforms to "fill in" support for ES6+ language features that the underlying JS engine may not yet support. Those files in the screenshot are a result of that polyflling and technically *are* baked into your app/the SDK. The set of files that get included varies by the platform/JS engine, but iOS has much more than Android due to our support back to iOS 8.x (which effectively has no native ES6 support). Also note that as of 8.1 we "bundle" all the polyfills/internal JS code we bake in to a single file (ti.main.js), so the file listing will be less "busy".
Hi Christopher, Thanks for the update, I will check each issue out tomorrow. With iOS I wasn't able to locate my files but I will check again tomorrow. Chrome seems to be working great, there are extra files but they are nicely segregated and I can see my own files and debug etc,, Safari / Appcelerator Studio is struggling at the moment. Thanks!
Ok, I'm actually seeing this oddball behavior under Safari/iOS as well - I can see *some* of the polyfilled scripts, but can't see the app.js file itself in the list of scripts. I don't really get why it likes some files but not others here...
Looks like Safari may have an issue with files that contain inlined source maps in a trailing comment? Seems to me that only the files returning a sourceMapURL value are "missing" in the listings. According to this, they've had support for this since 2016: https://bugs.webkit.org/show_bug.cgi?id=154303 So I'm not really sure exactly what's going wrong here. I guess I'll have to fiddle with not generating source maps or tweaking settings to try and figure it out.
For a first pass, I think turning off source-maps by default on development builds for iOS would help. I'm going to expose a --source-maps flag to the CLI build, so we can explicitly turn it on for builds (say from Studio), as right now it's a tiapp property (so source mapping will be turned on if you have the property set to true or pass the flag to the CLI for iOS - it will remain on by default for non-production builds on Android)
https://github.com/appcelerator/node-titanium-sdk/pull/106
Thanks for handling this Chris! Curious if Alloy files finally show up properly as well (not the generated files but the ones that actually include ES6+ etc).
Hi Chris. I've pulled the module from your repo, but didn't manage yet to get all source code to show up in the Webkit inspector. I've build using the command from VSC: {noformat} appc "run" "--platform" "ios" "--log-level" "debug" "--project-dir" "/Users/richard/Code/Titanium/Drawing App" "--target" "simulator" "--device-id" "xxx" {noformat} Is there. anything else I should do? I've used your branch, latest commit from today (17-6-19) Thanks for taking care of this!
PR to roll this fix up into SDK 8.1.0: https://github.com/appcelerator/titanium_mobile/pull/10981
FR Passed. The app.js (main and child) are both shown during debug using safari web inspector and chrome dev-tools. Also the breakpoints are hit as expected.
merged to master and 8_1_X
Verified the fix on sdk 8.1.0.v20190702104421 and 8.2.0.v20190702103948.Debugger shows all app files. works as expected
Name = Mac OS X Version = 10.14.5 Architecture = 64bit # CPUs = 12 Memory = 17179869184 Node.js Node.js Version = 10.13.0 npm Version = 6.4.1 Titanium CLI CLI Version = 5.2.1 Titanium SDK SDK Version = 8.2.0.v20190702103948 and 8.1.0.v20190702104421 Device = iPhone X iOS 11 Simulator = iPhone XS iOS 12