[bumpy]

The JavaScript code in my Cordova app is minified.
I’m able to watch and edit my code using GapDebug, but I can’t search through my code to find certain lines, classes, etc which is a big problem.
When I try to press Ctrl+f while in the code editor, it doesn’t show the find toolbar like it does in Chrome dev tools.
When I try to use the search field above the resources tree that says “Search resource content”, it does find matching results but whichever result I click, I get to the first line in my js code (although unlike in Chrome dev tools, my code is formatted well even when pretty print is not selected).
When I use the pretty print option, I do get to different lines in my code, but not the right ones.

Do you have any suggestions?

I’m using GapDebug version 2014EA3 on a window 7 machine.
My mobile device is iPhone 5s running iOS 7.1.2.

Thanks

[bumpy]

I don’t know it it’s related or not, but it seems I can’t stop at breakpoints (the breakpoint is active and Web inspector is enabled).

[support-michael]

@bumpy
Thanks for sharing this issue. Will investigate asap and follow up.

[support-michael]

I looked into this a little more. GapDebug implements a custom version of the safari webkit inspector and attempts to stay as true as possible to the original as is practical. For minified code a source map is required for search and breakpoints to function correctly. See this http://goo.gl/Mcnu0s and scroll down to the JavaScript and CSS section that briefly discusses this.

I’m hoping to test out source maps later today as part of debugging a jquery issue similar to this doc: https://blog.safaribooksonline.com/2013/12/04/debug-js-with-source-maps/ I’ll share how it goes.

>When I try to press Ctrl+f while in the code editor, it doesn’t show the find toolbar like it does in Chrome dev tools.

hmm! Is this behavior only with a minified file? Here’s a screenshot from some of my testing while investigating this topic. See attachment safari-jsminimified.jpg

Attachments:

You must be logged in to view attached files.

[bumpy]

Hi,

Thanks for your response.

I believe both Chrome and Safari dev tools allow searching and settings breakpoints in minified js code using the “pretty print” option without using source maps.
The article you linked to (http://goo.gl/Mcnu0s) states that source maps allow splitting the code into its original source files, and not that they are necessary for debugging or searching.

Do you say that GapDebug requires source maps although they are generally not necessary in Safari web inspector? That could be a real pain for people who use automated build tools like the one Sencha Touch uses, for instance.

Regarding the ctrl+f command, I’ll check this and get back to you.

[support-michael]

>Do you say that GapDebug requires source maps although they are generally not necessary in Safari web inspector?

A src map should NOT be required for searching a minified js file. I ran the search scenario on my osx using the safari webkit inspector. Search worked properly. Conclusion: a bug in GapDebug.

I found that to reveal the search field in the editor that sometimes (not everytime) I have to 1st click in the heading breadcrumb area before ctrl-f (windows) will reveal the search field. I did not notice this before today. I’ve opened a bug on this.

Lastly, I have not been able to stop at a breakpoint set in a minified js file, e.g., jquery, for either GapDebug or my osx webkit inspector. Looking into this more deeply.

[bumpy]

The search field did show when I clicked the heading area and only then pressed ctrl+f.
Searching minified code using the search field when pretty print option was on worked fine.

Regarding the breakpoints:
This article states specifically that breakpoints should work for minified code using pretty print: https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Debugger/Debugger.html.
I also tried setting breakpoints in minified code on my osx webkit inspector.
First it didn’t stop at my breakpoint, by after I reloaded the app using Command+r, it did (pretty print on).
I tried doing the same in GapDebug, but couldn’t get breakpoints to work.
Also, when trying to set breakpoints in GapDebug while pretty print was on, it seemed to me that the breakpoints were being set on the wrong lines.

I also noticed weird behavior with “undo” using the GapDebug’s editor.
The undo command didn’t work properly for me either using ctrl+z and mouse right click->undo (I tried deleting a word and undoing the delete).

[bumpy]

Any news on those issues?

[support-michael]

@bumpy

>Any news on those issues?

We will be looking at this set of issues very soon. The iOS8 compatibility update (EA4) preempted other dev such as this case. I’ll post an update as soon as we make progress.

[Author]

Posts